Browsers

Web Image Formats Size and Quality Comparison

Photoshop can save files (and open them) in many formats. The four that I will be discussing are the most popular formats on the web: GIF, JPG, PNG-8, PNG-24. These four image types can be grouped together. The first set is GIF and PNG-8, which are the low palette / pixel perfect group. The second set is JPG and PNG-24 and is the high palette / pixel pooling group. Each image format has it’s pro’s and it’s con’s, if they didn’t then we wouldn’t have four very popular formats.

There are two attributes to an image once it has been saved for web use (exported). These two attributes are file size and quality of appearance which should be as low and as high as possible, respectively. (Both GIF and PNG-8 images look exactly the same as they have the same possibilities for their palette. For this reason the two formats will be treated the same in this tutorial. The deciding factor should be file size).

General rule of thumb: Small images where each pixel matters (affiliate buttons, icons, some avatars) should be in the GIF/PNG-8 format. Larger images with multiple colors (photographs) should be in JPG format. If you want the best of both worlds and your image is formatted in a way that size is minimal, go with a PNG-24 format (this works best with my tutorial screenshots).

Amanda (my ex-girlfriend) will be the guinea pig for this tutorial. This is a vector that I did of her in a bathing suit (I figured if I put up the vector and not the real pic she would punish me less severely if she finds out :p).

GIF with a palette of 8 => 18KB

One of the worst things you can do with a gif is give it a gradient (sunset).

Gif 8 Colors

Gif 8 Colors

GIF with a palette of 16 => 24KB

More colors, gradients still look bad.

Gif 16 Colors

Gif 16 Colors

Gif with a palette of 256 => 70KB

The colors are almost correct but the filesize is huge.

Gif 256 Colors

Gif 256 Colors

PNG-8 with a palette of 16 => 23KB

Looks just like GIf@16 colors, same filesize.

PNG-8 16 Colors

PNG-8 16 Colors

PNG-8 with a palette of 256 => 63KB

Looks just like GIF@256 colors, smaller filesize.

PNG-8 256 Colors

PNG-8 256 Colors

JPG with a quality of 1% => 7KB

Looks like a cheap webcam, however definitely the smallest.

Jpeg 1% Compression

Jpeg 1% Compression

JPG with a quality of 50% => 20KB

Average quality, good compression level for the web.

Jpeg 50% Compression

Jpeg 50% Compression

JPG with a quality of 100% => 101KB

Great quality, however the filesize is huge.

Jpeg 100% Compression

Jpeg 100% Compression

PNG-24 => 173KB

Best quality so for, highest file size so far.

PNG 24 bit

PNG 24 bit

BMP with 24 bits per pixel => 388KB

This is just a joke, really. BMP’s use no compression whatsoever.

Bitmap 24 bit

Conclusion

These results will vary with different image types. This image has a combination of both simple areas (foreground) and complex areas (background). Using actual photo’s would yield much worse results for palette based filetypes and even better results for JPG. Using a simple geometric image would have best results for palette based and show artifacts on the JPG’s. No matter what image we use, if the dimensions were the same, the BMP would keep the same filesize.

Our two goals when dealing with compression and web graphics is to 1) have the image look attractive and 2) have the image be as small as possible. If you need animations in your image, you’ll need to use a GIF, however if you’d like to do something like transition between images and have good quality, consider using a javascript or flash based slideshow using JPEG’s. If you are using a photograph, always use the JPEG formats (I stick with 85% compression). When dealing with non photo-realistic / smaller images/icons, always use GIF or PNG’s.

CSS Box Model differences in Firefox and Internet Explorer

Problem:

Here is the bane of web developers existence, Internet Explorer incorrectly displaying the CSS box model. What is the box model? This describes all elements used in HTML documents. Every element is in the shape of a rectangle (and you wonder why developers cringe when circles are a part of layouts?) A box has several attributes to it, such as width, height, padding, margin, and border.

Margin is the space outside of the box, padding is the space inside the box to come in contact with elements inside of it, width is the width of the box, height is the height of the box, and border is a line that is on the outside of the box between the margin and the padding. It seems like a simple concept doesn’t it?

Except, there is one small problem. Firefox and other standards complient browsers will add the size of the padding to the width or height of the box, while Internet Explorer will simply place the padding inside of the box without adjusting the width or height. Personally I like the way IE does it more, however this goes against the rules put in place by the W3C.

Below, in both the Firefox and Internet Explorer categories, I’ve first displayed how the browser interprets the box model, then display a screenshot in the browser. The lines are separated by 5 pixels, and each large line represents 25 pixels. Here is the code used to render each image:

<style>
* {
 font-family: verdana;
 font-size: 12px;
}
</style>
<div style="border: 1px solid black;">
 <div style="margin: 10px; border: 2px solid red;
padding: 10px;background-color: orange; float: left;
width: 100px;"><div style="background-color: lime;">&nbsp;</div></div>
 <div style="margin: 10px; border: 2px solid red;
padding: 10px; background-color: orange; float: left;
width: 100px;"><div style="background-color: lime;">&nbsp;</div></div>
 <div style="margin: 10px; border: 2px solid red;
padding: 10px; background-color: orange; float: left;
width: 100px;"><div style="background-color: lime;">&nbsp;</div></div>
 <div style="clear: both;"></div>
</div>

Firefox:

border                                  border
   |<- padding -|   content   |- padding ->|
                |<-- width -->|
Firefox Box Model

Firefox Box Model

Internet Explorer:

border                                  border
   |<--------------- width --------------->|
   |- padding ->    content    <- padding -|
Internet Explorer Box Model

Internet Explorer Box Model

What this means is that in FF, if you create a box that is 400px wide, and has a padding of 10px and a margin of 10px, it will actually end up being 440px wide total. In IE, if you create the same box, it will be 420px wide total. This is a very annoying problem because this is the most simple building block to creating any CSS/XHTML based website layout, and the two competing browsers treat these items differently.

Solution:

The solution for this problem is a simple (albeit hacky) fix. Place one element inside of the other, where your outside (container) element does not have any padding but has a width defined, and the inside element does have padding defined. The reason this is considered a hack is because we have to add twice the markup to our webpages to get the same effect rendered correctly in both browsers.

 Scroll to top