Browse DevX
Sign up for e-mail newsletters from DevX


Optimizing the Graphics File : Page 7

Finding the right graphic is just the first step in putting graphics into your Web site. Once you've created or found the graphic, you need to prepare it for online use, structuring it to display quickly at the maximum quality. Optimizing the File shows you how to make the balance between file size and quality level.




Building the Right Environment to Support AI, Machine Learning and Deep Learning

Format Guidelines

Here are some guidelines for selecting the best graphic format for your file.

  • Large areas of solid color?

    Go with GIF. Images created with vector-based drawing programs and typograhic images are usually good candidates for GIF format. Any image that would be a good choice for a GIF format will also work well as a PNG format.

    GIF with Web palette: GIF with adaptive palette: JPEG with 80% compression:

    File size = 6.6K

    File size = 6.7K

    File size = 6.0K

    Note: A solid color image is an obvious choice for GIF file format. However a solid color image that has been created with non-Web colors will show unpleasant dithering if it is converted to the web palette. The JPEG file format makes this solid image look blotchy.

  • Photos?

    JPEG's the snap choice. Images that have been scanned, or created in a bitmap drawing or painting program will typically work well as a JPEG. If the photo-realistic image is monochromatic, it may also work well as a GIF with an adaptive palette.

    GIF with Web palette GIF with adaptive palette JPEG with 80% compression

    File size = 11.9K

    File size = 14.5K

    File size = 7.0K

    File size = 10.8K

    File size = 9.8K

    File size = 6.1K

    Note: A photographic image is an obvious choice for JPEG file format. In the first image, the adaptive palette GIF is an acceptable alternative if it is necessary to use a GIF. However the file size is significantly greater than a JPEG. In the second image, the adaptive palett GIF shows more dithering due to the strong colors and smooth blending in the photograph. In all cases, the Web palette GIF is always going to cause extreme dithering of a photograph.

  • A little of both?

    If the image is a combination of blocks of color and continuous tones, experiment with both alternatives and see which gives you the best solution in balancing files size and quality.

    Actually go ahead and save the image as a GIF and also as a JPEG and comprare the results. If possible, look at the image quality on different computers, under different browsers. Look at the file size. Often a format and file size tradeoff is clear.

    GIF with Web palette GIF with adaptive palette JPEG with 80% compression

    File size = 10.7K

    File size = 13.1K

    File size = 5.2K

    Note: A monochromatic image looks equally good as a GIF with adaptive palette or JPEG. JPEG compression is very effective on monochromatic photo-realistic images. The Web palette GIF is always going to cause extreme dithering of a monochromatic image because it does not contain enough tones of any color to produce a smooth blend.

  • All readers are using the newest broswers?

    You might want to consider PNG format. Older broswers might not be able to display this format, but if you are working in an environment of 5.0+ browsers, you can get both good quality and smaller file sizes.

      acorn.gif acorn.png
      This GIF image uses a palette of 155 colors. The file size is 5,125 bytes. This PNG image uses an identical palette. Its file size is 4,253 bytes.

Comment and Contribute






(Maximum characters: 1200). You have 1200 characters left.



Thanks for your registration, follow us on our social networks to keep up-to-date