The 6 key factors to consider when optimizing images for the web are:
- Always start with picture dimensions (w, h) greater than your target size
- Set the image resolution between 72 and 96 pixels/inch
- Crop the image to only keep the area needed to convey your message
- Resize the cropped image to reduce the dimensions to the minimum while maintaining the proportion between width and height
- Choose the appropriate export file format: PNG, JPEG or GIF
- Select the right compression ratio/color range
To put it in simple terms, you need to find the right balance between the quality and file size.
If you must do some corrections such as removing blemished or creating smoother edges, do it on the original image (before resizing it) .
I have seen websites using a 500kb (kilo bytes) picture they shrunk by just setting the desired with and height in the HTML image tag (<img src=”path-to-image” with=”300″ height=”250″ />).
That trick does not reduce the file size of that image and in most case the picture displayed is less sharp than what it should be. You have not only a degradation in the picture quality but a waste of bandwidth and web hosting storage. No wonder that page took so00 long to download.
To give you an idea, a raw picture resized to of 300 x 250 pixels and well optimized should be in the range 5 to 10 kb depending on how rich in colors that image is.
I have also come across web pages where some picture are “bloated” to dimensions greater than the actual width and height. Of course a few pixels adjusted never hurt and are barely noticeable: it solves a presentation issue and saves you some time.
However a change of an image’s dimension (width or height) from 150 pixels to 200 pixels would catch the eye and obviously degraded the visual appeal of that image.
If you follow the 6 key points listed above, you will get a crisp image with a small file size.
[...] a previous post I mentioned choosing the right file format as one of the 6 key factors in optimizing images for the web. I’m now going to give you more pointers to help you decide which file format is the best [...]