Web graphics. Introduction

Transcription

1 Web graphics Introduction

2 Role of Web Graphics

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

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

5

6

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

8

9 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

10 Illustrations: Graphics can show you things, bringing pieces of the world into your document

11 Diagrams: Quantitative graphics and process diagrams can explain concepts visually

12 Quantitative data: Numeric charts can help explain financial, scientific, or other data

13 Analysis and causality: Graphics can help take apart a topic or show what caused it

14 Integration: Graphics can combine words, numbers, and images in a comprehensive explanation

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

16 Displays

17 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)

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

19 Things to know

20 Gamma

21 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

22 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?

23 Image File Formats

24 Graphic file formats JPEG - Joint Photographic Experts Group GIF - Graphic Interchange Format PNG - Portable Network Graphic SVG - Scalable Vector Graphics

25 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

26 GIF Compression

27 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

28 JPEG Compression

29 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

30 PNG Compression

31 SVG FORMAT SVG (Scalable Vector Graphics) SVG was developed by the W3C in SVG is an XML markup language for describing twodimensional vector graphics. s 31

32 Working with Images

33 "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,"

34 Image optimisation for the web Correct file format Image size that suits the design File size that ensures speedy download

35 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

36 Cropping an image

37 Resize Actual height still over 53 cm Reduce to fit you design (pixels) Mindful of file size

38 Compression methods Fireworks Preview, Export. Photoshop Save for web and devices Optimising photos as JPEGs Images files sub 20kb (pref. smaller) Balance file size vs. image quality

39 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

40 Guidelines for Coursework

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

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

43 Sources Online book: graphics/index.html Chapter 11 Graphics Compression illustrations m