Introduction:
Optimizing images for the web is a constant compromise between image quality and image size. Remember that for each image included on a web page, additional bandwidth or time is required to download to a viewer’s computer. The smaller your images are, the faster a page will load. At the same time, the quality of your images cannot be sacrificed. If they are over-optimized to the point that they look terrible, viewers won’t even want to see them. When you’re ready to optimize your images, keep in mind that image quality is inversely proportional to file size.
To complicate the issue of image optimization even further, we must also optimize for devices with retina displays. Devices with retina displays have the ability to display images with greater pixel density. Images do appear as higher quality, but they also demand more bandwidth.
Objectives:
You will learn:
- how to optimize an image for the web using a graphics editor.
- why certain file formats are better for optimizing certain types of images.
- how to use layers to place multiple objects on the same document.
Reading:
- Please read Clever JPEG Optimization Techniques: This starts to venture into more advanced techniques, but contains some very useful background information
- Read The Complete Guide to Saving Images for the Web: This article is another perspective on the same topic with good visual examples of when to use what sort of image format for the web.
- Google’s recommendations for optimizing images
- Responsive images: This article contains advanced information about images and how they can be implemented on websites. Regardless, I recommend reading it as an introduction to issues surrounding responsive images.
Lecture:
As we prepare raster images for the web, having an understanding of the following image characteristics will help us make effective technical decisions as we compose images:
- Compression
- Resolution
- Pixel density
- Color depth
- Color profile
- Color models
- Optimization
Image Editor Options
To manipulate digital images, we must work with image editing software. There are many options available. Graphic designers and web developers most often work with Adobe products or (increasingly) Sktch. Questions to consider when selecting an image editor:
- What features make some editors better for raster?
- Which editors are actually licensed for commercial work?
- What tools are commonly used for photo manipulation and optimization?
- What is the industry standard? This is important if you will be working on a team.
- How much money do you want to spend?
Online Image Editors (free and paid):
Desktop Image Editors (commercial and open source):
- Photoshop – Commercial industry standard application for images editing. Mac and PC versions are available.
- Gimp – An open source alternative to Photoshop. Not as full-featured as PS, but still a powerful tool. Available for PC, Mac, Linux, Open Solaris, and FreeBSD.
- Fireworks – Commercial raster and vector editing software from Adobe. Mac and PC versions are available (no longer supported by Adobe).
- Illustrator – Adobe’s commercial-grade vector editor. (It can handle optimizing raster images too.)
- Inkscape – An open source vector editor for Mac, PC, and Linux
- Picasa – Google’s free photo editing software for PC
- Irfanview – A free editor for PC that supports a wide variety of image formats
- XNview – A free editor for non-commercial and educational use. Available for PC, Linux, and Mac (available but early in development)
- Sketch – A paid Mac image editor that handles raster and vector workflows specifically for web development. This is a great alternative to Fireworks if you use a Mac.
Compression
Compression attempts to make data storage and transmission more efficient by reducing the amount of redundant data in a file. Different image formats utilize different compression strategies to achieve smaller file sizes. Understanding compression will help you select the appropriate file format to optimize your image.
Image compression methods fall into general two categories – lossless and lossy.
- Lossless compression is used for images with large areas of similar color or areas with sharp edges – similar to what you find in icons, logos, technical diagrams, and images containing text. Lossless compression makes it possible to reconstruct the exact data contained in the original.
- Lossy compression discards data from the original making it impossible to reconstruct the same data as the original image. Lossy compression is usually used on photo-realistic images because it generates artifacts that are generally less noticeable visually within the irregular data of a photographic image.
What happens when an images is repeatedly optimized using lossy compression? Watch this short video (below) that visualizes how over-optimization of a JPEG appears over multiple generations.
Watch the Generation Loss by hadto.
- JPEG – lossy compression that exploits how our eyes take in visual data for processing by the brain
- GIF – lossless LZW compression best at compressing horizontal rows of data but the format only supports 8-bit color
- PNG – lossless compression similar to GIF’s LZW except that it prefilters for vertical compression as well. Supports 24-bit color but not multiple images (animation).
Webreference has a very detailed page about common compression methods used to optimize web graphics.
Additional Terms Related to Optimization
- Anti-aliasing – A technique used to make hard edges appear more smooth and continuous by placing different hues of the same color along a distinct edge. The effects of anti-aliasing can be seen most commonly in screen text. Maybe you remember the old jagged text on Windows machines before Microsoft released the Clear Type anti-aliasing engine with Vista. Mac users had been enjoying the benefits of the Quartz engine years before PC users.It is best to use anti-aliasing with your work includes ovals or curves. Some image editors also employ anti-aliasing settings for text that assist in making it appear more legible on screen. If you create images with text it is a good idea to use an editor that gives you this level of control. Your work will look more refined.The effects of aliasing can also be seen improperly resized images that contain small repeated patterns. These patterns can become distorted by moire.
- Dither – Dithering is a way to display a color by using two other colors to trick the eye into seeing a third color.
- Transparency – Some image formats support transparency. Transparent areas of an image display no visual data and allow images or text below the image with the transparency to be seen. –How is transparency/alpha created and how do different image formats support it?
- Interlacing – Interlacing allows a viewer to see degraded version of an image while the full resolution data is still downloading.
- Supplemental – Want to know more? Here are a few resources if you’re interested in exploring more complex strategies for optimizing images:
Clever PNG Optimization Techniques
Clever JPG Optimization Techniques
Activities & Practice:
Watch the videos and complete the activities below for the respective image editor you are use (Photoshop, Gimp, Fireworks, etc.). These activities are meant to familiarize you with the processes of resizing images, optimizing images for the web, and creating images using multiple images and multiple layers.
If you’re using Photoshop:
Start with 5 images (jpegs) and open them in Photoshop, each as their own documents. (If you need images, don’t forget the list from Lesson 2 of sites from which you can download alternative-licensed images for free.)
Cropping and Resizing Images
Exporting Images Out of Photoshop
After watching the videos above, try each of the tasks below to practice resizing, changing image dimensions, and optimizing for the web.
- resize one of your images to 33% of its original size
- change the dimensions of another image so that the width is 400px and crop the height so it measures 250px
- on the next image change the dimensions to 250px x 250px, crop the image if necessary
- In the Export As panel, experiment with the optimization settings for each image by changing the target file format, the bit depth, and dither
- when you’ve decided on the most optimal settings for each image, export them and save them using a different file name from their original names so you don’t overwrite your originals. Remember that your optimized images should be the smallest file size possible without compromising their quality “too” much
Creating Multi-layer Composite Images in Photoshop
In the tutorials below you learn to use layers to create a complex image made from multiple images. They will assist you greatly in completing your homework if you are new to Photoshop.
These tutorials cover the following skills:
- Move images from one file into another in Photoshop
- Re-size image dimensions and change resolution
- Crop out unwanted parts of an image
- Make complex selections using the Magic Wand tool
- Work with multiple layers
- Rename layers so that they are easier to find
- Move images within the same document around on the workspace
- Flatten selected layers
- Add text to a composite composition
- Apply Filters and effects to images and text
Move multiple images into the same document:
If you’re using Fireworks:
Start with 5 images (jpegs) and open them in Fireworks, each as their own documents. (If you need images, don’t forget the list from Lesson 2 of sites from which you can download alternative-licensed images for free.)
A tutorial on resizing and cropping images
Resizing and Optimization
After watching the videos above, try each of the tasks below to practice resizing, changing image dimensions, and optimizing for the web.
- resize one of your images to 33% of its original size
- change the dimensions of another image so that the width is 400px and crop the height so it measures 250px
- on the next image change the dimensions to 200px x 200px, crop the image if necessary
- using the 4-up view and the optimize panel, experiment with the optimization settings for each image by changing the target file format, the color palette, the bit depth, and dither
- when you’ve decided on the most optimal settings for each image, export them and save them using a different file name from their original names so you don’t overwrite your originals. Remember that your optimized images should be the smallest file size possible without compromising their quality “too” much
Using Layers
– (Use the supplemental info on Adobe’s site if you need help reviewing how to use layers in Fireworks)
- Create a new blank document in Fireworks that is 650px x 650px
- Using the 5 images you have handy, experiment with creating a single composite image from many images. Use the lasso tool to shape and remove areas of the images you don’t need
- Add text to a new layer on your image using the text tool
- Experiment with adding filters by adding them to your text
- When you’re done editing your composite image, optimize it for the web and export the new file
TUTORIAL: Build a Composite Image
This is an advanced tutorial that will walk you through how to use the tools in Fireworks to create a complex image made from multiple images. This tutorial will assist you greatly in completing your homework if you are new to Fireworks. Find the banner tutorial and the supporting images in this linked ZIP file.
This tutorial covers the following skills:
- Move images from one file into another in Fireworks
- Re-size image dimensions and change resolution
- Crop out unwanted parts of an image
- Make complex selections using the Magic Wand tool
- Work with multiple layers
- Rename layers so that they are easier to find
- Move images within the same document around on the workspace
- Flatten selected layers
- Add text to a composite composition
- Apply Filters and effects to images and text
Supplemental Resources & Advanced Tutorials
- Another video on exporting your work out of Photoshop (if you’d like to hear someone else explain the process)
- Cropping and straightening images in Photoshop. It is an interesting tutorial because it addresses cropping in unique conditions.
- Change the color of anything in your photograph.
- Creating a transparent text layers in Photoshop
- Create glowing sparks in Photoshop (this is an older tutorial, but the basics still apply)
- Create white on white text that is legible
- Composite an image using masks
- More compositing using masks and lighting effects in Photoshop
- Double-exposure technique
- Fantastic Butterfly with Lighting Effects
Looking Forward
- Complete Assignment 03 for homework before moving to the next lesson.