Browse DevX
Sign up for e-mail newsletters from DevX


Optimizing the Graphics File : Page 6

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

Select the Best Format

Matching the right format to the right image saves valuable download time and makes the image look better.

There are three formats you might want to consider:

  • GIF
  • JPEG
  • PNG

GIF and JPEG formats are supported by all browsers. Newer browsers (5x and above) also support the PNG file format, which is specifically designed for web use.

Each of these formats compresses graphic data using different methods. Each method works best with a certain type of graphical data: GIF or PNG for line art with blocks of solid color and JPEG for photos or grahics with continuous tones.

Deciding on the type and amount of compression you need is a balancing act. Too much compression negatively impacts image quality, while too little can slow your site to a painful crawl. The goal is to give readers something pleasing to see within the time they are willing to wait.

This chart shows the three formats and their compression features:

Format Compression Ratios Description
GIF 4:1 - 10:1 Lossless for images. Works best for flat color, sharp-edged art. Horizontal bands of color compress better than vertical bands.
JPEG 5:1 - 10:1 High quality - has little or no loss in image quality with continuous tone originals. Worse results for flat color and sharp-edge images.
20:1 - 40:1 Moderate quality - usually the best choice for the Web.
50:1 - 100:1 Poor quality - suitable for thumbnails and previews.
PNG one third smaller than GIFs PNGs behave similarly to GIFs and work best with flat-color, sharp-edged art. PNGs compress both horizontally and vertically, so solid blocks of color generally compress best.

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