0
PIXEL PRIMER: Preparing Images for the Web           Image manipulation is a key ingredient for        producing web pages...
PIXEL PRIMER: Preparing Images for the WebSTART        HOMEPAGE        ASU 5200 PAGE    FEEDBACK
PIXEL PRIMER: Preparing Images for the Web                          The fundamental unit involved                         ...
PIXEL PRIMER: Preparing Images for the Web                          Three basic file content                          descr...
PIXEL PRIMER: Preparing Images for the Web                 Pixel Dimension        Pixel Dimension: records the amount of i...
PIXEL PRIMER: Preparing Images for the Web               Document Size   Document Size is the actual physical dimension of...
PIXEL PRIMER: Preparing Images for the Web                   Resolution   Resolution is the amount of image content that e...
PIXEL PRIMER: Preparing Images for the Web  Let’s use a real-world example of how these three units interact, and what the...
PIXEL PRIMER: Preparing Images for the Web        ceiling.jpg (1.37 Mb)             lake.jpg (1.02 Mb)START             HO...
PIXEL PRIMER: Preparing Images for the Web                           We’ll use this image for our                         ...
PIXEL PRIMER: Preparing Images for the Web                                                 Pixel                          ...
PIXEL PRIMER: Preparing Images for the Web                                                 Pixel                          ...
PIXEL PRIMER: Preparing Images for the Web                          You can imagine how much                          fast...
PIXEL PRIMER: Preparing Images for the Web                                                 Pixel                          ...
PIXEL PRIMER: Preparing Images for the Web                          Hopefully, you can see what                          a...
PIXEL PRIMER: Preparing Images for the Web        RGB                CMYK                   GRAYSCALE              THREE J...
PIXEL PRIMER: Preparing Images for the Web                        Always be aware of how and why                        yo...
PIXEL PRIMER: Preparing Images for the Web                                               Photoshop and                    ...
PIXEL PRIMER: Preparing Images for the Web                            THE END                          Prepared by Wm Pitz...
Upcoming SlideShare
Loading in...5
×

Pixel Primer

787

Published on

A short primer on pixels and images.

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
787
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Pixel Primer"

  1. 1. PIXEL PRIMER: Preparing Images for the Web Image manipulation is a key ingredient for producing web pages that load quickly and look great. Heres a brief explanation that you may find useful for producing web content.START HOMEPAGE ASU 5200 PAGE FEEDBACK
  2. 2. PIXEL PRIMER: Preparing Images for the WebSTART HOMEPAGE ASU 5200 PAGE FEEDBACK
  3. 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. 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. 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. 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. 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. 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 Karmens home page.Karmen was kind enough to let me use these images forthis 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. 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. 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. 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 MbSTART HOMEPAGE ASU 5200 PAGE FEEDBACK
  12. 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: 280KSTART HOMEPAGE ASU 5200 PAGE FEEDBACK
  13. 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. 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: 159KSTART HOMEPAGE ASU 5200 PAGE FEEDBACK
  15. 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. 16. PIXEL PRIMER: Preparing Images for the Web RGB CMYK GRAYSCALE THREE JPEGs ALL THE SAME RESOULTION AND SIZE: 112K 128K 100KSTART HOMEPAGE ASU 5200 PAGE FEEDBACK
  17. 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. 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 alsogives the file size and download time for each option.START HOMEPAGE ASU 5200 PAGE FEEDBACK
  19. 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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×