Websites have become incredibly heavy, with the average size of a webpage now weighing in at over 2MB! This is double the size that websites were just five years ago and around 150 times larger than sites were 20 years ago when the average page was only 14.1k! What has caused this dramatic increase? There are several factors, including scripts, CSS files, fonts, advertising, and social widgets, but the #1 contributor to heavy web pages is images.
Images account for nearly 62% of a page’s overall size. Current design trends that favor gigantic, screen spanning images help fuel this situation since images that are large in physical size are generally large in file size as well. This problem is compounded when images are used on sites without first being optimized for web delivery.
If you want to make your site user-friendly and work well for all visitors on all devices when you do your own SEO, that site must load quickly. Since images likely account for more than half of your page’s size, the best place to start optimizing a site for better performance is by starting with that site’s images.
5 Ways to Optimize Images for Your Website:
1. Use the Correct Size
The first thing to be mindful of when it comes to image optimization for websites is to make sure that you are using the correct size for any images you add to that site. Taking a photo directly from a digital camera or downloading it from a stock image site without resizing that image accordingly is a common cause of too-large images.
This scenario often happens once a company takes over a website from the web team who created it. Using their CMS to add new content/pages to that site often includes images that are inappropriately sized. The site’s CSS may constrain the display size of those images so that the site’s layout does not break, but the image itself is much larger than it needs to be.
For instance, if the largest size an image will be displayed on the site is 1000 pixels wide, then the image itself should not be larger than that. If you instead use a 4000-pixel wide image taken from your high-quality digital camera, then even if the site squeezes the display of the image down, it will still be downloading a 4000-pixel wide image which will absolutely destroy that site’s performance.
Before adding any images to a website, make sure you understand the optimal size for these images (this should be part of your training in managing your site), and be sure to resize your file as needed. You can use a tool like Adobe Photoshop for this or, if you do not have a license for that software, a free online alternative like Pixlr or TinyPNG will also do the trick.
See Also: What Are the Most Accurate Reverse Image Search Engines?
2. Use the Correct Image Format
In addition to the right image size, you should also be sure to use the correct image format. Because different image formats are ideal in different situations, using the right format can help keep file sizes manageable.
For instance, if your image is an illustrated element, like a logo or an icon, using an SVG file can significantly reduce that image’s file size while allowing for total flexibility in terms of how large that image is displayed.
This is because SVG files are vector graphics, so they are small-sized images that can be sized larger without any quality loss—speaking of image quality. An image size might increase during photo editing, which is why you may need to use file converters to optimize it.
Also Read: How Do I Add or Use Featured Image in WordPress?
3. Consider Image Quality
The quality that you save an image at matters significantly when it comes to that image’s file size. There is a temptation to save all images with the highest quality possible so that they look really great when used on a webpage, but this course of action would leave you with unwieldy large image sizes. Instead, you need to find a balance between good quality and reasonable file size.
The way that you compare quality settings for your images will depend on which software you use. In my own work, I use Adobe Photoshop and its “Save for Web” functionality. This allows me to compare my images with different settings to find that perfect balance. Often, you will find that an image with a quality setting of “5” looks just as good as when you set that quality to “10”, but the reduction in file size is dramatic! Saving the image as a “10” would have no actual benefit to your site or its appearance, but saving it as a “5” absolutely helps that site load quicker!
One thing that I do consider when selecting image quality is how the image itself will be used on the site. If it is a background or a smaller teaser-style image, I will often go with a lower quality setting to save as much size as I can. If the image is a large hero shot featured on the homepage, however, I may opt for a slightly higher setting since the image will be a focal point of the page, and I want that image to really impact.
You May Like: Ways to Create Vector Graphics and Illustrations
4. Further, Optimize Images
Finding an optimal quality setting is important, but once you have found those settings and saved your images, there is still further optimization that you can do by losslessly compressing all of your files.
Images have metadata included in their files. This data does not affect the display of the image itself, so including it in the files serve no purpose for your site. You can remove this data (and not change image quality) by using a tool like ImageOptim (for Macs) or FileOptimizer (for Windows). By running your images through these tools, you can shave off some significant file size.
Larger images will only be reduced slightly (10% or so), but smaller images can see dramatic file reductions. When I ran this on a website recently, I saw some images reduced to 12% of their original size, and the homepage of the site alone was cut in size by 1/3 just by losslessly compressing its images.
5. Consider Responsive Image Techniques
Making sure the images you use on your websites are optimized is important, but there are still challenges, especially when you consider responsive websites. Even though images on those sites can resize for different screen sizes, the largest size is often needed to ensure that the quality of the image is maintained for the largest screens.
This means that a small screen device will download an image much larger than it actually needs, taking a performance hit in the process. This challenge is being met with new responsive image techniques.
Some of the techniques that web professionals are now using on responsive sites include new HTML elements and attributes like the <picture> element or the “srcset” and “sizes” attributes. These all allow you more control over images and which sizes get delivered to which screens.
Other possible solutions for better responsive images are Javascript-based, like the Adaptive Images solution created by Matt Wilcox. This solution has some requirements (Apache, PHP, Javascript), but it is definitely something you can consider adding to your toolbox of ways to optimize the delivery of images to websites.
See Also:
Conclusion
Once you have your images optimized and uploaded to your site, be sure to test that site’s performance. You may find other opportunities for performance enhancements that will allow you to make your site even faster!
