{"id":21317,"date":"2015-10-08T13:32:00","date_gmt":"2015-10-08T13:32:00","guid":{"rendered":"http:\/\/are_you_guilty_of_making_these_mistakes_when_handling_images_on_your_website"},"modified":"2025-09-26T13:19:06","modified_gmt":"2025-09-26T20:19:06","slug":"are_you_guilty_of_making_these_mistakes_when_handling_images_on_your_website","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/are_you_guilty_of_making_these_mistakes_when_handling_images_on_your_website","title":{"rendered":"Are you guilty of making these mistakes when handling images on your website?"},"content":{"rendered":"

Back in 2013, Cloudinary published a blog post entitled \u201cTop 10 Mistakes in Handling Website Images<\/a>\u201d. Though these top 10 mistakes still hold true, we\u2019ve come up with a few additional points that we thought you\u2019d find of interest.<\/p>\n

As the number of images and videos on a website continue to grow, slower load times and thus a negative user experience are both growing concerns for any company. \u00a0An article this summer in The Fiscal Times<\/a><\/strong>, citing Internet data measurement company HTTP Archive, noted that the average website is now 2.1 MB in size, compared to 1.5 MB two years ago. And one of the biggest reasons for this growth is the addition of content such as videos and engaging images designed to drive more traffic to the site. \u00a0<\/p>\n

\"The<\/p>\n

The article illustrated that images account for almost 63 percent<\/strong> of the bytes (1,312 KB of the total 2,087 KB) of the average page by content type. \u00a0Video came in a distant second at 10 percent (208 KB). \u00a0<\/p>\n

The impact of images on a website can be dramatic, eating costly bandwidth and increasing the time website visitors spend waiting for images to load. When every passing second reduces your website\u2019s overall conversion rate and ultimately revenues, it makes perfect sense to want to optimize your images<\/a> and their delivery as much as possible.<\/p>\n

If you\u2019re having problems, it\u2019s possible you\u2019re making one \u2013 or more \u2013 key mistakes with images, which prevent you from improving your website\u2019s performance and user experience. Here\u2019s a look at some of the most common mistakes, and how to avoid them:<\/p>\n

Not using more efficient, modern image formats<\/h2>\n

Even though Google has added support for its WebP image format to Chrome browsers, and Microsoft has done the same for JPEG-XR in most of their Internet Explorer and Edge browsers, developers have still not embraced them. \u00a0Perhaps developers aren\u2019t aware of these formats, or maybe it\u2019s too difficult for them to deliver different image formats to various browsers and devices. As a result, they\u2019re sticking with the same JPG<\/a> and PNG formats, and not taking advantage of how the modern formats can optimize their sites.<\/p>\n

How to fix:<\/strong> Convert images to the WebP<\/a> and JPEG-XL modern formats, while also adjusting compression quality to balance between the formats. \u00a0Also by detecting the specific browser<\/a> that accesses each image and delivering a different version of the image to the respective browser, you can ensure users receive the best images possible, in terms of visual quality and file size optimization.<\/p>\n

\n\"JPG<\/a>\n
16.9KB JPG<\/div>\n<\/div>\n
\n\"WebP<\/a>\n
6.9KB WebP<\/div>\n<\/div>\n
<\/div>\n

Embedding short video clips using the GIF format<\/h2>\n

Most developers rely on the GIF image format to display short video clips on news sites, media sites and social sharing sites. While the GIF<\/a> format is easy to use for embedding video clips using a simple HTML image tag, it is not efficient for captured movies because the files are huge and slow to load, especially on mobile devices, resulting in high bandwidth costs and high CPU utilization.<\/p>\n

How to fix:<\/strong> \u00a0There are several ways to deliver and embed the same clips and animations using modern file formats, such as Animated WebP<\/a> for Chrome browser users. \u00a0Another approach is to apply lossy compression of the GIF File<\/a>, which results in a slight visual quality reduction but significantly decreases the file size. GIF files can also be converted to MP4 or WebM<\/a> video formats, embedding the clips and HTML5 video tags instead of the image tag. In most modern browsers, this works smoothly and the site looks exactly the same but loads much faster. By taking one of these steps, you will be able to reduce the file size dramatically, saving page load time, improving user experience and cutting bandwidth costs.<\/p>\n

\n\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/kitten_fighting.gif\"<\/a>\n
6.3MB GIF<\/div>\n<\/div>\n
\n
311KB MP4<\/div>\n<\/div>\n
<\/div>\n

Delivering 2X (Retina-display) images to all users<\/h2>\n

Modern mobile devices and laptops have high device pixel ratios (DPR). Because site owners and developers want their sites to look great on these devices, they embed double resolution images. While this is a good practice, many developers tend to deliver the same size images to all users. As a result, users with regular displays (e.g., non-Retina displays) must download the hi-res images while their displays only benefit from half the resolution. This results in wasted time waiting for pages to load and increases bandwidth costs unnecessarily. \u00a0<\/p>\n

How to fix:<\/strong> Create different resolutions for each DPR value (e.g., regular images and double resolution images) and automatically detect the DPR value of the web page in the current user\u2019s browser. This will enable you to deliver regular images to users with regular displays and 2x resolution images to users with Retina display devices.<\/p>\n

\"DPR<\/a><\/p>\n

\"DPR<\/a><\/p>\n

<\/div>\n

DPR 1.0 – 100×100 – 4.6KB                  DPR 2.0 – 200×200 – 12.1KB<\/p>\n

And don\u2019t forget the top 10 mistakes highlighted in our previous blog post<\/h2>\n
    \n
  1. \nWasteful browser-side resizing<\/a><\/strong>\n<\/li>\n
  2. \nUnnecessarily high quality JPEGs<\/a><\/strong>\n<\/li>\n
  3. \nIncorrect image file types<\/a><\/strong>\n<\/li>\n
  4. \nDelivering non-optimized images<\/a><\/strong>\n<\/li>\n
  5. \nForgetting to strip image meta-data<\/a><\/strong>\n<\/li>\n
  6. \nDelivering images straight from your servers<\/a><\/strong>\n<\/li>\n
  7. \nDelivering static icons one by one<\/a><\/strong>\n<\/li>\n
  8. \nUsing images when CSS3 can be used<\/a><\/strong>\n<\/li>\n
  9. \nIncorrect image cache settings<\/a><\/strong>\n<\/li>\n
  10. \nUsing a single image size across all delivery mediums <\/a><\/strong>\n<\/li>\n<\/ol>\n

    Want to correct these problems?<\/h2>\n

    Do you find yourself making at least one \u2013 if not more \u2013 of these mistakes, and could benefit by re-evaluating your processes and optimizing the way you handle images? \u00a0<\/p>\n

    Cloudinary can help. \u00a0We\u2019ve got you covered from upload through storage, transformation, optimization and delivery. Sign up for free<\/a> and discover how we can help you avoid these problems.<\/p>\n

    Further Reading on Image Optimization<\/h2>\n