Image Optimization for the Web
This tutorial spells out the steps we took to reduce your website image sizes and optimize them thereby improving the speed of the Todhost website. In the end, we tested our website loading speed with GTMetrix and it loads in around 650ms. So image compression improves your website performance and is highly recommended to improve the experience of your users. Google has stated that speed and good user experience is a ranking factor so improving website speed will ultimately improve your ranking in the Google search.
Also read: Principles of Good Website Designing
Image Optimization for the Web
Optimizing images for a website has become very important to speed up the webpage. Fortunately, there are lots of tools that can further help you reduce the size of your images and help improve the speed of your website. Google has made it clear that speed is a ranking factor and should be taken very seriously.
Google notes that images often account for most of the downloaded bytes on a web page and also often occupy a significant amount of visual space. Google dislikes slow loading websites. Image optimization is therefore very important especially as the speed of a website is now considered to be a ranking index in Google Search Results. In this article, we examine how to optimize images for the web. Before we look at our core objective, let us consider why it is important to optimize the images you use on your website.
Why is website speed important?
Improve Your Load Time: Web images constitute part of the downloaded content when web pages are opened. Even for cached content, images still account for part of the content downloaded. If a website has lots of images, it simply means that more time will be taken to download the page. This is more difficult when the image is not optimized to load faster. So to improve the speed of your website, you need work on your images to make them light for use on a website.
Search Engines Love Optimized Images: When you load an image, you can easily understand the meaning from your visual look. But search engine bots do not. They get to know how to categorize images from the name and alternate texts used in the image description. To get your image to appear in the search engines with the proper name and categorization, you need to optimize them. Again, in doing this, you should be mindful about the filename and like mentioned above, the alternate text also. These are the areas from which search engine bots will be able to understand your image. You will have to avoid the default image name that came after the camera shot the image because that will not be easy for search engines to interpret. You will have to change the name to something readable for the search engines.
Users Love Fast Websites: This is important not only to keep users on your websites but also helps with Google ranking. Google algorithm changes have recently shown that the search engine giant is becoming more interested in user behavior and will reward websites that are more user friendly with higher rankings. One way Google assesses user friendliness is to look at the speed of the website. Presumably, Google knows that users will love websites that are fast more than websites that are slow.
Speed Helps Conversion: Speed Directly Correlates With Conversions: Studies have shown the serious impact that a website speed can have on sales conversions. For example, BrandPerfect reports that, after surveying 2500 online shoppers from the UK and USA, that two-thirds of respondents (67%) from the UK and more than half (51%) from the USA stated that a slow website is the main reason for abandoning a purchase that they were going to make. Similarly, Mozilla found that by reducing their loading time by 2.2 seconds they could increase conversions by over 15% , leading to an additional 10 million downloads over one year.
How to Find Out if Image File Size is the Problem
If your website load speed isn’t good enough and you want to find out if it is as a result of image loading, there are some few checks that can help. You will need to run a website performance test at WebPageTest.
Just enter your website URL for your home page and hit “Test” The results of a performance test will tell you everything you need to know about the content on that webpage, including how fast each individual asset (such as a single image) downloads and renders. Consider also running separate tests for any other highly trafficked webpages, or pages that you know have more images than others
You should be interested in the total number of images on the page and how heavy the images are in aggregate. Each of these image sizes factors into performance. Every image means more tasks for the server and that means more time to load.
What to Do With Image Test Results
Now that you have conducted your test and have seen the results, it will also be a good practice to compare the result with those of other websites that are leading in the industry.
- If your site’s image totals are around the median, you will absolutely benefit from image optimization..
- If your numbers are higher than the median, optimizing images should be a big priority because it means that poor images can actually be slowing down your website considerably.
- If your website has more than 68 images (or more than 1,476,038 bytes), then you actually have images in excess of what you should be running on your website. In this case, you’ve got to take image optimization very seriously.
What Next? Options for Action
Now, you might have decided to act to improve your image and overall website performance. Here are some ways you can go about it:
Take off images: You should be able to decide if it will be a good idea to simply take off/delete the images. But before you do this, ask yourself if it will be good for the user experience. If not, then better take it off.
Resize Your Images. Consider resizing your images. A lot of websites do have problems with huge image sizes and you will need to address this.
Lossless compression: With this form of compression, your images stay the same quality, but get a little smaller in file size. This is good if you find that a little improvement can make a lot of difference. Using Photoshop can be very good for this.
Lossy compression: In this case, you trade off some quality to achieve light images.
Sprites and Data URIs: these trim down the number of individual images on the page by either grouping small images together into a single image (a sprite) or embedding images into an HTML document (via Data URl).
Note: Before you choose any of these methods, do check to ensure that it is the most suitable for your purpose. Also remember that website performance improvement is a continuous exercise and so the experiments can continue to get the best performance.
Quick Guide to Image File Size Reduction
There are some popular tools that will most often be handy for file size reduction. We can examine them below:
This is a great tool for file compression. It will compress most file formats excellently and could reduce your image file size by up to 80 percent without any reduction in quality.
ShortPixel is one of our favourites. The beauty of this tool is that it is free for WordPress and can be used to compress all file formats. It will reduce your image size excellently, by up to 90 percent without any reduction in quality. A great tool you will find very useful for file compression.
JPEGMini helps reduce your image by up to 6 times the original size while not reducing the image quality. JPEGMini is available for Mac OS X and Windows as a desktop app, available as a free (limited) or a paid version.
To use JPEGMini, simply choose or drag folders to the app for it to optimize each image automatically. It also offers a server package, which enables you to lower your storage and bandwidth costs by reducing the load time of image-intensive web-pages.
Shrink O’Matic
Shrink O’Matic is a free application and can resize your images automatically. It is an Adobe AIR application and works by way of batching and resizing images. It handles JPGs, GIFs and PNGs. Just drag and drop images into the app and they will be resized. You can customize the settings and choose the output sizes, rotation, name, location, format and watermark.
Smush.it is a relatively popular tool for optimizing images. It works as an online service from the Yahoo! Developer Network and uses lossless compression techniques, so the file size is reduced without changing the look or visual quality of the image. Give it a try and you will be impressed about the functionality of this tool.
Smush.it supports JPEG, GIF and PNG files with maximum sizes of 1MB. The optimized results are available for download from a temporary URL, which is valid for up to 30 minutes afterwards.
Image Optimizer is a great tool for resizing images for the web and truly will optimize your images. Both the free and paid upgrade versions are good and neither is functionally advantageous over the other except that the paid version will not include a promo text which appears on the free version.
Image Optimizer is very simple to use and allows you to choose your optimization quality, maximum width and maximum height. It also allows you to compress images in bulk and view the progress of the optimization.
CompressNow is also a free image optimization service available online. It will help you upload images from your computer, choose a compression percentage and download the optimized image. It supports GIF, JPG and PNG formats. CompressNow allows you to load up to 10 images and download the optimized format. The maximum individual file size allowed to be uploaded is 3MB.
With Shrink Pictures, you are able to resize pictures, optimize them by choosing the level of compression to apply on your image. Shrink Pictures supports JPG, GIF and PNG. You can select the maximum image dimension, apply special effects, and download the optimized images.
ImageOptim is a free image optimization tool and is great in so many ways. It will find the best parameters for compression and remove unnecessary comments and color profiles, It is used to optimize PNG, JPEG, and GIF formats.
JPEG Optimizer is an easy to use, free online tool that will help resize and compress your photos and images.
JPEG Reducer, as the name goes, will shrink your image the size to make them load faster. To use JPEG Reduces, you will simply upload your image or enter its URL and press “Reduce It.” You can then view the compressed images and thumbnails, and right-click the image to save it.
Mac Image Preview: To improve image quality with this tool, go to Export > slide quality bar down to lower quality before saving
Photoshop: With Photoshop,go to file and choose save image for the web. You can also improve image size by going to Image > Image size > enter lower number of pixels to reduce size
Better WordPress Minify: Add this WordPress plugin to your website’s WordPress CMS
Tips for Saving and Optimizing Your Web Images
Image file formats: The rules and preferences vary but generally, the most widely used are the JPEG, PNG and GIF image file formats.
Read also: A Guide to Mobile Website Designing
Here we provide a basic guide to saving images for the web.
Make sure you have saved a copy of the image as a lossless version, meaning that you can come back and edit it again later if needed. For example, .raw, .tiff, .png, .psd file formats to name a few.
If it is a photograph, then select .jpg file format to save the final image. Remember to test several quality and compression settings until you get the perfect balance between quality and load times. If your image editing tool allows the “progressive” setting, use that as it will allow the image to “blur” or display gradually as it is rendered on the web instead of line by line. The load time is not improved with the progressive setting, however it does give the image a softer look and feel when rendering on screen. If your editing enables “save for the web” then use this as it will make your image a bit lighter.
Read also: A Guide to Website Optimization for Mobile Devices
If your .jpg image is to be used as a background on the web document then use the Medium or Low compression setting. Otherwise for displayed images keep the compression at High.
If you have the option to adjust the image “quality” then use the settings to make the appropriate change; again, remember to strike a balance between acceptable quality and suitable file size.
Read also: Boosting Your Website SEO with Google Analytics
File sizes: Depending on the use of the image follow these guidelines for optimal file size:
For background images try to keep the file size around or below 10KB.
For banners or header images a file size up to 60KB is acceptable.
For high end photographs try to keep them to within 100KB at an absolute maximum.
Generally, you are more likely to work with a PED, PNG and a GIF image, The following suggestions may be helpful in dealing with these image formats:
- JPEG: JPEG images are the smallest in size. JPEGs are compressed, so they lose quality, but it’s best for photographs.
- PNG: PNG images allow the image to have a percentage of transparency, whereas JPEGs do not.
- GIF: GIFs are used for animated images, and also in still images when the colors are more diverse.
Final Words
You will by now have understood the critical role of image optimization on your website performance both in terms of search engine ranking, pleasurable user experience and conversions. These are real benefits that cannot be sacrificed for the time it takes to achieve the optimization of your website images. Image optimization for some websites, like news websites, can be very time consuming but it is definitely worth it.
editor's pick
latest video
news via inbox
Nulla turp dis cursus. Integer liberos euismod pretium faucibua
