Manuel IllescasElisamaría Jiménez

Images for the Web

An optimal image for the web depends upon the image type and the file format. Use JPEG for Photographs because they

usually have many colors and great detail. An image with fewer colors, such as a

button, icon, or screenshot, is better suited to the PNG format.

Dealing with ImagesThe key in using images on webs is

based on a few basic ideas:

Image fundamentals - size, composition, quality and exposure are four important things to look for in a good image. People actually look for quality in images, even the contrast makes a huge difference

Effectiveness – if the picture creates excitement or interest, then it works. It is down to three characteristics:

Emotional appeal – does the product in the picture look good and make the user want it?

Rational appeal – does the image show the benefits of the product?

and Brand appeal – does the picture fit your brand?

Transmitted message – this is about the image sending the right message to the website readers.

Tips when creating a web page:Choose the right image type for the job.

There are currently quite a few image formats that are used within web design: PNG8, PNG24, PNG32, JPG and GIF.

Gif (Graphics interchange format)

Pros: Their transparencies work on all browsers, the smallest size completely blank image, very easy to reduce the color depth to make smaller a file size and offers an animated format.

Cons: Images often loose quality when in GIF format as the image creation package has to workout the closest color match. Not very good for photo’s.

Jpg (Joint photographic expert

group)

Where to use: Perfect for photos or images where no transparency is needed, such as background gradients.

Pros: Excellent for photos, 24-bit color giving 16 million colors.

Cons: JPGs are much larger when creating files with few colors in it, they have lots of extra info included in the file. No animation support.

PNG8(portable network graphics)

Limitations: Like GIF only has a maximum of 256 colors. The PNG-8 format uses 8-bit color.

Pros: Similar file size to GIF but with a sharper output.

Cons: Not very good for creating photo quality output. No animation support. Not for professional-quality print graphics.

Use JPG for photos and elements without

transparencies, use GIF for IE6 transparencies, use PNG8 for all other browsers with low

color depth images and transparencies and use PNG32

for the best quality and transparencies.

Tips

Many designers and design studios use Photoshop and Illustrator to create their images, whether that be logos, gradients, icons or whatever.

This can be useful:

To download images: http://www.pocket-lint.com/news/104913-best-free-images-library-websites

Short guide about images in html: http://www.htmlpoint.com/guida/html_09.htm

HTML tester: http://www.csgnetwork.com/htmlcodetest.html

Video explaing the differences between formats of images: http://www.youtube.com/watch?v=qXUHeenLAtM