I’m processing hundreds of images using an image manipulation library to create thumbnails. Thumbnails take space and need extra code to handle. Suppose you don’t need to crop thumbnails and want to maintain the ratio.
Are there any drawbacks to simply resizing the images in HTML or CSS?
<img src="image.jpg" width="150" />
I wouldn’t have asked the question several years ago but websites nowadays load at super speeds. Is it still not advisable to re-size images in HTML? Resized images appear to load as fast as thumbnails. I know that images re-sized in HTML maintain the original size but who cares as long as the viewer sees thumbnails? No one downloads thumbnails. Why are we not re-sizing images in HTML?
Because images resized by the browser take longer to load, more computing power than necessary to render, and don’t even look the same across browsers because different dithering methods are used. You will overload your server faster, and use a lot more bandwith.
Just take the extra care it takes to make a decent server-side image resizer. Your visitors, especially those with slower connections and bandwidth caps, will really appreciate it.
Also, I would recommend providing the image width and height in the tag even for the thumbnail images. The browser will use that information to layout the page one time, instead of having to recalculate the layout every time another image is retrieved.