• Facebook Icon Linking to IGV Inc Facebook page
  • Instagram Icon Linking to IGV Inc Instagram Page
  • Twitter Icon Linking to IGV Inc Twitter Page
  • RSS Feed Icon Linking to IGV Inc RSS Feed
  • LinkedIn Icon Linking to IGV Inc LinkedIn Page

Best Practices for Digital Images

Website Image Design options on a laptop screen with someone typing, IGV logo shown

In a mobile-first web design world, it is important to think about the best practices for the images that you create and share online. You only have a few seconds to grab a user’s attention and if your website is loading slowly you will miss potential sales.  In fact, a study by Google revealed that more than half of your users will abandon your page if it takes longer than 3 seconds to load.  

Are Digital Images Slowing Down Your Mobile Website?

Mobile page speed is vital to improving website conversions.  The biggest challenge today is creating interesting mobile pages that load quickly.  Large images mean slower loading time.  So what can you do to shrink the image while maintaining the quality?

How can you tell if this is a problem for your website?  Google offers a great free tool for anyone to check their website speed called PageSpeed Insight.  You can test your website now to see if your images are affecting your page speed.  Here are the results for IGV:

IGV Page Speed Capture showing optimized IGV website with Website Images optimized.

There are usually a few culprits slowing down your website.  According to Google the second biggest culprit is large image files.

Searchable Vector Graphics (SVG) Images:

SVG file types are great for the web.  They are often used for website graphics like logos or illustrations and charts. The nice thing about this image file type is that it is scalable and can be printed with high quality.  SVG files can also be used in animation.  And they have been recommended by the World Wide Web Consortium (W3C) since 2001. 

Advantages of SVG Image Types:

  • May be created and edited with any text editor.
  • Can be searched, indexed, scripted, and compressed.
  • Images are scalable.
  • Are printed with high quality at any resolution.
  • SVG images are zoomable.
  • As graphics they do NOT lose any quality
  • SVG images are an open standard.
  • SVG files are pure XML.
  • Faster loading time means better Search Engine Ranking

Disadvantages of SVG Images:

  • SVG images do not have as much detail based on points or pixels.
  • Some legacy website browsers do not support SVG images.
  • WordPress does not natively allow you to upload SVG files without modification to your PHP functions.

JPEG or JPG Images:

Think about the quality of the image you are using on your website.  With JPG images you are able to upload larger formats of images that load faster than PNG files. The larger the image, the slower it loads.  Naturally, you want to have bigger images in a format that loads as fast as possible and the JPG format is a good option for you.  However, if you choose to use a compressor tool like TinyPNG.com you will lose the larger-sized, higher-resolution image that you started with. 

For instance.  Typical print-quality images should be no less than a 300 DPI resolution. This ensures the printed images are not grainy.  The human eye however does not see the difference in digital images compressed to 72 DPI.  Thus, compressing a JPG image for digital purposes to a lower resolution is perfect for faster loading images.  You just can’t go back to the higher-resolution file after it is compressed so make sure you save it as a copy and do not copy over the high-resolution original.

Advantages of JPG Images:

  • Smaller file sizes
  • Faster web loading time
  • Enable different levels of compression. 
  • Great for sharing on social media.

Disadvantages of JPG Images:

  • Are not transparent.
  • May not have high resolution.

Portable Network Graphics (PNG)

PNG files are used on websites to display high-quality images. PNGs offer a flexible or scalable format for image compression. In addition, the PNG format has a much broader and brighter color palette than a JPG image.  

Advantages of PNG Images:

  • Transparent
  • Clean and crisp digital graphic format.
  • Easily scalable
  • Clear and higher quality great for illustrations and print media.
  • Animation is supported.

Disadvantages of PNG Images:

  • Slower website loading time.
  • More data in the file itself which makes it a larger file size.

WEBP Images:

Tweet by Iggy Vision "what is the best format for fast-loading website images?" with #WebP #MobileFirst #PageSpeed and www graphics with WebP icon

Google actually prefers images in WebP images.  This is a new format for digital images that provide a lose compression for images.  Meaning you can get the same kind of scalability as a PNG file that is more than 25% smaller.   WebP images are also smaller than comparable JPG images.  They are quickly becoming a favorite image type of many website developers.  You can convert existing files for free using a clever website tool called Convertio.  Keep in mind that this tool can only convert two files at a time.  You cannot batch them.

Advantages of WebP Images:

  • Scalability
  • Transparency
  • Smaller File Sizes
  • Faster loading time means better Search Engine Ranking
  • Animation is supported.

Disadvantages of WebP Images:

  • You can’t download it from Canva as a WebP.
  • They don’t share well on social media.
  • Not available on all browsers (however Chrome, Safari, Firefox, Edge, Opera)

What WordPress Plugins Compress Image Sizes?

While it might seem like a great idea to throw a plugin on your website to help you optimize your image sizes, that isn’t always the best way to go.  First, the more plugins you have installed on your WordPress website the more code you have on the back end.  Just having a ton of plugins by itself will slow down your website loading speed, so when something seems like a quick fix, make sure you are weighing your options from a higher level.  

There are times when installing a plugin may be worth it. For instance, If you have an e-commerce website with multiple images per page that are very large, a plugin like TinyPNG or EWWW Image Optimizer will quickly be able to help you compress your website images and improve your page speed.

TinyPNG website image optimization tester used on the IGVInc.com website showing only a 14% savings and a .03 second increase in screen loading if plugin was used to optimize images.

You can test your image web page optimization for free on TinyPNG.  Here is an example of the report you will see.  We tested IGV’s homepage and found that installing the plugin would have only saved us 14% or a load time of .03 seconds.  In this case the added load time of the extra coding on the backend of the site doesn’t justify the savings for the additional plugin.  We found that doing it ourselves the right way to start with was a better long-term solution for creating faster load time on our website.

Conclusion:

Creating images that are designed for faster webpage loading is vital to your continued success in a mobile-first website world.  It is important to leverage your website traffic into a funnel for leads and sales.  If your website is loading slowly, you are losing customers.  There is no perfect solution for everyone, rather, Innovative Global Vision will help you explore the best options for your digital footprint and help you create a best practice for your team when uploading digital images to be used on your website or to social media.  Every second counts.  Let’s get started.

Author
A. Elizabeth Orley
Date
January 24, 2023
Category

Get marketing tips & seminar notifications!

Get the latest update on digital marketing trends and upcoming seminar notifications straight to your inbox.

IGV Inc Logo - It's all about results!
Innovative Global Vision is a website design and digital marketing agency that specializes in WordPress website development, hosting, and digital marketing solutions…
Learn about us and our values
1410 Highland Rd. Suite 14
Macedonia, OH 44056
Phone: (330) 425-0922341 Talbot Street, Suite 319
London ON N6A 2R5
Phone: (416) 800-0657
Mon – Fri: 9:00am – 5:00pm
Sat – Sun: Closed
© 2023 Innovative Global Vision
  • Facebook Icon Linking to IGV Inc Facebook page
  • Instagram Icon Linking to IGV Inc Instagram Page
  • Twitter Icon Linking to IGV Inc Twitter Page
  • RSS Feed Icon Linking to IGV Inc RSS Feed
  • LinkedIn Icon Linking to IGV Inc LinkedIn Page