1. Web Graphics 101 Web Image File Formats Image Optimization
Size vs. Speed
Legally Obtaining Images
Creating Your Own Web Images

2. The Importance of Having Images
A newspaper page with no pictures is called grey
A Web page with no pictures is called unreadable
The Web is as much a visible medium as a written one.
Readers are likely to pass over web pages without pictures. BUT…
Source:

3. Image Precaution
On the Web, people generally appreciate creativity and passion over dancing bologna
(Unless you are making a humour site.)
Overuse graphics and your site becomes overdone
Flashy = trashy?
Your goal as a web designer is to not create something that looks like a 5- year-old’s first Christmas tree.
Dancing Bologna Source:

4. Keep on trying!

5. How Images Work Images are made of pixels (picture elements)
Pixels are small squares of colour.
Computer monitors are made of pixels!

6. How Computer Memory Works: Bits and Bytes
Every single bit of information on a computer is stored in its MEMORY, either permanently on a hard drive or temporarily in RAM.
Basic unit of storage is the byte
1 byte = 1 character
Example: “Hello World!” uses 12 bytes
Each byte has 8 bits (bit = 1 binary digit)
A bit can be either 0 or 1
A byte has 256 unique patterns
e.g. ‘A’ = ‘B’ =
Abbreviations: use ‘b’ for bit and ‘B’ for byte

7. Size Matters

8. Image File Sizes File size is different than image size
Image size is the dimensions, usually in pixels or inches
File size is how much space it takes up in the computer’s memory, in bytes
“Small” image files are measured in bytes
e.g. 500 bytes
Larger image files are measure in kilobytes or megabytes
1000 bytes = 1 KB
1000 kilobytes = 1 MB

9. Image File Size File size is determined by:
Physical size in pixels/inches/centimeters
Number of pixels (resolution)
More pixels = more detail and more information
Number of bits used to represent the colors in a pixel
Technical hardware term – more bits means more colour
© 2004 Happy Aston-Snow

10. Size/Speed Considerations
Space on a server costs $$ money $$
The larger your image:
The more space it takes up on your web host’s server
The more time it takes to load in your browser
In our case, we get 1MB of server space – not a lot! Not enough to keep high-resolution photos on!
The average iPhone photo is about 2 MB – that’s twice the size we’re allowed for our sites!

11. Speeding up Load Times
How do you make your images “render” faster on the Web?
Make the file size smaller.
You can:
Make the images physically smaller – crop or scale
Reduce the number of colors
Compress (optimize) the image
This is all done in a graphics program like Photoshop

12. Graphic File Types
GIF, JPEG, PNG

13. Three Main Web Image File Types
GIF
Graphics Interchange Format
JPEG/JPG
Joint Photographic Experts Group
PNG
A newer form of GIF, with advantages
The bold word shows what each format handles best.

14. Graphics Interchange Format What is it Good For?
GIFs
Graphics Interchange Format
What is it Good For?

15. GIF — Graphics Interchange Format
Best for simple images that have solid areas of color:
Logos
Illustrations
Cartoons/Clipart
Line Art
GIF is pronounced "JIF" by the format's creator, but many prefer GIF as in gift 
Source:
Pronounce Source:

16. Number of Colours This means a smaller file size.
GIF is an 8-bit format which means a GIF image is limited to displaying only colors – not many.
This means a smaller file size.
Source:

17. More Colours = Larger File

18. Transparent Backgrounds
You can assign a transparent colour to a GIF
Transparency helps your image blend in with a background.

19. Animation
Created by layering several GIF images together within a single file

20. Joint Photographic Experts Group What is it Used For?
JPEG
Joint Photographic Experts Group
What is it Used For?

21. JPEG: Joint Photographic Experts Group
Best for continuous-tone images such as:
Photographs
Glow Effects
Drop Shadows
Gradients
Source:

22. JPEG Tech Specs Works best for: JPEG is a 24-bit format.
This allows for 16 million colors (if you have a modern monitor).
Works best for:
Photographs
Detailed scans
Finely colored pieces of graphic art

23. JPEG Optimization JPEG is a lossy compression method
JPEG compression does not work along horizontal lines, like GIF compression does
JPEG compression breaks an image into square zones and throws away subtle color differences
You can see these square regions on badly compressed JPEGs.

24. Do Not Over-Optimize

25. JPEG Optimization
IMPORTANT NOTE: each time you save a JPG image it gets compressed
It loses more information, ruining your picture.
It is best to save an original of your image in another format (such as TIFF or RAW) and work from that original when making changes.
Depends on the importance of the picture.

26. JPEG Optimization
When saving an image in JPEG format, you can select how much compression to use and, therefore, how much information will be lost.
This is called optimizing.
More compression means a smaller file size, but also more loss of quality.
POINT: we need to find a balance between quality and file size

27. IMAGE QUALITY
FILE SIZE

28. …but overly compressed.
A nice JPEG…
…but overly compressed.

29. JPEG Files Source: http://www.widearea.co.uk/designer/ducks.html

30. Text: gif or jpeg?
As a GIF, text is still crisp As a JPG, text is fuzzy
© 2004 Happy Aston-Snow

31. Portable Network Graphics
PNGs
Portable Network Graphics

32. PNG Files PNG: Portable Network Graphics An updated GIF format.
Similarities and differences:
Lossless
Quality is not degraded when you edit and save
Transparency
Supports 1000’s of colours
Not good for photos, though – JPG works better
Better compression than GIF = smaller file sizes
No patents on PNG technology
No license fees for software developers
Not supported well on older browsers before ~2010

33. Which Format Should You Use?
Choosing: GIF or JPEG?
Which Format Should You Use?

34. Gif Review
The GIF format reduces the color depth of images to a maximum of 256 colors
The less colors you retain in your image, the smaller its file size and download time.
BUT…
If you're working with detailed or finely colored illustrations, you can lose some of the fine color gradation by saving it as a GIF
The image might be a better candidate for the JPEG format
Source:

35. JPEG Review
JPEG supports 24-bit color depths (up to 16 million colors)
Generally, the more complicated an image is (the less it has areas of plain color) the better suited it is for a JPEG
Compressing a JPEG too much causes a mosaic effect, and sometimes colors get mixed and muddied
JPEGs hate the red hues
If your image has large areas of pure red, avoid using JPEGs
Also, very large images should be JPEGs
Source:

36. GIF vs. JPEG

37. JPEG Exception? Grayscale: Grayscale photos are different
In most cases they should be saved as GIFs

38. JPEG Notes
The JPEG format creates a larger file, so it is not necessarily a good format for very small photos
Generally images that are smaller than x 100 pixels known as thumbnails or icons should be saved in GIF format

39. Format Choice Quiz Text? Often better as a GIF.
Photos that are larger than 100x100 pixels?
JPEG format.
Photos that are smaller than 100x100 pixels?
GIF format.
Images with large areas of solid color such as illustrations?
Images with lots of shading or gradients?
Source:

40. Two Types of Images
Raster and Vector

41. Raster (Bitmap) vs. Vector Images
All computer graphic programs fall into two basic categories: paint programs and drawing programs
A paint program works with pixels
A drawing program works with vectors
Source:

42. Raster (Bitmap) Images
Pixel is short for picture element, and collectively those pixels make up a raster image (also called a bitmap image)
Programs such as Adobe Photoshop work with pixels, or “raster images”, and therefore fall into the “paint program” category
GIFs and JPEGs are bitmapped files.

43. Vector Images
Vector objects are made of lines and curves that are defined mathematically in the computer
Programs such as Adobe Illustrator work with vectors and therefore fall into the “drawing program” category
Vectors can have various attributes such as line thickness, color and length
For example, in a drawing program, a square is drawn as four lines connected at the corners
Those lines can be set to different thickness and colors
The square can be hollow or filled
A line is one object with attributes, and you work with this line as a single object, not as a group of pixels as you would in a paint program

44. Any Questions?