Week 6: Graphics
Follow these steps to make sure your web graphics:
- look good
- are small
Use two file types for web images: jpg and png (pronounced “ping”). Never save as a gif (unless it’s animated).
Jpgs are great for large, complex photos. Jpg is an efficient compression algorithm, and file sizes are significantly smaller than other formats (such as raw, tiff, psd, or pict). Most consumer cameras save photos as jpgs.
Pngs are great for everything else.
Fast and Easy Optimization
If you use WordPress, install the WP Smush.it Plugin. It will automatically optimize your photos using Smush.It.
Pngcrushrrr and ImageOptim are both great drag-and-drop options for optimizing pngs (mac only). Drag your file onto its icon, and voila, a smaller file.
Advanced Photo Optimization
Sergei Chikuyonok write for Smashing Magazine. Read his articles about:
To the left is an example of a transparent image. It is a png. Notice how the sky is transparent, and blends into the white background of this page.
Additional reading:
