introductioncomputing.dcu.ie/~dfitzpat/content/ca106/images.pdfan image that has broad areas of...
TRANSCRIPT
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