Image Files on the Web

Every file type has its own pros and cons.

JPG or JPEG
1. Pros:
   Small file size
   Good with color
   Good with photos
   
   Cons:
   Poor quality
   Blotchy
   Transparent background turns white

PNG
1. Pros:
   Transparent background
   Excellent quality
   Good with color
   
   Cons:
   Large file size

PDF
1. Pros:
   Almost universal (any OS)
   
   Cons:
   Never meant to be a web image

TIFF
1. Pros:
   Excellent quality
   
   Cons:
   Gigantic size
   Slow
   Note: TIFF files can no longer be used as web images

SVG (Scalable Vector Graphics)
1. Pros:
   Good quality
   
   Cons:
   Takes a lot of code

GIF
1. Pros:
   animated
   compressed based on color (more colors=bigger file size)
   
   Cons:
   Sharp edges (not good with photos)

BITMAP
1. Pros:
   Small file size
   
   Cons:
   No color
   Poor quality
   Dated

How to Export from Photoshop for Web

Before exporting files, you want to know the largest size the image will ever be on one format. You do not want to make it bigger than needed. 72 ppi is the smallest you want to go.

To save a file for the web on Photoshop, you can hit control+alt+shift+s. In general, you will want to save a file as a JPG with high quality.

Once it is in the code, you will want to change the width and height as well as add the alternate info for the visually impaired.