1. Working with
images
EIT, Author Gay Robertson, 2018

2. What about images?
In order to prepare your pictures for web use, you need to make some decisions about who's going to look at the pictures. The variables are
Average user's bandwidth (line speed) - are your web pages intended mostly for people who use high-speed connections?
User patience and interest in your page
Image size in pixels should be decided before you start, based on your page design
Smaller version or Thumbnail images for users to click on to see a larger image
Mobile phones – user expected to zoom or slide the image

3. Decide what file size you want your picture to take up
The size of a picture not only uses up disk storage on your web server account, but also consumes download time
There's a trade off between picture size, picture quality, and load time
If your page loads too slowly, viewers will leave without looking
Storage or file formats
We will look at these next: JPEG TIFF PNG ESP PDF GIF

4. File formats for images

5. jpeg
Most popular and widely used file format for viewing and sharing digital photos
Supports 24-bit colour
JPEG is a lossy file format (it compresses images so some of your image information is tossed out) to reduce file size
Reduced quality is not good for printing but fine for Facebook and Flickr or ing to others
Very important:
Everytime you re-save a JPEG file you add more compression to the image – and the image becomes more degraded for the viewer

6. gif Format of choice for web graphics (not photos)
Can display only 256 colours
Great for web page banners and buttons
Small file sizes make them load quickly
Can be used to create simple animations
Supports transparency but not as well as the PNG format supports this

7. png PNG format supports 48-bit colour PNG is lossless file format
Means even though it compresses images it does not result in loss of image quality
You can re-save without degrading
Files are generally larger
PNG format does not support CMYK colours so cannot be used by commercial printers
PNG transparency far exceeds GIF transparency
Animation is not supported
Used in multimedia programs like Flash

8. tiff
TIFF is the universally accepted standard for high quality images destined for commercial printing
TIFF is lossless file format
Means even though it compresses images it does not result in loss of image quality but file size is larger because all data is retained
You can re-save without degrading
TIFF is not as important as it once was but it remains the print industry standard

9. eps
EPS is another print industry standard format but this has been in decline over the years
EPS files contain a series of instructions for how a printer should reproduce the image which has been stored as vector-based
They contain a bit-map version of the image for simpler viewing
They can contain text and graphics
Adobe Illustrator uses this file format

10. pdf Popular for saving images destined for print
Pdf supports and preserves all image features
Pdf allows you the choice of JPEG compression or lossless ZIP compression
You can export from a graphic program to a pdf

11. Free graphic editor

12. Download a graphics editor
Open Chrome
Key in the address bar
The following will appear. Click on Download and install the program the download version may have changed, this is 10 May 2018 – let us know if it has!

13. When you open the program it will take a few minutes to find what it needs on your computer

14. You will then see this

15. Download another graphics editor
Open Chrome
Key in the address bar
The following will appear. Click on Download and install the program using Google address (gmail) or sign in with Facebook

16. When you open the program it may take a few minutes to find what it needs on your computer
You will then see the working window

17. Lets work with some images go back to the workbook

18. End of presentation Press Esc