Pixel Primer

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.

http://www.fd.appstate.edu/muffoletto/projects/5200/pitzer/homepage.html


http://edtech.ced.appstate.edu/class/5200/


mailto:[email protected]?subject=email%20subject











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.









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 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









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









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










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.









ceiling.jpg (1.37 Mb) lake.jpg (1.02 Mb)









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:









Pixel Dimensions:

17.5 Mb

Document Size: 7.06 in. X9.593 in.

Resolution: 300 dpi

FILE SIZE: 1.37 Mb

ORIGINAL 300 dpi.









Pixel Dimensions:

1 Mb


Resolution: 72 dpi

FILE SIZE: 280K

CHANGE RESOLUTION TO 72 dpi.









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.









Pixel Dimensions:

159K


Resolution: 72 dpi

FILE SIZE: 159K

CHANGE DOCUMENT SIZE TO 2.778 INCHES WIDE









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.









RGB CMYK GRAYSCALE

112K 128K 100K

THREE JPEGs ALL THE SAME RESOULTION AND SIZE:









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.









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.








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.








Education

Pixel Primer