English 中文(简体)
Is there any downsides to using GIF as format of all images and pictures on website?
原标题:

I noticed when I saved my menu background image from jpg to gif that gif takes almost one fourth of the size that jpg does.

jpg = 25kb gif = 7kb

Is there any downsides to using gif?

Its GIF 256 colors BTW. NOT interlaced. Not transparent.

Just want to be sure!

Thanks

最佳回答

If you re not using it for interlacing and transparency, the only real upside would be the compressed file size.

However, you may want to look into using the PNG format. You can find an overview of the three file types here (Surrey University)

Over the past 5 years, PNG has been phased in to the web image standards, developers and designers always knew it handled compression better, but it wasn t fully supported by all browsers - causing it to be overlooked until said browsers were upgraded.

Nowadays, PNG is pretty much the most commonly used file format for images on modern websites.

问题回答

There are no downsides to this as long as the graphics look good.

For menus and line drawings - in general, any mages with large homogeneous areas, i.e. many adjacent Pixels with the same color -, GIF (or PNG, note musicinmybrain s comment below) is usual the best choice as it compresses stronger, and the results look better (especially because of sharper edges).

For heterogeneous images like photos, GIFalmost always loses in both size, and quality, and JPEG is the better choice.

GIF it s not designed for photographic material, so a big photo comes out better and smaller in JPEG, but tt s probably more than apt for interface elements such as buttons, dividers, borders, etc.

The only caveat that comes to mind are gradients: even on a small area and with 256 colors, GIF will likely show visible banding. This is often very subtle and not a big issue, but you may want to check it, especially if you have lots of gradients and/or hate banding.

I d second what Daniel May is saying about using the PNG format.

Although if you are solely concerned with image size and don t have a specific reason for using GIF remember that you can tweak the quality of a JPG file to turn a 25kb JPG into a 7kb JPG!

As you say the gif can only handle 256 colors, if you don t need more then that gif will be a good choice.

I would recommend gif over png because there are some issues with color profiles in webbrowsers and pngs. You might end up with png colors not matching the css color.

A few people have mentioned the PNG format. Its worth mentioning there are two different types of PNGs, 8-bit and 24-bit. Both types support transparent pixels, however the 24-bit variant supports alpha transparency.

Generally 8-bit PNGS will be slightly smaller than their GIF equivalents. However large 24-bit PNGs have quite large filesizes if they use alpha-transparencies.

It really all comes down to what is the right format for the image. Some will compress/display better in different formats than others. I wouldn’t try and use one single format, such as GIF for all images and pictures on a website (the original question) unless the images were all IU related.

You really need to understand a little about how these different formats work, rather than choosing one over the other. There is a very good article on the pros & cons of gif/jpg/png formats here: http://www.websitetemplatedesign.com/oscommerce_tutorials/printer_136.shtml

As far as I am aware, if the image quality looks acceptable then go for the smallest image format you can find. You might find you save even more size using PNG.

To answer your question: NO. It s perfectly acceptable to use GIF files over JPEGs. Each format has its own pros and cons.

You can read about them here: PNG vs. GIF vs. JPEG vs. SVG - When best to use?





相关问题
Using QCView and iSight to capture image

I have a QCView that loads a Quartz file which gives you iSights feedback (basically like a QTCaptureView) Everything displays fine The button simply takes a snapshot using the following simple ...

Taking picture with QTCaptureView

Is it possible to simply take a picture and save it somewhere using a QTCaptureView and Apple s built-in iSight? I ve seen lots of tutorials on recording video but none on simply taking a picture. Any ...

Transform rectangular image into trapezoid

In .NET how can I transform an image into a trapezoid. The Matrix class supports rotation, shear, etc, but I can t see a trapezoidal transformation. I m using the usual System.Drawing.* API, but I m ...

Rotate image through Y-axis on web page

What are my options for rotating an image on a web page through the Y-axis? I m not sure if I even have the terminology right. Is this called a rotate or a transform. Most of the searches that I ve ...

Text as watermarking in PHP

I want to create text as a watermark for an image. the water mark should have the following properties front: Impact color: white opacity: 31% Font style: regular, bold Bevel and Emboss size: 30 ...

Editing a xaml icons or images

Is it possible to edit a xaml icons or images in the expression design or using other tools? Is it possible to import a xaml images (that e.g you have exported) in the expression designer for editing?...

Convert from 32-BPP to 8-BPP Indexed (C#)

I need to take a full color JPG Image and remap it s colors to a Indexed palette. The palette will consist of specific colors populated from a database. I need to map each color of the image to it s "...

热门标签