Support : Guides
JPEG Image File Sizes
Image file formats significantly impact performance of a website. The two most commonly used image file formats on the web are GIF and JPEG.
GIF
GIF images should be for icon type images using few colors; from 1 to 215 colors chosen web safe color palette. The web safe color palette contains a subset of the 256 color palette. The 215 color subset are those colors that display consistently on all computer platforms. The colors missing from the web safe palette are those colors that "dither" to different shades and tints depending on the computer platform. Although most users now have high resolution monitors many web applications still only support 256 colors. Not using the web safe palette will result in inconsistent displays across different platforms.
GIF image file format also supports animated images. An animated GIF image stores a series of image frames and display attributes to control frame display timing, repeat attributes supporting looping and how to dispose of a each frame following display supporting layering and transparency. Animated GIF images use the client PC's processor so limiting their use helps to assure performance on RAM and processor speed restricted systems.
JPEG
For high resolution images, JPEG is typically used allowing use of the million color palette, plus utilizing image file compression for reduction of file size. Keep in mind that the decompression process is performed within the web browser's memory space, so this can have an impact on web page performance in addition to download time.
Recommendations
Most currently released graphic software applications support web graphic image optimization. It's recommended that you test your website images both as GIF's and JPEG's to determine which format for the particular image provides the smallest file size while retaining the best resolution.
The standard display resolution for graphics is 72 DPI. So, unless the image is intended for high resolution printing, stick with 72 DPI for web graphic components.
The chart below illustrates an example of resolution versus file size. The sizes shown are approximate based on a sample image using millions of color image without color reduction. Color reduction will produce smaller file sizes without necessarily impacting resolution.
| Compression | ||||
|---|---|---|---|---|
|
Resolution |
File |
0% |
25% |
50% |
|
300 |
780.8K |
546K |
312K |
|
|
200 |
468K |
273K |
156K |
|
|
150 |
293K |
176K |
117K |
|
|
72* |
98K |
78K |
59K |
|
*72 DPI is the standard resolution for most commonly used web browser computer platform display monitors. This DPI resolution is recommended for all website graphic components with the exception of images made available for downloading and printing. When using graphics at resolution higher than 72 DPI, be sure to constrain their display via the HTML IMG tag width and height parameters; otherwise, browsers will expand display relative to the 72 DPI standard display resulting in page skewing.
NOTE: Actual FIle Sizes stated above will vary by platform depending upon the a storage device's logical blocking factor (sizes shown above are physical data sizes as opposed to logical sizes).
TIP: Use smallest file size while retaining clarity of image, ensuring optimum server performance of your web pages. Often when an image does not require more than 256 colors a GIF image can be used as opposed to JPEG to produce a significantly smaller file size. Create one of both types, then compare physical sizes and clarity to determine which format will provide the desire effect.