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

http://www.nytimes.com

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

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

blue (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

25

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

GIF Compression

JPEG FORMAT

27

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

JPEG Compression

PNG FORMAT

29

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

PNG Compression

SVG FORMAT

31

SVG – (Scalable Vector Graphics)

SVG was developed by the W3C in 1998.

SVG is an XML markup language for describing two-

dimensional vector graphics.

http://en.wikipedia.org/wiki/Scalable_Vector_Graphic

s

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

39

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.

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