1 / 16

Manuel Illescas Elisamaría Jiménez

Images for the Web. Manuel Illescas Elisamaría Jiménez.

wynona
Download Presentation

Manuel Illescas Elisamaría Jiménez

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Imagesforthe Web Manuel IllescasElisamaríaJiménez

  2. 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.

  3. The 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: DealingwithImages

  4. 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? Transmittedmessage – this is about the image sending the right message to the website readers.

  5. 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.

  6. Gif (Graphicsinterchangeformat)

  7. 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.

  8. Jpg(Jointphotographicexpertgroup)

  9. 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.

  10. PNG8(portable networkgraphics)

  11. 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. Notforprofessional-qualityprintgraphics.

  12. 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

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

  14. This can be useful: • Todownloadimages: http://www.pocket-lint.com/news/104913-best-free-images-library-websites • Short guide aboutimages in html: http://www.htmlpoint.com/guida/html_09.htm • HTML tester: http://www.csgnetwork.com/htmlcodetest.html • Video explaingthedifferencesbetweenformats of images: http://www.youtube.com/watch?v=qXUHeenLAtM

More Related