The Importance of Image Optimization for Web
Overview
It’s no secret that images are an important part of a good content strategy. Not only do they help your content stand out, they are also an important part of helping people find your website. As image usage has grown in popularity, so has the importance of making sure your images are properly formatted for the web. Let’s take a look at what that means.
Why image optimization matters
Search Engine Rankings
As of 2018, Google has started taking the speed of your website into account when it comes to search engine rankings. This means the slower your website loads, the less likely you are to have a favorable placement. It just so happens that one of the most common causes of a slow website is poorly optimized images.
Scaled images help achieve better search engine results.
User Experience
It’s not just the search engines that dislike slow websites, your end-user won’t like it either. According to a 2017 study from Google, the probability of a user leaving your website increases by almost 60% if your page takes longer than 3 seconds to load. This means that it’s imperative to deliver your content as quickly as possible in order to keep your users on your site longer.
The Rise of Mobile
In 2019, 62% of all internet users were using a mobile device. This means that nearly two-thirds of all visits to your website will come from a user on a phone or tablet. This number does vary by industry, but the important takeaway is that we are living in a mobile-first world and our websites need to be built with that in mind.
Because such a large share of internet users are mobile, it is important to keep in mind that many of these users will be using cellular networks that are typically slower than a wifi connection. Not to mention, not every mobile user has the benefit of unlimited data which means downloading oversized images on a webpage will use more of their precious data.
Mobile internet usage makes up nearly two-thirds of all internet traffic
Image file types: Which to use?
There is no shortage of options when it comes to file types for your images. From JPG to PNG to SVG, the options are seemingly endless. Let’s dive into the best image file type options for the web.
JPG’s
Pros
- Can be compressed into small file sizes
- Compatible across all major browsers
Cons
- Doesn’t support transparent images
- Image quality can suffer if not compressed properly
Ideal Usage
- JPG images work best for background images or photographs
PNG’s
Pros
- Supports transparent images
- Compatible across all major browsers
- High-resolution image quality
Cons
- Typically larger than it’s JPG counterpart
- Not as easily compressed as other file types
Ideal usage:
- Logos or high-resolution images
SVG’s
Pros:
- Tiny file size
- No loss in image quality when enlarged
Cons:
- Limited usage options
Ideal Usage:
- SVG images are vector graphics which means they can scale up or down in size without any loss in image quality. SVG images work best for animated graphics or logos.
Image size and placement
Find the Right Size
Once you have settled on the right file type for your image, you will want to make sure it is properly sized for its desired usage. As a general rule of thumb, try to keep your image sizes as small as possible while still retaining their visual integrity.
The largest images on your website should stay under 300kb (think background or full-screen images) while any inline image content should be under 100kb.
Be smart about placement
Once you have your images sized correctly, make sure you are strategic about where you place your images on your website. More specifically, be concious of how many images you place on the same page.
According to Pingdom’s 2017 Web Performance review, the average size of a single webpage is roughly 3MB. If your webpage is larger than this, consider reducing the number of images on that page.
How to optimize your images
Use a photo editing program (e.g. Photoshop)
The best way to optimize your images is to do so prior to adding them to your website. This means your image should be cropped, sized and exported according to it’s desired usage on your site.
For example, if you are using a JPG as a background image on your site you will want to make sure that it is large enough to cover the desired width and height of the background. If it is a full-width background, you will typically want your image to be somewhere between 1600 and 2000 pixels wide to accomodate high-resolution monitors. However, background images can usually be a lower resolution since they are not inteded to be the focal point.
Be sure you check your resolution settings when exporting an image from Photoshop or a similar program to make sure that it is under the recommended image size guidelines.
Use an online service
There are a number of image optimization services that can be used to compress your images. If you are a WordPress user, we recommend the ShortPixel plugin which has an easy to use bulk process feature. They provide an affordable solution that has delivered Mithril Media clients up to 60% file size reduction.
Use modern file formats
Google recently introduced a new file format known as WebP which is an image file type specifically designed for the web. According to Google, “WebP lossless images are 26% smaller in size compared to PNGs. WebP lossy images are 25-34% smaller than comparable JPEG images at equivalent SSIM quality index.” (https://developers.google.com/speed/webp).
Google provides a converter tool for Linux, Windows and Mac operating systems. You can also use popular image optimzation plugins such as the aforementioned ShortPixel to convert your WordPress media library to WebP on the fly.
WebP offers a great alternative to JPG and PNG without sacrificing image quality.
Conclusion
Making sure your images are optimized for the web may seem like a cumbersome task but as we’ve highlighted here, it’s time well spent. Properly formatted images will help your website speed while providing your users with a better, more enjoyable website experience.
Great insights on image optimization. Thanks for sharing.
Thank you Shawn! We’re glad you enjoyed the post.