Images on the web can be created in a number of different formats (file types), and choosing the correct format can help to optimize your web page. An optimized webpage can decrease your page load time, which is a benefit to your users and helps your Search Engine Ranking.
The main image formats used on the web are:
- Animated GIF
- (Static) GIF
- 8-bit PNG
- 24-bit PNG
- JPEG or JPG
The choice of image format for the web can be a tricky topic, but here are a few general guidelines that may help:
- Does the image need animation?
The only choice here is to use an Animated GIF, but you will be limited to 256 colors in the file, and will usually have large file sizes. - Does the image need to have any transparent sections? (eg, they need to be overlaid on top of something else)
You have the choice of a GIF file, 8-bit PNG, or 24-bit PNG file.
A GIF file will be limited to 255 colors, and one transparent color. As there is only one transparent color, you may get ‘jagged’ edges around the image.
An 8-bit PNG file will also be similar to a GIF file, and depending on which software you use, will also have ‘jagged’ edges.
A 24-bit PNG file will let you have alpha transparency, which means that you won’t get ‘jagged’ edges, however the file size will usually be larger. - Is the image something that uses large blocks of a single color? (typically a computer generated image of a heading, logo or some text)
Depending on the number of colors in the image, you have the choice of a GIF file, 8-bit PNG, or 24-bit PNG file.
A GIF file is limited to 256 colors.
An 8-bit PNG file is also limited to 256 colors, but is usually a smaller file size than a GIF.
A 24-bit PNG file can have up to 16 million colors, and is really for blocks of color, however the file size may be larger than the other two options. - Is the image a photo?
You have the choice of a JPEG/JPG or a 24-bit PNG.
A JPEG/JPG is usually the best format for photos on the web, but it should be noted that JPEG/JPG files are ‘lossy’ (see below).
A 24-bit PNG can be used for photos, however the file size will typically be larger than a JPEG/JPG file.
‘Lossy’ vs ‘non-lossy’
When you save an image as a JPEG/JPG, you should get a choice of what quality to save it as. These may be a value from 1-10 or 1-12 or 1-100.
When you save the file at 100%, as much detail is retained as possible. Some degradation is still applied, however it is virtually indistinguishable. Because so much detail is being saved, the file size will be large.
As you reduce the quality, some information is removed. This is why it is called ‘lossy’. The file size will be reduced, but the amount of detail will also be reduced.
With a photo, this reduction works quite well because the reduction isn’t very noticeable until you lower the quality a lot. The reduced quality is usually only visible on high contrast areas, especially diagonal lines where one half is black and the other is white. This will result in a somewhat ‘blocky’ look. Again, this is barely noticeable with photos, but where you have an image with hard lines, such as a heading, logo, or computer generated text, this becomes apparent.
When saving as a JPEG/JPG try saving at different quality settings and preview the results. If you use Adobe Photoshop, it also has a Save to Web feature that lets you preview the results before actually saving the file. Also, because JPEGs/JPGs are lossy, the more times you save the same file, the more details are removed, resulting in a degraded image over time.
24-bit PNG files are ‘non-lossy’, and therefore retain the full amount of detail. However, as mentioned above, their file size is generally a lot larger than the equivalent JPEG/JPG file.
The above guidelines are a good starting point, however there are always exceptions to the rule.
For further information on this topic, read the following article: http://www.yuiblog.com/blog/2008/11/04/imageopt-2/, or try searching the internet for 'web image formats' (http://bit.ly/1j8UANf).
Comments
0 comments
Please sign in to leave a comment.