Skip to content

Image resizing is worth the effort

Webpartner follows best practice guidelines: we require site editors to resize pictures before uploading them to the CMS File Manager, ready for using on web pages. Our CMS does not allow the resizing of images within the HTML code.

But isn't it quicker to let the browser resize it?

Let's suppose that you have taken a picture of a cat with a digital camera. The photo dimensions are 1024x682 pixels and the file size is 1MB. You want to use it on a web page, but you're busy and don't have time to resize the photo using a graphics editor. The image only needs to be 500px wide, so you upload it to your site, and post it on your web page. Then in the image tag you write:

<img src="" width="500" height="333" alt="" />

With this method, the web browser will load your original photo and then reprocess it to display as a 500px wide image to the viewer. Job done, time to move on...

So what's the problem?

  • The original, full-sized photo is loaded anyway, regardless of what size you have specified it to display at on your web page. In other words, the whole 1MB image is downloaded before the browser resizes it. You may have gained time by not resizing the image yourself, but you penalise your site visitors by making them wait for the image to load and display.
  • The resulting image will look more blurry than if you had resized it in a graphics editor prior to adding to your web page. Web browsers are not graphics editors - while they can resize images they will not make any adjustments to ensure that the resulting picture looks sharp.

As is so often the case, the more effort you put in the greater the reward. If you don't have access to graphics editing software such as Photoshop etc etc, there are online tools that you can use, as covered in our article: Editing images for your website.