Web graphics Introduction
Role of Web Graphics
Role of Web Graphics Although web designers could build a site without graphics, most users would not readily recognize a collection of bare pages as a cohesive site, and such a site would seem unpleasantly odd, well outside of design norms and user expectations. http://webstyleguide.com/
Role of Web Graphics Site-defining identity graphics do not need to be elaborate, but they do need to be consistent across the range of pages in a site for the user to establish a sense that your pages are a discrete region distinct as a place. http://webstyleguide.com/
Role of Web Graphics Our limits are now fewer and our tools are more powerful, but we still have to answer the same questions communicators have always asked: What are the most effective uses of graphics, and what s the best way to integrate words and images into an understandable story for the user? http://webstyleguide.com/
Graphics as content Illustrations: Graphics can show you things, bringing pieces of the world into your document Diagrams: Quantitative graphics and process diagrams can explain concepts visually Quantitative data: Numeric charts can help explain financial, scientific, or other data Analysis and causality: Graphics can help take apart a topic or show what caused it Integration: Graphics can combine words, numbers, and images in a comprehensive explanation
Illustrations: Graphics can show you things, bringing pieces of the world into your document
Diagrams: Quantitative graphics and process diagrams can explain concepts visually
Quantitative data: Numeric charts can help explain financial, scientific, or other data
Analysis and causality: Graphics can help take apart a topic or show what caused it http://www.nytimes.com
Integration: Graphics can combine words, numbers, and images in a comprehensive explanation http://www.nytimes.com
Graphic communication on the Web Trust the reader s intelligence. Don t dumb down your material on the supposition that web users are somehow fundamentally different. Respect the medium. The web has a different profile of strengths and weaknesses. Be bold and substantial. Visual evidence can t become persuasive if no one ever notices it. Just don t ever try to wow an audience with bright graphics to make up for thin content.
Displays
Colour displays Monitors transmit light, displays use the red-greenblue (rgb) additive color model. The RGB color model is an additive color model in which red, green, and blue light are added together in various ways to reproduce a broad array of colors. Majority of computer screens in use today can display16.8 million colours This range of colors helps compensate for the relatively low resolution of the computer screen (72ppi) when compared to print (300ppi)
Screen resolution Refers to the number of pixels a screen can display within a given area. Screen resolution is usually expressed in pixels per linear inch of screen (ppi). Most standard computer displays have resolutions that vary from 72 to 96 pixels per inch (ppi), depending on how the monitor and display card are configured. Images for web pages are always limited by the resolution of the computer screen.
Things to know
Gamma
Graphics and bandwidth Although Internet access speeds have improved greatly in the past years, bandwidth continues to be a consideration for web designs, particularly with regards to graphics and multimedia on mobile web devices. Regardless of connection speed, the more graphics you incorporate, the longer the user will wait to see your page. Not everyone has broadband or current equipment Bandwidth costs the user Bandwidth costs you (as the provider) as well
Graphics and bandwidth and mobiles Mobiles, handhelds etc Do they need the same images as a desktop? Do they need any images? Can the images be re-sized? Can less images be downloaded? Save bandwidth? Increase speed?
Image File Formats
Graphic file formats JPEG - Joint Photographic Experts Group GIF - Graphic Interchange Format PNG - Portable Network Graphic SVG - Scalable Vector Graphics
GIF FORMAT When to use: an image that has broad areas of color, an animated image, or an image with transparency (when using png is not desirable) Algorithm used: LZW Pros and Cons: Limited to 256 colours Reduce file size by using less colours Compression works well with broad areas of color, but not with details Animation (flip-book type, as a layered stack) Transparency 25
GIF Compression
JPEG FORMAT When to use: an image that has a lot of detail (like a photograph). Algorithm used: JPG Pros and Cons: 16.8 million colors Works well with detailed images Lossy, discards unnecessary data as it compresses the image 27
JPEG Compression
PNG FORMAT When to use: When target audience browser support is known, or when transparency is needed Algorithm used: PNG Pros and Cons: GIF replacement Lossless Potentially larger file size Transparency Some cross-browser issues 29
PNG Compression
SVG FORMAT SVG (Scalable Vector Graphics) SVG was developed by the W3C in 1998. SVG is an XML markup language for describing twodimensional vector graphics. http://en.wikipedia.org/wiki/scalable_vector_graphic s 31
Working with Images
"Optimizing is the process of selecting format, resolution, and quality settings to make an image efficient, visually appealing, and useful for web pages. No single collection of settings can maximize efficiency of every kind of image file; optimizing requires human judgment and a good eye. Adobe Photoshop CS6 "Classroom in a Book,"
Image optimisation for the web Correct file format Image size that suits the design File size that ensures speedy download
Image optimisation for the web Crop Delete the outer parts of the image, focus on the main subject photographer may have already done this. Resize Digital images can be large, 1600x1200 and more Compress Once the image is as we want it, you can use compression techniques to reduce the file size Choice of image file format will influence the file size File size vs. file quality
Cropping an image
Resize Actual height still over 53 cm Reduce to fit you design (pixels) Mindful of file size
Compression methods Fireworks Preview, Export. Photoshop Save for web and devices Optimising photos as JPEGs http://www.lynda.com/home/player.aspx?lpk4=69815 Images files sub 20kb (pref. smaller) Balance file size vs. image quality
Top tips Optimise all images for the web Crop (if you can) Resize Compress Save as, keep the original (in original format) You can t regain lost data Image size does it need to be that big? Fair Use, Copyright Issues, Creative Commons If in doubt, always ask the tutor. 39
Guidelines for Coursework
Alt text All images (unless fluff) should have descriptive alt text. Images that have no importance (fluff) should have null alt text (alt= ). Images containing text should replicate the text in the alt attribute when possible.
Image optimisation All images must be optimised for the web. Cropped to remove un-necessary elements. Resized to fit the page design. Optimised (physical file size) to sub-20kb or less. Media Making ACW2 - sub-25kb or less Sometimes there will be a need for exceptions talk to the tutor.
Sources Online book: http://webstyleguide.com/wsg3/11- graphics/index.html Chapter 11 Graphics Compression illustrations http://www.getawebsite.friezedesign.co.uk/images.ht m