Search within TutorialsPark

HTML Images Intro


The basics about the image formats,resolutions, colors and all related terms.


Before we use Images and Graphics on our webpage lets learn a bit about them and some Best Practices.

Image Formats.

Bitmaps (.bmp)

1. Bitmaps( .bmp ) format was created by Microsoft Windows, popular on the web due to dominance of Internet Explorer.

2. Supports 16.7 million colors and mostly Uncompressed, hence quite large in size.


JPEG

1. JPEG(Joint Photographers Expert Group) is compression format(not image format) with an extension .jpg or .jpeg

2 .jpg supports 16.7 million colors with relatively small size, used extensively for high color photography,and when compressed some details are lost(lossy compression).

3. So , if your image contains a lot of different colors go for .jpg format, though not recommended for text, schemantic drawings or line arts.


PNG

1. PNG(Portable Network Graphics) is an opensource image format and suitable for all image types on the Web.Though, file sizes are larger than .jpg(since compression is lossless)

2 .png supports 16.7 million colors and 256 transparent colors. Suitable for images that require a small number of colors.

3. Can be compressed to very small size files with low color depth.Eg:PNG-8 format has only 8bit(i.e 256 colors).


GIF

1. GIF( Graphic Interchange format ) is an very popular image format, and when compressed no detail is lost(i.e lossless compression).

2 Downside of .gif is that it supports only 8 bit color palette, i.e only 256 colors per image, hence not suitable for images with many colors.

3.Importantly,.gif supports animation, a single .gif file can contain several frames which can then be played sequentially to create an animation effect.

4.Can be used to display graphs, charts , frames.But, not recommended for graphics representing critical information

GIF image format

Above GIF image has 9 images frames playing sequentially, thus creating an animation effect.


SVG

1.SVG( Scaleable Vector Graphics ) is a Vector graphics format(all the above are Raster) , can be created with markup similar to HTML(infact, XML).

2.Raster or Bitmap images comprises of dots(pixels) while Vector format comprises of shapes, so when scaled raster images loses clarity which Vector images can be scaled by any amount without any loss in Quality.

3. SVG image format can support animations, video, text, because it consists of XML markups,not recommended for detailed photographs.

Raster_vs_SVG

In Above Image, Raster Image when scaled loses clarity while SVG Image doesn't lose any quality.


Parameters to be Considered while selecting an image.

COLOR

1.A given image can be described with at the most 24-bit color(16.7 million color).More the Color, more realistic the image looks.

2. Image formats like GIF and PNG-8 can have only 8-bit color(256 color).Suitable for icons and logos.

3.Photographs containing a lot of color shades should be saved in JPEG or PNG-24.


RESOLUTION

1. Bitmap or Raster Images are made up of a number of tiny squares called pixels . The resoultion of the image is the number of such tiny squares within 1inch * 1 inch square.

2.Higher the resolution of an images,more the crisp it appears when printed or magnified.

3.Images displayed on a regular monitor have a resolution of 86 ppi.Thus, using a image with resolution higher than 86ppi does not improve the image quality


SPEED

1.Images viewed on your browser have to be downloaded.Challenge is to keep the download time as minimum as possible.

2.One way to keep download time minimum is to have images will small file size.Second way is to compress the image.PNG is the best format when compressed.

3.Every image on an HTML webpage requires a seperate HTTP request,so higher the number of images more the HTTP requests, more the load time.





Related Examples

Related Tags