A short primer on pixels and images.

1. PIXEL PRIMER: Preparing Images for the Web
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

2. PIXEL PRIMER: Preparing Images for the Web
START HOMEPAGE ASU 5200 PAGE FEEDBACK

3. PIXEL PRIMER: Preparing Images for the Web
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.
START HOMEPAGE ASU 5200 PAGE FEEDBACK

4. PIXEL PRIMER: Preparing Images for the Web
Three basic file content
descriptions are essential to
understand:
• Pixel Dimensions
• Document Size
• Resolution
How 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.
START HOMEPAGE ASU 5200 PAGE FEEDBACK

5. PIXEL PRIMER: Preparing Images for the Web
Pixel Dimension
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.
START HOMEPAGE ASU 5200 PAGE FEEDBACK

6. PIXEL PRIMER: Preparing Images for the Web
Document Size
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.
START HOMEPAGE ASU 5200 PAGE FEEDBACK

7. PIXEL PRIMER: Preparing Images for the Web
Resolution
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.
START HOMEPAGE ASU 5200 PAGE FEEDBACK

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

9. PIXEL PRIMER: Preparing Images for the Web
ceiling.jpg (1.37 Mb) lake.jpg (1.02 Mb)
START HOMEPAGE ASU 5200 PAGE FEEDBACK

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

11. PIXEL PRIMER: Preparing Images for the Web
Pixel
Dimensions:
17.5 Mb
Document Size:
7.06 in. X
9.593 in.
Resolution:
300 dpi
ORIGINAL 300 dpi. FILE SIZE:
1.37 Mb
START HOMEPAGE ASU 5200 PAGE FEEDBACK

12. PIXEL PRIMER: Preparing Images for the Web
Pixel
Dimensions:
1 Mb
Document Size:
7.06 in. X
9.593 in.
Resolution:
72 dpi
CHANGE RESOLUTION
TO 72 dpi. FILE SIZE:
280K
START HOMEPAGE ASU 5200 PAGE FEEDBACK

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

14. PIXEL PRIMER: Preparing Images for the Web
Pixel
Dimensions:
159K
Document Size:
2.778 in. X
3.778 in.
Resolution:
72 dpi
CHANGE DOCUMENT SIZE
TO 2.778 INCHES WIDE FILE SIZE:
159K
START HOMEPAGE ASU 5200 PAGE FEEDBACK

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

16. PIXEL PRIMER: Preparing Images for the Web
RGB CMYK GRAYSCALE
THREE JPEGs ALL THE SAME
RESOULTION AND SIZE:
112K 128K 100K
START HOMEPAGE ASU 5200 PAGE FEEDBACK

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

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

19. PIXEL PRIMER: Preparing Images for the Web
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.
START HOMEPAGE ASU 5200 PAGE FEEDBACK