Upload
wynona
View
44
Download
0
Tags:
Embed Size (px)
DESCRIPTION
Images for the Web. Manuel Illescas Elisamaría Jiménez. - PowerPoint PPT Presentation
Citation preview
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