- August 27, 2020
- 4 minute read
There's a constant struggle throughout your product website optimization process between the desire to remain visually attractive and competitive in web product design, and the need to have your page load optimized for user download. Faster websites result in better user experience, better search rankings and each millisecond of improvement results in increase of your conversion rate. Properly formatted and compressed images can be the same high quality for users as they do to this day remain critical for positive buying experience, and still help you avoid performance problems.
According to recent stats from HTTP archive (see below), images still do take up most of the page space, if we divide bytes by content type and compare them to other content types such as scripts, stylesheets, HTML… Also, the expected size of an average webpage is expected to exceed 2300 KB by the end of the 2014, which is a 44% growth compared to 2013. Images take up 60% of an average storefront page, JPEGs take longer to respond than other content types (except flash) and they are still making a majority of requests for image type, followed by PNGs and GIFs.
Image 1 - Stats from HTTP archive
Average Bytes per Page by Content Type
Image 2 - Stats from HTTP archive
Average Individual Response Time
Image 3 - Stats from HTTP archive
Image Requests by Format
Image 4 - Stats from HTTP archive
Highest Correlation to Load Time
According to graphs presented above, the courtesy of HTTP archive, we conclude:
Nearly all the performance optimization rules apply, as always you should minify code and never forget to optimize images before uploading them, with proper formatting and compressing.
Improperly optimized images can take up more space than they need to. Typical image file is stored with a lot of extraneous information that has nothing to do with the display of the image itself, that is only useful for designers an completely extraneous for your customers. For users on slow connections, it is especially important to keep image sizes to a minimum.
Basic optimization includes cropping unnecessary space, reducing color depth to the lowest acceptable level, removing image comments, and saving the image to an appropriate format. This can be done with almost any image editing program. Advanced optimization involves further (lossless) compression of JPEG and PNG files. On WordPress, you can use WP Smush.it tool to optimize JPEGs, PNGs and GIFs. Drupal has Imagecach Smush.it tool that does the same. For other blog services, you can use Yahoo Smush.it tool to optimize your images manually before uploading them. The tool will not only strip meta data from JPEGs, and optimize JPEG compressions, but convert certain GIFs to indexed PNGs and strip any unused color from indexed images. You can also use PicMonkey, Pixlr, FotoFlexer or GIMP...
Image 5 - Example of JPG images in different quality and byte size
Also, basic rules for image formatting apply:
Once you have reduced the file sizes of your images, you need to strategize your image dimensions and product angles, especially if you are using extra images to display different shots of a single product. You should also, where possible, make available a smaller image that can be viewed in a larger pop up scale. Do not put the largest image on your landing page. You should also use thumbnails and image site maps, but not without being careful. Your thumbnail sizes should be as small as possible, and on image maps it is important that you add tags to specific images.
Read more at: