The size of the file affects the speed at which your web page will load. So the rule of thumb is always make it as small as possible.
How can I satisfyingly deliver an image with as small a file as possible?
The size of the image in pixels.
Our greatest tool is going to be to adjust the size in pixels of the picture. To save disk space you want to scale it down to the biggest height or width it will be displayed as.
In order to scale an image efficiently you need to know where and how it’s going to be used on a your web page. You want to scale it so that it’s width is the maximum width it can take within the context you intend to use it.
For instance, the content of a post in this blog is 470px. Therefore if I’m going to upload to this site for use in a blog post then the widest it needs to be is 470px, so I will scale it to a width of 470px (the widest it need be to appear here).
This original image (as it came out of the camera) was 2136 pixels wide and the file was 395.6 Kb in size :
By resizing it to 470px wide it now weighs a mere 65.6 Kb. That means there is 6 times less information for your browser to receive before it can display this image correctly. On a slow / medium speed connection this will make a huge difference.
Another thing to bear in mind is that scaling the file to a particular width or height in pixels directly affects the of the resolution of the image which must be neither too high or too low. If it’s too low it will look ugly, if it’s too high then people may be tempted to re-use your images for other purposes, which in some cases can be fine but in others can be a problem.
Jpeg Compression.
Another key to making files smaller is jpeg compression, when you save an image in the jpg format you will generally be prompted for a “quality” parameter (if you are not then you should check your image editor’s preferences for this option). By adjusting it you can reduce the file size pretty dramatically. It is important to find a compromise between quality and size however.
The following image was saved from GIMP with a quality of 50 out of a hundred, as you can see the quality is not as good as the one I showed earlier. Then again it might depend how picky you are about image quality, I think it's ugly, you might think it's fine...
Summary
| Width (pixels) | Jpeg Quality | File Size | Comments |
|---|---|---|---|
| 2136 | 100 | 495.5 Kb | This is way too big a file for use on a web page that needs to load fast. |
| 470 | 100 | 196.6 Kb | This is a bit better but we can get still gain a lot with jpg compression. |
| 470 | 86 | 65.5 Kb | This much better (6 times smaller than the original file) and will look fine : see the first image in this post. |
| 470 | 50 | 45.1 Kb | This is plenty small enough but also pretty ugly. |
I hope you find this useful ! If you have any questions or you feel I have missed something please leave a comment !
Comments (1)
rob:
Oct 09, 2011 at 04:24 AM
Please note I wrote this post when this site still had it's previous layout (the main content area was 470 pixels wide), it is wider than that now (570 I think).
I updated the site template on October 8th 2011 to use brighter colors and make use of higher average screen resolutions.
The same guidelines still apply though.