Introductioncomputing.dcu.ie/~dfitzpat/content/CA106/images.pdfan image that has broad areas of...
Transcript of Introductioncomputing.dcu.ie/~dfitzpat/content/CA106/images.pdfan image that has broad areas of...
![Page 1: Introductioncomputing.dcu.ie/~dfitzpat/content/CA106/images.pdfan image that has broad areas of color, an animated image, or an image with transparency (when using png is not desirable)](https://reader036.fdocuments.in/reader036/viewer/2022081407/604f1f38ece62d18515f7c73/html5/thumbnails/1.jpg)
Web graphics
Introduction
![Page 2: Introductioncomputing.dcu.ie/~dfitzpat/content/CA106/images.pdfan image that has broad areas of color, an animated image, or an image with transparency (when using png is not desirable)](https://reader036.fdocuments.in/reader036/viewer/2022081407/604f1f38ece62d18515f7c73/html5/thumbnails/2.jpg)
Role of Web Graphics
![Page 3: Introductioncomputing.dcu.ie/~dfitzpat/content/CA106/images.pdfan image that has broad areas of color, an animated image, or an image with transparency (when using png is not desirable)](https://reader036.fdocuments.in/reader036/viewer/2022081407/604f1f38ece62d18515f7c73/html5/thumbnails/3.jpg)
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/
![Page 4: Introductioncomputing.dcu.ie/~dfitzpat/content/CA106/images.pdfan image that has broad areas of color, an animated image, or an image with transparency (when using png is not desirable)](https://reader036.fdocuments.in/reader036/viewer/2022081407/604f1f38ece62d18515f7c73/html5/thumbnails/4.jpg)
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/
![Page 5: Introductioncomputing.dcu.ie/~dfitzpat/content/CA106/images.pdfan image that has broad areas of color, an animated image, or an image with transparency (when using png is not desirable)](https://reader036.fdocuments.in/reader036/viewer/2022081407/604f1f38ece62d18515f7c73/html5/thumbnails/5.jpg)
![Page 6: Introductioncomputing.dcu.ie/~dfitzpat/content/CA106/images.pdfan image that has broad areas of color, an animated image, or an image with transparency (when using png is not desirable)](https://reader036.fdocuments.in/reader036/viewer/2022081407/604f1f38ece62d18515f7c73/html5/thumbnails/6.jpg)
![Page 7: Introductioncomputing.dcu.ie/~dfitzpat/content/CA106/images.pdfan image that has broad areas of color, an animated image, or an image with transparency (when using png is not desirable)](https://reader036.fdocuments.in/reader036/viewer/2022081407/604f1f38ece62d18515f7c73/html5/thumbnails/7.jpg)
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/
![Page 8: Introductioncomputing.dcu.ie/~dfitzpat/content/CA106/images.pdfan image that has broad areas of color, an animated image, or an image with transparency (when using png is not desirable)](https://reader036.fdocuments.in/reader036/viewer/2022081407/604f1f38ece62d18515f7c73/html5/thumbnails/8.jpg)
![Page 9: Introductioncomputing.dcu.ie/~dfitzpat/content/CA106/images.pdfan image that has broad areas of color, an animated image, or an image with transparency (when using png is not desirable)](https://reader036.fdocuments.in/reader036/viewer/2022081407/604f1f38ece62d18515f7c73/html5/thumbnails/9.jpg)
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
![Page 10: Introductioncomputing.dcu.ie/~dfitzpat/content/CA106/images.pdfan image that has broad areas of color, an animated image, or an image with transparency (when using png is not desirable)](https://reader036.fdocuments.in/reader036/viewer/2022081407/604f1f38ece62d18515f7c73/html5/thumbnails/10.jpg)
Illustrations:
Graphics can
show you
things, bringing
pieces of the
world into your
document
![Page 11: Introductioncomputing.dcu.ie/~dfitzpat/content/CA106/images.pdfan image that has broad areas of color, an animated image, or an image with transparency (when using png is not desirable)](https://reader036.fdocuments.in/reader036/viewer/2022081407/604f1f38ece62d18515f7c73/html5/thumbnails/11.jpg)
Diagrams: Quantitative graphics and
process diagrams can explain concepts
visually
![Page 12: Introductioncomputing.dcu.ie/~dfitzpat/content/CA106/images.pdfan image that has broad areas of color, an animated image, or an image with transparency (when using png is not desirable)](https://reader036.fdocuments.in/reader036/viewer/2022081407/604f1f38ece62d18515f7c73/html5/thumbnails/12.jpg)
Quantitative data: Numeric charts can help
explain financial, scientific, or other data
![Page 13: Introductioncomputing.dcu.ie/~dfitzpat/content/CA106/images.pdfan image that has broad areas of color, an animated image, or an image with transparency (when using png is not desirable)](https://reader036.fdocuments.in/reader036/viewer/2022081407/604f1f38ece62d18515f7c73/html5/thumbnails/13.jpg)
http://www.nytimes.com
Analysis and causality: Graphics can help
take apart a topic or show what caused it
![Page 14: Introductioncomputing.dcu.ie/~dfitzpat/content/CA106/images.pdfan image that has broad areas of color, an animated image, or an image with transparency (when using png is not desirable)](https://reader036.fdocuments.in/reader036/viewer/2022081407/604f1f38ece62d18515f7c73/html5/thumbnails/14.jpg)
http://www.nytimes.com
Integration:
Graphics can
combine words,
numbers, and
images in a
comprehensive
explanation
![Page 15: Introductioncomputing.dcu.ie/~dfitzpat/content/CA106/images.pdfan image that has broad areas of color, an animated image, or an image with transparency (when using png is not desirable)](https://reader036.fdocuments.in/reader036/viewer/2022081407/604f1f38ece62d18515f7c73/html5/thumbnails/15.jpg)
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.
![Page 16: Introductioncomputing.dcu.ie/~dfitzpat/content/CA106/images.pdfan image that has broad areas of color, an animated image, or an image with transparency (when using png is not desirable)](https://reader036.fdocuments.in/reader036/viewer/2022081407/604f1f38ece62d18515f7c73/html5/thumbnails/16.jpg)
Displays
![Page 17: Introductioncomputing.dcu.ie/~dfitzpat/content/CA106/images.pdfan image that has broad areas of color, an animated image, or an image with transparency (when using png is not desirable)](https://reader036.fdocuments.in/reader036/viewer/2022081407/604f1f38ece62d18515f7c73/html5/thumbnails/17.jpg)
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)
![Page 18: Introductioncomputing.dcu.ie/~dfitzpat/content/CA106/images.pdfan image that has broad areas of color, an animated image, or an image with transparency (when using png is not desirable)](https://reader036.fdocuments.in/reader036/viewer/2022081407/604f1f38ece62d18515f7c73/html5/thumbnails/18.jpg)
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.
![Page 19: Introductioncomputing.dcu.ie/~dfitzpat/content/CA106/images.pdfan image that has broad areas of color, an animated image, or an image with transparency (when using png is not desirable)](https://reader036.fdocuments.in/reader036/viewer/2022081407/604f1f38ece62d18515f7c73/html5/thumbnails/19.jpg)
Things to know…
![Page 20: Introductioncomputing.dcu.ie/~dfitzpat/content/CA106/images.pdfan image that has broad areas of color, an animated image, or an image with transparency (when using png is not desirable)](https://reader036.fdocuments.in/reader036/viewer/2022081407/604f1f38ece62d18515f7c73/html5/thumbnails/20.jpg)
Gamma
![Page 21: Introductioncomputing.dcu.ie/~dfitzpat/content/CA106/images.pdfan image that has broad areas of color, an animated image, or an image with transparency (when using png is not desirable)](https://reader036.fdocuments.in/reader036/viewer/2022081407/604f1f38ece62d18515f7c73/html5/thumbnails/21.jpg)
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
![Page 22: Introductioncomputing.dcu.ie/~dfitzpat/content/CA106/images.pdfan image that has broad areas of color, an animated image, or an image with transparency (when using png is not desirable)](https://reader036.fdocuments.in/reader036/viewer/2022081407/604f1f38ece62d18515f7c73/html5/thumbnails/22.jpg)
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?
![Page 23: Introductioncomputing.dcu.ie/~dfitzpat/content/CA106/images.pdfan image that has broad areas of color, an animated image, or an image with transparency (when using png is not desirable)](https://reader036.fdocuments.in/reader036/viewer/2022081407/604f1f38ece62d18515f7c73/html5/thumbnails/23.jpg)
Image File Formats
![Page 24: Introductioncomputing.dcu.ie/~dfitzpat/content/CA106/images.pdfan image that has broad areas of color, an animated image, or an image with transparency (when using png is not desirable)](https://reader036.fdocuments.in/reader036/viewer/2022081407/604f1f38ece62d18515f7c73/html5/thumbnails/24.jpg)
Graphic file formats
JPEG - Joint Photographic Experts Group
GIF - Graphic Interchange Format
PNG - Portable Network Graphic
SVG - Scalable Vector Graphics
![Page 25: Introductioncomputing.dcu.ie/~dfitzpat/content/CA106/images.pdfan image that has broad areas of color, an animated image, or an image with transparency (when using png is not desirable)](https://reader036.fdocuments.in/reader036/viewer/2022081407/604f1f38ece62d18515f7c73/html5/thumbnails/25.jpg)
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
![Page 26: Introductioncomputing.dcu.ie/~dfitzpat/content/CA106/images.pdfan image that has broad areas of color, an animated image, or an image with transparency (when using png is not desirable)](https://reader036.fdocuments.in/reader036/viewer/2022081407/604f1f38ece62d18515f7c73/html5/thumbnails/26.jpg)
GIF Compression
![Page 27: Introductioncomputing.dcu.ie/~dfitzpat/content/CA106/images.pdfan image that has broad areas of color, an animated image, or an image with transparency (when using png is not desirable)](https://reader036.fdocuments.in/reader036/viewer/2022081407/604f1f38ece62d18515f7c73/html5/thumbnails/27.jpg)
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
![Page 28: Introductioncomputing.dcu.ie/~dfitzpat/content/CA106/images.pdfan image that has broad areas of color, an animated image, or an image with transparency (when using png is not desirable)](https://reader036.fdocuments.in/reader036/viewer/2022081407/604f1f38ece62d18515f7c73/html5/thumbnails/28.jpg)
JPEG Compression
![Page 29: Introductioncomputing.dcu.ie/~dfitzpat/content/CA106/images.pdfan image that has broad areas of color, an animated image, or an image with transparency (when using png is not desirable)](https://reader036.fdocuments.in/reader036/viewer/2022081407/604f1f38ece62d18515f7c73/html5/thumbnails/29.jpg)
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
![Page 30: Introductioncomputing.dcu.ie/~dfitzpat/content/CA106/images.pdfan image that has broad areas of color, an animated image, or an image with transparency (when using png is not desirable)](https://reader036.fdocuments.in/reader036/viewer/2022081407/604f1f38ece62d18515f7c73/html5/thumbnails/30.jpg)
PNG Compression
![Page 31: Introductioncomputing.dcu.ie/~dfitzpat/content/CA106/images.pdfan image that has broad areas of color, an animated image, or an image with transparency (when using png is not desirable)](https://reader036.fdocuments.in/reader036/viewer/2022081407/604f1f38ece62d18515f7c73/html5/thumbnails/31.jpg)
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
![Page 32: Introductioncomputing.dcu.ie/~dfitzpat/content/CA106/images.pdfan image that has broad areas of color, an animated image, or an image with transparency (when using png is not desirable)](https://reader036.fdocuments.in/reader036/viewer/2022081407/604f1f38ece62d18515f7c73/html5/thumbnails/32.jpg)
Working with Images
![Page 33: Introductioncomputing.dcu.ie/~dfitzpat/content/CA106/images.pdfan image that has broad areas of color, an animated image, or an image with transparency (when using png is not desirable)](https://reader036.fdocuments.in/reader036/viewer/2022081407/604f1f38ece62d18515f7c73/html5/thumbnails/33.jpg)
"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,"
![Page 34: Introductioncomputing.dcu.ie/~dfitzpat/content/CA106/images.pdfan image that has broad areas of color, an animated image, or an image with transparency (when using png is not desirable)](https://reader036.fdocuments.in/reader036/viewer/2022081407/604f1f38ece62d18515f7c73/html5/thumbnails/34.jpg)
Image optimisation for the web
Correct file format
Image size that suits the
design
File size that ensures speedy
download
![Page 35: Introductioncomputing.dcu.ie/~dfitzpat/content/CA106/images.pdfan image that has broad areas of color, an animated image, or an image with transparency (when using png is not desirable)](https://reader036.fdocuments.in/reader036/viewer/2022081407/604f1f38ece62d18515f7c73/html5/thumbnails/35.jpg)
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
![Page 36: Introductioncomputing.dcu.ie/~dfitzpat/content/CA106/images.pdfan image that has broad areas of color, an animated image, or an image with transparency (when using png is not desirable)](https://reader036.fdocuments.in/reader036/viewer/2022081407/604f1f38ece62d18515f7c73/html5/thumbnails/36.jpg)
Cropping an image
![Page 37: Introductioncomputing.dcu.ie/~dfitzpat/content/CA106/images.pdfan image that has broad areas of color, an animated image, or an image with transparency (when using png is not desirable)](https://reader036.fdocuments.in/reader036/viewer/2022081407/604f1f38ece62d18515f7c73/html5/thumbnails/37.jpg)
Resize
Actual height still over 53 cm
Reduce to fit you design (pixels)
Mindful of file size
![Page 38: Introductioncomputing.dcu.ie/~dfitzpat/content/CA106/images.pdfan image that has broad areas of color, an animated image, or an image with transparency (when using png is not desirable)](https://reader036.fdocuments.in/reader036/viewer/2022081407/604f1f38ece62d18515f7c73/html5/thumbnails/38.jpg)
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
![Page 39: Introductioncomputing.dcu.ie/~dfitzpat/content/CA106/images.pdfan image that has broad areas of color, an animated image, or an image with transparency (when using png is not desirable)](https://reader036.fdocuments.in/reader036/viewer/2022081407/604f1f38ece62d18515f7c73/html5/thumbnails/39.jpg)
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.
![Page 40: Introductioncomputing.dcu.ie/~dfitzpat/content/CA106/images.pdfan image that has broad areas of color, an animated image, or an image with transparency (when using png is not desirable)](https://reader036.fdocuments.in/reader036/viewer/2022081407/604f1f38ece62d18515f7c73/html5/thumbnails/40.jpg)
Guidelines for Coursework
![Page 41: Introductioncomputing.dcu.ie/~dfitzpat/content/CA106/images.pdfan image that has broad areas of color, an animated image, or an image with transparency (when using png is not desirable)](https://reader036.fdocuments.in/reader036/viewer/2022081407/604f1f38ece62d18515f7c73/html5/thumbnails/41.jpg)
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.
![Page 42: Introductioncomputing.dcu.ie/~dfitzpat/content/CA106/images.pdfan image that has broad areas of color, an animated image, or an image with transparency (when using png is not desirable)](https://reader036.fdocuments.in/reader036/viewer/2022081407/604f1f38ece62d18515f7c73/html5/thumbnails/42.jpg)
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.
![Page 43: Introductioncomputing.dcu.ie/~dfitzpat/content/CA106/images.pdfan image that has broad areas of color, an animated image, or an image with transparency (when using png is not desirable)](https://reader036.fdocuments.in/reader036/viewer/2022081407/604f1f38ece62d18515f7c73/html5/thumbnails/43.jpg)
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