scaled images

Serving scaled images

Make sure the image size in your HTML matches the size of the actual image file.

HTML can show images any size you want. If you want to show an image that is small (10 pixels by 10 pixels) at 600 by 600 pixels, you can. It will look bad, but you can do it.

Most people don't do that (because it looks bad). However it is very common that a webmaster will use HTML to size an image smaller.

When HTML displays an image smaller than the actual dimensions of the image file, it is still downloading the bigger image, it is just showing it smaller on the webpage.

The basic logic is that if you are showing a smaller version of that image to your users, then why not make the image file itself smaller too? If you do it will speed up your webpages because the browser won't have to download such a large image.

A common place where this happens is in WordPress blogs. When you are uploading an image wordpress asks you what size to show the image (small, medium, full size). If you want to speed up your pages then always show images at their full size. If the full sized image is to large then make the source image smaller instead of resizing it with HTML.

by Patrick Sexton