{"id":21178,"date":"2020-04-26T10:35:00","date_gmt":"2020-04-26T10:35:00","guid":{"rendered":"http:\/\/top_10_mistakes_in_handling_website_images_and_how_to_solve_them"},"modified":"2026-03-15T13:11:56","modified_gmt":"2026-03-15T20:11:56","slug":"top_10_mistakes_in_handling_website_images_and_how_to_solve_them","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/top_10_mistakes_in_handling_website_images_and_how_to_solve_them","title":{"rendered":"Fixing the Top 10 Mistakes in Handling Website Images"},"content":{"rendered":"
\n
Images take up over 60%<\/strong> of modern websites\u2019 total bandwidth. In the case of cutting-edge, image-rich designs, such as those for social media like Pinterest, that number is, remarkably, over 85%<\/strong>.<\/div>\n
<\/div>\n
Bandwidth is a costly commodity that gobbles up most of the IT budget of high-traffic sites, easily surpassing hosting and storage costs. In addition, because the sheer volume of traffic takes time to consume, your visitors often spend a lot of time waiting for images to load.<\/div>\n
<\/div>\n
Given the astronomical IT outlay, visitor abandonment due to lengthy load times, and the subsequent reduction in conversion rate and revenue, do make it a high priority to optimize your websites images and speed up their delivery.<\/div>\n<\/div>\n
Cloudinary offers a conclusive solution to a large number of image- and video-related issues on both desktop and mobile apps, from upload to storage, transformation, optimization<\/a>, and delivery. You as web developers no longer need to grapple with those challenges.<\/div>\n
The sections below delineate the 10 most common mistakes committed while you\u2019re handling website images along with the related fixes.<\/div>\n

Understanding the Basics of Displaying Images on Web Pages<\/strong><\/h2>\n

Before diving into the common mistakes, it’s essential to understand the foundational aspect of displaying images on web pages. To display an image, you can use the <img> HTML tag. This tag is an empty element, meaning it doesn’t require a closing tag. It primarily requires two attributes: src and alt. The src attribute specifies the URL of the image, while the alt attribute provides alternate text for the image, crucial for accessibility and SEO purposes.<\/p>\n

To integrate an image into a web page, follow these steps:<\/p>\n

    \n
  1. Upload the image file.<\/li>\n
  2. Access the theme folder.<\/li>\n
  3. Add the img src attribute to the image.<\/li>\n
  4. Set the width and height.<\/li>\n
  5. Add an alt attribute.<\/li>\n
  6. Save the changes.<\/li>\n
  7. Optionally, add a link to the image.<\/li>\n<\/ol>\n

    Understanding the basics ensures that you’re not just optimizing images but also implementing them correctly on your website.<\/p>\n

    <\/div>\n
    \n

    1. Wasteful Browser-Side Resizing<\/span><\/h3>\n<\/div>\n
    \n
    The mistake<\/strong>: A common shortcut for resizing images is to do that on the browser instead of the server. The story behind that choice usually goes this way: thumbnails of a certain dimension abound on the site, and a new design calls for them to be of a slightly different dimension. Sometimes accidentally and sometimes intentionally, web developers specify a different CSS width<\/a> and height for the browser, leaving the original images as is.<\/div>\n
    <\/div>\n
    Afterwards, even though the images look the same on modern browsers, the bandwidth has increased, resulting in longer load times of unnecessarily large images and wasted delivery bandwidth<\/a>. The problem is even more pronounced with older browsers, whose resizing algorithms are usually subpar.<\/div>\n
    <\/div>\n
    Examples of such an objectionable scenario are plentiful. Take Yahoo\u2019s front page (below), which downloads all the thumbnails in its MOST POPULAR section at double the number of pixels than that of their actual viewing size.<\/div>\n<\/div>\n
    <\/div>\n
    <\/div>\n
    \"Wasteful<\/div>\n
    <\/div>\n
    The fix:<\/strong><\/span>\u00a0Ensure that the images you deliver are of their required dimensions\u2014even if that entails creating different-sized thumbnails for the same image to fit different pages. Never deliver oversized images and rely on the browser to resize them.<\/div>\n
    <\/div>\n
    The automated way with Cloudinary<\/strong><\/span>: Add w_auto<\/span><\/span>\u00a0to the URL to scale the image to fit the various layout widths and send users the versions that display best on their browsers from the same URL.<\/div>\n
    <\/div>\n

    <\/a><\/p>\n

    2. Unnecessary High-Quality JPEGs<\/h3>\n
    The mistake<\/strong>: JPEGs have truly revolutionized the web\u2019s image arena. For many years, web developers can depict high-resolution images in great detail with the lossy JPEG format, expending only a fraction of the bandwidth required by rival formats.<\/div>\n
    <\/div>\n
    Still, many people refrain from compressing JPEGs even though, for most websites, you can safely reduce the JPEG quality settings a notch (between 5-15 percent, but not much lower) with no discernible loss in visual quality.<\/div>\n
    <\/div>\n
    <\/div>\n
    \u00a0 \u00a0 \u00a0\"95%<\/a>\u00a0 \u00a0 \u00a0\"80%<\/a><\/div>\n
    <\/div>\n
    For all that the above two images look similar, the left one is a 95% JPEG (34 KB)<\/strong>; the right one, 80% (17KB)<\/strong>, requiring only half the bandwidth to download and loading twice as fast. Those gains are well worth the miniscule loss in quality.<\/div>\n
    <\/div>\n
    The fix:<\/strong><\/span> Do experiment with lower JPEG quality levels. In fact, studies have revealed that a 50% JPEG quality yields a reasonable result for certain websites. Even though higher-quality JPEGs always look sharper, that minimal improvement is seldom worth the extra bandwidth and longer loading time.<\/div>\n
    <\/div>\n
    The automated way with Cloudinary<\/strong>: Add to the image URLs the quality parameter (q<\/span><\/span>) set to auto<\/span><\/span> (q_auto<\/span><\/span>). Cloudinary then automates the trade-off between file size and visual quality<\/strong>, on the fly, with perceptual metrics and heuristics, tuning the encoding settings and pinpointing the optimum quality and compression level tailored for the image content and format. The significantly reduced file size that results poses no noticeable degradation to the human eye.<\/div>\n

    <\/a><\/p>\n

    3. Incorrect Image File Types<\/h3>\n
    \n
    The mistake:<\/strong> Nowadays, JPEG<\/strong>, PNG<\/strong>, and GIF<\/strong> are the most popular file formats for images. According to the Web Almanac<\/a>, 60% of the web\u2019s images are JPEGs; PNGs account for 28%. Note, however, that they play different roles and that adopting the wrong format slows down page loads and incurs higher costs for the site.<\/div>\n
    <\/div>\n
    The most common mistake is to deliver photos as PNGs on the erroneous assumption that, invariably, as a lossless format, PNG yields the optimum reproduction for photos. In reality, such website-image optimization<\/a> is unnecessary. A relatively high-quality JPEG whose file size is only a fraction of that of a PNG delivers comparable quality.<\/div>\n<\/div>\n
    <\/div>\n
    <\/div>\n
    \u00a0 \u00a0 \u00a0\"PNG\"<\/a>\u00a0 \u00a0 \u00a0\"JPG\"<\/a><\/div>\n
    <\/div>\n
    The PNG<\/strong> on the left weighs a whopping 110 KB<\/strong>. The JPEG on the right, which looks nearly identical, takes up only 15 KB<\/strong>.<\/div>\n
    <\/div>\n
    The fix:<\/strong><\/span>\u00a0Adopt the correct image formats for the various content types:<\/div>\n
    \n