What image format should you use on your website?
Image Format
- The CompuServe Graphics Interchange Format (GIF) format (pronounced giff)
- The Joint Photographic Experts Group format, JPG (pronounced jaypeg)
- the Portable Network Graphic file format, PNG (pronounced ping)
Close up of the GIF file format
Lossy file saved as both 20% and 80%
In effect, how the JPG standard worked was to rapidly reduce file sizes by averaging the color values of a pixel with those around it. This caused massive reductions in file sizes allowing photographers to post 500kb images in extremely small (20-100kb) files while controlling the loss of quality. To the right you’ll see an image saved at 20% quality to the left and 80% to the right, both the difference in quality and the method JPG uses to reach the results should be evident.
Before I go on, I want to pause and take note of a statement I made in the above description because I’m sure most people missed it or brushed past without much thought … the JPG file format was introduced to the world in 1992. This phrase is critical because it reinforces how much the world has changed in just 17 years. For those of you who are under 20 years old, you’ll most likely have never known a world without Facebook or YouTube but for the rest of us, we sometimes forget the Internet is for all purposes a fairly recent addition to the world. I’m 35 years old and I remember the first JPG photo that I saw, the introduction of this format changed the way we shared images over computers. Notice that I said it changed the way we shared images over computers? There was no Internet, or at least not what you see today.
In 1996, Unisys became uppity and started threatening to sue over the LZW compression found in the GIF format so the world invented the Portable Network Graphic format (PNG), along the way the format improved upon most of the qualities of the GIF and lost the capacity for animation. The PNG format has 8 bit graphics similar to the GIF but also has 24 bit like the JPG and introduced a new level with 32 bit graphics. While it lacks support for animation, it includes transparant pixels like a GIF. Unlike a GIF, where those pixels can be on or off the PNG allows for alpha transparency making the format extremely flexible and also capable of compressing images. The problem with the PNG format, is that it produces large files.
So which is best? Actually that depends entirely on what you want to accomplish with the graphics. As you’ll see from the image above the file size of the graphic can range from ~25k to ~430k depending on the quality you’d like to achieve. Photographers for example should use the JPG compression most often to ensure their images are strong, crisp and colorful while illustrators and others who work with line art will benefit from the GIF format. In the end, practicing and experimenting are the best ways to determine what you should be using.
A quick thank you to the Old Shoe Woman for posting the a wonderful photo Sunlight Under a Live Oak Tree on Flickr for me to use as part of this tutorial.
Size always matters. Most webmasters are working towards to reduce the load time. Having a larger file size for pictures can be deadly for any website development. So, my suggestion is either gif or jpg at moderate size.
Atniz’s last blog post..How I Gain 21,000 Backlinks In 10 Weeks
Faster broadband speeds should make file size less important – but yes it’s still a good idea to keep file sizes at a minimum. However, transparency is such a useful tool that sometimes we can make exceptions.
For example, on my own website several graphics are PNG because they’re icons that I want to display over a background gradient. Can’t do that in JPG and GIF looked ugly. But I overdid it: one PNG graphic is way too big and I’ll have to replace it with a JPG or compress it till it squeaks.
Jason King’s last blog post..Why don’t more people donate online?
I always use JPG and optimize it with Photoshop “save for web”.
Webkinz’s last blog post..Webkinz Rally and Other New Additions to Webkinz World
IF having good internet speed than image size doesn’t effect much but a site having flash with heavy images and everywhere not possible having fast internet speed, so need to care about several graphics and jpg or png images.
I think GIF is outdated, from my point of view a combination of PNG & jpg are the way to go. I love to use the transparency of PNG in combination with some cool jpg images. Well I usually build graphic intense stuff, never been one of those who create minimalistic designs.
JPG suits me well for the time being.The load time does matter in my work,choosing graphic I try to be in the golden middle.
game-girl’s last blog post..Эмили Браунинг снимется в картине Запрещенный прием
Regarding file size and bandwidth, I have to disagree with the comments a couple of you have made. While it’s true that in the US and Canada we have access to high speed Internet, the rest of the world varies greatly and the web is a truly global media. France for example has Internet 15 times faster than the average “high speed” in North America while Brazil might be half our speed. Much like structuring a document properly is critical for a global village, I think it’s really important to treat graphics with the same respect. c.
i’m too use jpg in my blog ” actually it is important for my theme ” because i must as a custom field in my post and the image should be jpg ” but i agree with Chris about the BW , because for me connection is not that good and most of my visitors comes for non US and CA , ” i think US come sin 3rd stage ” .
Mohammed Shokry’s last blog post..How to Add an Additional Monitor to a Mac Mini
Professional Designer always cares about load and Size because of internet speed and some of don’t have knowledge which snap or image suits batter, but minimal image size always suggested in such situation given Designing tool much helpful.
Always go for the lowest size that provides an adequate quality. Each file type has a purpose, but I find myself needing to use PNG more and GIF less.
Gif format image is best option to be place on your Ads. But Jpg is good to load on your site. BMP is very in terms of quality.
Web designers are always used to putting images on to web pages. But how do they decide as to which format the image must be in?Photographs saved in the GIF format can look pixilated and are thus not to be preferred. The PNG format developed as a replacement for the GIF format to avoid royalty fee. PNG being like GIF is not much suited for photographs.
Accident Injury Claim’s last blog post..About us
Judging from the above, I should go with JPG from now on… thanks.
Phil – Facts About Ants’s last blog post..How to Get Rid of Sugar Ants
actually, I think the best format for photographers, beside RAW, is TIFF. It allows you to preserve layers, alpha channels, layer styles…I use it a lot….
i personally believe the best format is jpg, and generally if you post them in a blog , there is always a tool to fix them and obtain the best resolution that will fit in your topic
el kouahy’s last blog post..Let’s Know About : E-Books
Hi,
I am using PNG format for images in my website. In terms of filesize, PNG format is in between GIF and JPG format but the quality is better.
.-= Joanne´s last blog ..Web Hosting Plan That Comes With Free Google Adwords And More =-.