How to Display Photographs and other images

A question was asked in class… How do you make photographs and graphics behave the way you want them to? I will go over this in class in detail…  If you have a question… bring it to class or send that e-mail!

Displaying Photographs

In order for your web page to render quickly you need to make your mega-pixel photographs "smaller." In other words resize the image to fit the designated size on the web page, however...

What about the new high resolution monitors? How do you maintain image quality when a high resolution monitor can display up to 4x as many pixels per inch??

The easiest answer is to double the resolution of the images being served. The draw back is that your users might be downloading up to 4x more data than they need. The upside is you only have to maintain one set of graphics or photographs.

W3C and and other web designers are working on this and have temporary solutions to this display issue... for more information check out these articles.

• Towards a Retina Web
• Ben Frain's all encompassing article
• Retina Graphics for your Web Site

  How to Make a photo index page

  Working with images the "hard way"...

  • Preparation work
    • Making Thumbnails and resizing your display images
    • Some Software Possibilities... Making Thumbnails doesn't have to hurt!
    • CoffeeCup's free Web Image Editor Lite for Mac and PC
    • Powerful free image editor for ALL platforms: Fotor

    Working with images the "easy way"...

    • Preparation work
      • Let Photoshop, Lightroom, Picasa, iPhoto, Album, etc do the work
      • Examples Volcano St. Helen's, Some favorites from Film and Video
      • All you need to do is make the Photo Index page
      • And, make the thumbnails "hi-res"

      Next: Making The Photo Index Page