Speaker: Andy Chau
Corporate Web Development
Tailored Web Graphics
Overview of the Workshop (1)
• Purpose of the Workshop;
• Common Graphic Types for the Web; • Choosing the right Graphic Type for the Web; • Image Optimisation (Do I need to do this); • Practical session: Image Optimisation; • Tea / Coffee Break;
Purpose of the Workshop
• Primarily aimed at the web editor community:
o Inserting images into Site Manager (News / Projects); o Editors who are new to graphics types for the web; o Refresher for experienced web editors.
• Create awareness of image copyright;
• Promote good practice for images on the web as a support mechanism for content.
Introduction and get to know session
Andy ChauBA (Hons), MSc
Corporate Web Development Marketing and Publicity Unit – MCD
Project Management Design (Concept to Production) Usability (User Testing / Prototyping)
Accessibility (Accessibility Project Group – ISS and MCD) Training (Workshop, one to one training and documentation)
Common Graphic Types
for the Web
Common Graphic Types for the Web (1)
• .jpg (or jpeg) – Joint Photographic Experts Group:
o Complex images with colour gradients; o Photos that rely on skin tone.
• .gif – Graphics Interchange Format:
o Diagrams / line art, logos; o Blocks of colour.
• .png – Portable Network Graphics:
o Modern web browsers support this format; o Will eventually replace GIF and Jpeg.
Common Graphic Types for the Web (2)
• Other graphic types / formats (not optimised for displaying on a webpage):
.tiff – Tagged Image File Format; .bmp – Bitmap;
.psd – Portable Document Format (Adobe); .eps – Encapsulated PostScript.
Choosing the right Graphic Type for the Web
Art by: Melissa Clifton
Image Optimisation
(Do I need to do this)?
Image Optimisation (Do I need to do this) (1)
Yep!
• It is good practice to have images optimised as: o Loading times are drastically reduced on web
browsers;
o Less strain on lower end computers or mobile platforms such as PDA’s and iPhone / iPod touch; o File size is less, which allows for more images /
Image Optimisation (Do I need to do this) (2)
Original Image File size: 48KB Quality 70% File size: 12KB Quality 8% File size: 4KBImage Optimisation (Do I need to do this) (3)
Original Image File size: 52KB Colour 32 File size: 12KB Colour 8 File size: 8KB
Practical session:
Image Optimisation
Resizing and Cropping Images
Resizing and Cropping Images (1)
Resizing!
• Large images should be reduced in dimension in order to fit the web page and save on bandwidth; • Ensure Site Manager HTML attributes match the image dimensions or image distortion can occur; • 72 pixels per inch is standardised resolution for
web (PPI/DPI) 96 pixels on Apple Macintosh; • For small images, avoid increasing dimensions as
image quality suffers and can look blocky.
Resizing and Cropping Images (3)
Scaled Down:
50%Scaled Up:
50%Good!
Bad!
Resizing and Cropping Images (4)
Cropping!
• Subject of image may not be full frame; • Crop the non essential parts of the image; • Enhance the relevance of images;
• Better cropping results can be obtained when the original image is at a high resolution.
Practical session:
Stay Legit! a brief overview on image
Copyright
Stay Legit! a brief overview on image
Copyright (1)
• Under UK law, creators of original work is automatically protected by Intellectual Property Rights (IPR);
• Example of common license agreements: o Royalty Free;
o Creative Commons license; o Reproduction Fees.
Stay Legit! a brief overview on image
Copyright (2)
Stay Legit! a brief overview on image
Copyright (3)
• Creative Commons license – refers to how people can share and build upon other peoples work: http://creativecommons.org/about/licenses/
• The copyright owner is able to change their copyright terms with ease allowing them to amend a “copyright restricted” assets to “some rights reserved”;
Stay Legit! a brief overview on image
Copyright (4)
• Reproduction Fees – refers to images being repurposed again for alternative media such as books, magazines or TV advertisements; • Time limited (6 month, year or 2 years);
• For the Internet this can be a problem as websites tend not to have a lifespan agreed upon use of the image or restrictions on people making multiple copies of the image.
Stay Legit! a brief overview on image
Copyright (5)
Advice
• Keep written confirmation of granted photos; • Images that clearly depict a member of staff or student
should have written consent to use the image for web or printed publications;
Workshop Summary
• Common Graphic Types for the Web; • Choosing the right Graphic Type for the Web; • Image Optimisation (Do I need to do this); • Resizing and Cropping Images;
• Stay Legit! a brief overview on image Copyright.
Recommended Training and Photo Library
access
• Adobe Contribute Training – SDU booking • Site Manager Training – [email protected]
• Writing for the Web – [email protected]
• Getting the most out of Nedstat –
• Photo Library – [email protected]
