Working with images for the web

WORKING WITH IMAGES AND FILES FOR THE WEB

When creating images for web use, keeping the file size low is imperative; otherwise, the file will be downloading forever and the user becomes impatient and leave your site. To adjust an image for the web, its file format, size and compression levels must be taken into consideration.

Web file formats for images:
- jpg - is used for photorealistic imagery, images with a lot of details and gradients.
- gif - is used for images with blocks of solid color, simple shapes and crisp edges.
- png 24 - is used for images with transparency.
- Compressed pdf – only for the multipage documents, such as books, brochures, magazines, etc.
Note
Single page document, such as a poster, has to be saved as jpg image

Not web file formats:
Photoshop, Illustrator, InDesign and other software files are not web file formats; for using such files for the web, they have to be optimized and converted to the web file format files

VERY STRICT RULES
that you must remember working with your images

IMAGE DIMENSION Recommended image dimension is very approximately between 400 px (any side) to 800 -900 px (any side) depending on your goal. The exception: an image can be bigger if you plan to use it as a stretching background image (the average to big screen resolution should be considered; ex. 1280x800 - 14 inches monitor, or1680x1050 – 22 inches monitor)
Video: Image Size Options:
https://www.youtube.com/watch?v=cbvqfIdEMCo&feature=related
Note:
Crop empty, unneeded areas around the images

FILE SIZE - If the image dimension is big, ideally the file size should be no larger than 1MB, the best - 100kb or less. And only a very large image like a full-screen background could be a little more than 1MB (but still, try to keep is as small as possible).
- Icons should have much smaller image dimension and file size (several kb), depending on your goal.
- Resolution for the web is 72dpi.
Video: Preparing an image to be used online requires selecting the right size, file format, and image resolution:
http://blog.jimdo.com/web-graphics-for-beginners-a-best-practices-handbook

FILE NAMES
1. the first (homepage) file name is index.html; all lowercase letters.
2. No spaces in your filenames
3 Keep the names short, but meaningful. If you need several words for your file name, separate the words with hyphens or underlines.

Very important: to avoid broken links
1. Keep all the site files in the same folder (if you have many images, keep them in a folder inside the main site folder); if you relocate a file, don't forget to change its path.
2. Keep the file names and folder names identical with those in your codes; if you change the file or folder name, do not forget to change it in the code
3. Capitalization: if the file name starts with a capital letter, but in the code of its name starts with a lowercase letter (or vice versa), the link might not be broken on your local computer, but it will be broken on the internet.
This rule includes the file extensions: for example, if you code name.jpg and the file name is name.JPG, the connection will be broken on the server.

HOW TO OPTIMIZE IMAGES:

WORKING WITH JPEG, GIF AND PNG 24 (the formats most commonly used for web)
From Photoshop or Illustrator go to File>Save for Web; in the dialog box try to keep the image quality high, while keeping the file size small.
Videos: Preparing images and saving for the web
https://www.youtube.com/watch?v=SV38L4c4JKY
http://htmlandcssbook.com/extras/resizing-and-saving-images-for-the-web
TRANSPARENCY
Save a file as PNG to keep transparency
Note: do not forget to delete background
Procedure:
File, Save for Web, choose PNG 24 format
Video https://www.youtube.com/watch?v=SV38L4c4JKY

WORKING WITH PDF FILES
Note: If you have a multipage PDF document (for example a magazine project with several pages) you can use the usual URL links approach (preferably in a new browser)
Example: Cook Book (PDF file is optimized from 25 mg to 1 mg. See the instructions below )
The code: <a href="CookBook.pdf" target="_blank">Cook Book</a>

If you have a one page PDF document, you should convert it into JPG or PNG file:
Step 1: Reducing file size
If PDF file size is too big (more than 1 or 2 mg), you have to make it smaller to optimize it for the web
Option 1:
1. Open PDF file
2. Open the PDF Optimizer dialog box (File > Save As > Optimized PDF).
The rest of the instructions you will find here:
http://talkingpdf.org/optimizing-pdfs-to-reduce-file-size
Option 2:
Simply use online PDF compression:
http://smallpdf.com/compress-pdf

Step 2: Converting PDF file to web file(s)
Option 1:
1. Open PDF file
2. Choose Export to>Image> choose desired file format
Option 2:
Simply use PDF online converter:
PDF to JPG
http://pdftoimage.com
PDF to PNG
http://pdf2png.com

WORKING WITH INDESIGN FILES
Option 1:
Open InDesign file; go File>Export>Save> Keep Range All Pages and resolution 72 ppi
Option 2:
Open InDesign file and export the file to PDF file, then follow the Working with PDF files procedure
Remember: InDesign images have to be embedded or kept in the same folder with InDesign file; outlines should be created for the fonts

WORKING WITH VIDEO FILES
Embedding Videos on your website (HTML 5)
http://www.w3schools.com/html/html5_video.asp
Video file formats:
https://developer.mozilla.org/en-US/docs/Web/HTML/Supported_media_formats

LEGAL USE If you put on your site somebody's photographs, graphics, or other work, make sure you can legally use this image. Use free Public Domain images, or Royalty Free images for a relatively small price.