Beginner's Guide to Image Formats for the Web

BEGINNER'S GUIDE TO KINGS OF THE WEB Web image formats ...and a little bit more! Whether you are a newbie web designer, social-media addict, a passionate amateur photographer or a casual Internet surfer, you need to have basic knowledge about proper use of different PNG types of image formats for the web. This guide will show you the 3 most popular image formats: their properties, their usage and their pros and cons. JPG GIF MEET THE KINGS GIF JPG PNG Basic details FILE File extension .gif jpg. jpeg •png pronounced "jif" or "gif" pronounced "jay-peg" pronounced "ping" What does abbreviation mean? Joint Photographic Experts Group Graphics Interchange Format Portable Network Graphics .abc Max. colors 256 16.8 million > 16.8 million supported RGB RGB RGB Color mode Aditive color model Aditive color model Aditive color model Red - Green - Blue Red - Green - Blue Red - Green - Blue Resolution Yes Yes Yes dependent Supported Supported Not supported alpha transparency, can be between O and 100 % Transparency binary transparency, background is 100% transparent or 100% opaque Animation Supported Not supported Not supported Lossless Lossy Lossless Compression method image lose information when created, re-saved or compressed no information is lost in the compression process no information is lost in the compression process Type of format Raster graphic Raster graphic Raster graphic (bitmap) (bitmap) (bitmap) Other: 2 - 256 colors, 2 - 256 colors Quality: 1 - 100% color quality Grayscale and Truecolor Which image file format should You use? GIF JPG PNG CLIP ART & ICONS PHOTOGRAPHIC IMAGES CLIP ART & ICcONS Photographs and graphics with lots of color and gradient blends ! ! LOGOS & BUTTONS LOGOS & BUTTONS ABC ABC CLICK CLICK company соmpaпy ANIMATED CLIP ART PHOTOGRAPHIC IMAGES ! Warning! A photographic image saved as PNG might be larger than a JPEG! Therefore, choose JPEG instead. However, if you want to use multiple levels of transparency use PNG. AS A GENERAL RULE OF THUMB, USE... - Images with text (e.g. annotated diagrams, buttons) ou can stop using GIF and start using PNG instead (except when you need animated image) - Images with simple shapes and crisp edges (e.g. flow charts) GIF - Images with blocks of solid color (e.g. cartoon strips) - Images with small, compact Web animations - Photorealistic imagery (e.g. photographs) - Images with color gradients* (e.g. photographs, buttons) JPG - For photos when you need to keep the file size small * A color gradient is when one color gradually blends smoothly into another color. - For photos when you don't need to keep the file size small - It is best image format for using transparent images PNG (it can handle different levels of transparency - between 0 and 100 percent) - Non-lossy, smaller files with flat/solid colors, simple shapes and crisp edges By replacing GIFS with PNGS you can also speed up your web pages and save bandwidth. What are vector or raster image file formats? There are two kinds of graphics created on a computer: raster images (also called bitmaps) and vector images. Raster (or bitmap) programs represent images as a collection of tiny pixels or little squares of color, the size and quantity of which are determined by the file's resolution. A vector program uses mathematical equations to generate paths, lines, and shapes, which enables the image to be scaled up or down with no loss of resolution. DIFFERENCES VECTOR image VS RASTER image Vector image consists of points, lines and Raster image is composed of a grid of pixels, like a mosaic curves The edges of vector graphics remain smooth at any size or Raster images require higher resolutions to appear smooth. resolution. QUALITY OF IMAGE VECTOR image VS RASTER image WHEN SCALED Object can be scaled without loss of image quality. Quality of image will degrade when scaled. Common image file extensions .EPS, .AI, .SWF and .SVG. JPG, .GIF, .PNG, .BMP, .TIFF Common uses Technical drawings, creative illustrations, animated and interactive web graphics, fonts, drawing tools to make lines, arrows and shapes (Office tools) In designs where photography is required for use on the web Basic differences between web and print graphics WEB PRINT Resolution 72 ppi 300 dpi Color mode RGB СМҮК Unit of measure Pixels Inches FILE File format GIF, JPG and PNG TIFF, EPS, PSD, BMP, AI Smaller file sizes make images display faster on the web. Larger file sizes may produce sharper images in print. FILE File size MB 10 golden rules to remember... Be sure to use the proper file extensions for your image files. When dealing with images for the web, you must be aware of the resolution, usually measured in the number of pixels per inch (ppi). So, create or save your graphics at a resolution of 72 ppi. GIF files must be named with the .gif suffix. JPEG files must have .jpg (or the less common .jpeg) as a suffix. PNG files must end in .png. Browsers look at the suffix PNGS are designed to be a more efficient, flexible, and patent-free replacement for GIFS. By replacing your GIFS with PNGS you can speed up your to determine how to handle various media types, so it is best to stick 3 with the standardized suffixes for image file formats. web pages and save bandwidth. Be aware that once image quality is lost in JPEG compression, you If you want to keep an image that remains editable, choose your software's native file format (PSD for Photoshop, PSP for Paint Shop Pro, PNG for Fireworks etc.). That way you preserve layers, transparency, vector text and shapes, etc. 4 5. can never get it back again. For this reason, you should avoid resaving a JPEG as a JPEG. You lose image quality every time. As a general rule of thumb use: 1) GIF for Images with text, simple shapes and crisp edges, images with blocks of solid color and images with small, compact Web animations 2) JPG for photorealistic imagery and images with color gradients 3) PNG for the same reason you use Computers create the colors you see on a monitor by combining three colors of light: red, green, and blue. 6. This is known as the RGB color model. So, RGB should be used for the Web and any other onscreen presentations, whereas CMYK is used primarily for print. gif and for images with multiple levels of transparency If the images are for the Web or online, use JPEG, PNG, or GIF. If the images are for print, use TIFF. If you want your images to display well on all devices in the i0S family (iPhone and iPad), stick to the PNG format for all your images. The PNG format offers superior quality with smaller file sizes. Vector graphics are made up of lines and curves defined by mathematical objects called vectors. Because the paths (the lines and curves) are defined mathematically, you can move, resize, or change the color of vector objects without losing quality in the graphic. On the other hand, a predetermined number of pixels create raster (bitmap) graphics, so you can't scale (resize) them easily – if you scale them smaller, you throw out pixels; if you scale them larger, you end up with a blocky, jagged picture. 10 What program can You use to view, edit, or create images? Want to learn more? COMMERCIAL IMAGE EDITORS WEB DESIGN GUIDES & TUTORIALS 1) www.smashingmagazine.com Fw Ai 2) www.sitepoint.com ADOBE PHOTOSHOP ADOBE FIREWORKS ADOBE ILLUSTRATOR COREL PHOTO PAINT COREL DRAW 3) www.webdesignerdepot.com 4) webdesign.tutsplus.com 5) psd.tutsplus.com FREE IMAGE EDITORS 6) www.abduzeedo.com splashup pixlr/ _myoat Ophotobucket 7) www.photoshoplady.com SPLASHUP PIXLR MYOATS PHOTO BUCKET SOURCES IMAGE CREDITS http://www.atalasoft.com/ http://developer.android.com/guide http://www.jiscdigitalmedia.ac.uk/ http://www.websiteoptimization.com Web design, Wendy Willard Learning Web Design, 4th Ed., Jennifer Niederst Robbins 1) Sid Mosdell, New Zealand 2) Kenny Teo KINGS OF THE WEB PNG INFOGRAPHIC DESIGN JPG GIF STEDas COPYRIGHT © 2013, DARIO ŠUVELJAK DIZAJN www.visual.ly/users/stedas 8