1

I noticed on Bing that one of their images in their results has a file size of 10kb.

However, if you visit the image's URL in your web browser and save it, it is 1,000kb.

How do you reduce the image's file size and make it as small as possible when the image is loaded on the web page in an img tag? I want to make image file sizes as small as possible to improve my site's performance.

// Img element is 10kb when inspected with developer tools

<img height="280" width="472" data-src-hq="/th?id=ALSTUF4FE90D7416F684217D5CB5981876233154A9C88E70202C1C997332FF2185EEA&amp;w=472&amp;h=280&amp;rs=2&amp;o=6&amp;oif=webp&amp;pid=SANGAM" role="presentation" data-priority="2" id="embD38817586" class="rms_img" src="/th?id=ALSTUF4FE90D7416F684217D5CB5981876233154A9C88E70202C1C997332FF2185EEA&amp;w=472&amp;h=280&amp;rs=2&amp;o=6&amp;oif=webp&amp;pid=SANGAM" data-bm="101">


// Original file is 1000kb when saved to the computer

https://bing.com/th?id=ALSTUF4FE90D7416F684217D5CB5981876233154A9C88E70202C1C997332FF2185EEA&amp;w=472&amp;h=280&amp;rs=2&amp;o=6&amp;oif=webp&amp;pid=SANGAM

1 Answers1

1

You can make a thumbnail from the original image, so it will be loaded a smaller version and then link the full version for download.

There are many ways to achieve this, you can create it from scratch, use a library, a plugin, etc.

If what you want is just to reduce the file size, not create a thumbnail image, I recommend to use tinypng for easy and fast image size reduction.

Leonardo Crestani
  • 41
  • 1
  • 7
  • Interesting. Is it possible to generate a thumbnail automatically from the larger image when it is formatted into the img tag? Or do I have to upload a thumbnail to the server first then use the thumbnail src and not the original image? –  Jun 23 '21 at 19:39
  • You will probably need to use the thumbnail src, there are many tools that auto generate the thumbnail for you when the image is uploaded, on php for example, you can use Imagick extension to manipulate the image on server side, and then dinamicaly feed the img src. See: https://stackoverflow.com/questions/11376315/creating-a-thumbnail-from-an-uploaded-image – Leonardo Crestani Jun 23 '21 at 19:50