pixel primer
DESCRIPTION
A short primer on pixels and images.TRANSCRIPT
PIXEL PRIMER: Preparing Images for the Web
START HOMEPAGE ASU 5200 PAGE FEEDBACK
Image manipulation is a key ingredient for producing web pages that load quickly and look great. Here's a brief explanation that you may
find useful for producing web content.
START HOMEPAGE ASU 5200 PAGE FEEDBACK
PIXEL PRIMER: Preparing Images for the Web
START HOMEPAGE ASU 5200 PAGE FEEDBACK
The fundamental unit involved is the pixel. There are 72 pixels per inch, just as there are 72 points per inch in the print world. Monitors are all 72 ppi or 72 dpi. Most image manipulation programs (Photoshop and Photoshop Elements for instance) are designed to produce graphics for print as well as for online.
PIXEL PRIMER: Preparing Images for the Web
START HOMEPAGE ASU 5200 PAGE FEEDBACK
Three basic file content descriptions are essential to understand: • Pixel Dimensions• Document Size• ResolutionHow these three settings are used will drastically impact File Size – and they all relate to how the images look on the screen and how quickly they affect page loading times.
PIXEL PRIMER: Preparing Images for the Web
START HOMEPAGE ASU 5200 PAGE FEEDBACK
Pixel Dimension: records the amount of image depth in the pixels that make up a digital image. An image
with a higher resolution will have a higher Pixel Dimension. Lower resolution results in a lower Pixel
Dimension, so there exists a direct relationship between Pixel Dimension and Resolution.
Pixel Dimension
PIXEL PRIMER: Preparing Images for the Web
START HOMEPAGE ASU 5200 PAGE FEEDBACK
Document Size is the actual physical dimension of the image. Usually given in inches, picas or points. (Points equal 72 to the inch, so they are interchangeable with pixels). Changing the Resolution setting DOES NOT change the Document Size. Document size and Pixel
Dimensions are related, but Resolution is INDEPENDENT of Document Size.
Document Size
PIXEL PRIMER: Preparing Images for the Web
START HOMEPAGE ASU 5200 PAGE FEEDBACK
Resolution is the amount of image content that exists in an image, its pixel depth. The higher the resolution, the more image data there is available. For images
designed for use on screen, any resolution over 72 dpi is wasted and cannot be used to make the images look better on screen. Resolution also is directly related to File Size. MORE DATA EQUALS HIGHER FILE SIZE.
Resolution
PIXEL PRIMER: Preparing Images for the Web
START HOMEPAGE ASU 5200 PAGE FEEDBACK
PIXEL PRIMER: Preparing Images for the Web
Let’s use a real-world example of how these three units interact, and what the result can be on File Size and Page
Download time.
Here are two images from Karmen's home page. Karmen was kind enough to let me use these images for this demonstration. They are lovely images and at 300 dpi (dots per inch) have File Sizes over 1 Mb each, which can make page loading an issue, even at higher bandwidths.
The images are edited in Adobe Photoshop.
START HOMEPAGE ASU 5200 PAGE FEEDBACK
PIXEL PRIMER: Preparing Images for the Web
ceiling.jpg (1.37 Mb) lake.jpg (1.02 Mb)
START HOMEPAGE ASU 5200 PAGE FEEDBACK
PIXEL PRIMER: Preparing Images for the Web
We’ll use this image for our example on down-sampling. Down-sampling is the reduction of pixel dimensions and resolution in order to make the file smaller, or to sample the image down, hence “down-sampling.”
Here’s a look at the original data for the 300 dpi image:
START HOMEPAGE ASU 5200 PAGE FEEDBACK
PIXEL PRIMER: Preparing Images for the Web
Pixel Dimensions:
17.5 Mb
Document Size: 7.06 in. X9.593 in.
Resolution: 300 dpi
FILE SIZE: 1.37 Mb
ORIGINAL 300 dpi.
START HOMEPAGE ASU 5200 PAGE FEEDBACK
PIXEL PRIMER: Preparing Images for the Web
Pixel Dimensions:
1 Mb
Document Size: 7.06 in. X9.593 in.
Resolution: 72 dpi
FILE SIZE: 280K
CHANGE RESOLUTION TO 72 dpi.
START HOMEPAGE ASU 5200 PAGE FEEDBACK
PIXEL PRIMER: Preparing Images for the Web
You can imagine how much faster a 280 K file loads, compared to one at 1.37 Mb. But we can improve the File Size even more, by adjusting the Document Dimensions.Karmen used this image at 2.778 inches wide on her home page. Let’s see what happens when we use that size instead of the 7.06 inches of the original.
START HOMEPAGE ASU 5200 PAGE FEEDBACK
PIXEL PRIMER: Preparing Images for the Web
Pixel Dimensions:
159K
Document Size: 2.778 in. X3.778 in.
Resolution: 72 dpi
FILE SIZE: 159K
CHANGE DOCUMENT SIZE TO 2.778 INCHES WIDE
START HOMEPAGE ASU 5200 PAGE FEEDBACK
PIXEL PRIMER: Preparing Images for the Web
Hopefully, you can see what a difference this makes on download time, WITHOUT sacrificing any image quality on screen. Another way to help keep image quality high and file sizes small is to save your images as JPEGs, GIFs or PNGs. These file formats are the most efficient for use on screen and online.
START HOMEPAGE ASU 5200 PAGE FEEDBACK
PIXEL PRIMER: Preparing Images for the Web
RGB CMYK GRAYSCALE
112K 128K 100K
THREE JPEGs ALL THE SAME RESOULTION AND SIZE:
START HOMEPAGE ASU 5200 PAGE FEEDBACK
PIXEL PRIMER: Preparing Images for the Web
Always be aware of how and why you want to use images. Every K of file size you save, means a better experience for your readers. And remember, if you want to make an image available for printing, link to a high-res version that your readers can download. Screen images don’t look so great when printed.
START HOMEPAGE ASU 5200 PAGE FEEDBACK
PIXEL PRIMER: Preparing Images for the Web
Photoshop and Photoshop Elements have a “save for web” feature that automates much of what we have just demonstrated.
You see and compare up to four versions of an image. It also gives the file size and download time for each option.
START HOMEPAGE ASU 5200 PAGE FEEDBACK
THE END
Prepared by Wm Pitzer.Special thanks to Karmen Spencer.
Slide produced in Keynote 2 and saved as an interactive Quicktime presentation.
Music loop used for educational purposes only and features the Modern Jazz Quartet.
PIXEL PRIMER: Preparing Images for the Web