Tutorial 5 • Image Optimization

Bitmapped images are use-specific, meaning the resolution has to be set for the intended use and reproduction size, so as to avoid “the jaggies,” or pixelization, and also to avoid excessively large file size, which slows output for print and download time on the web.

A good place to start thinking about web images is whether the image should occupy a full page, half page, or quarter page. Resolution for web should be 72 ppi. Higher resolution does not produce finer detail unless the image is to be enlarged, e.g., if a smaller image is linked to a larger view.

Transparency is often useful for web images. GIF and PNG file types support transparency, but not JPEG.

Let’s Optimize Some Images

DNG Images

1. In Photoshop, simultaneously open the three .DNG “digital negative” images, which will open as Camera Raw.
2. Note that the images are a bracketed exposure series of ±⅓ exposure value (EV). When making an exposure, bracketing only takes a few extra seconds and enables you to compare exposures later on a large screen.
3. Note that the three images can be identically cropped if they are all selected when the cropped area is drawn.
4. Final image size and resolution can be set in the blue link below the preview.
5. Select all 3 images, flip 180°, and crop to a square 1024×1024 px at 72 ppi, and open.
6. Choose File > Save for Web > JPEG. Note that the dialog box includes settings for quality and size, and also displays the final file size and expected download time at different network speeds.

PNG Image

1. Open the image “4_BlackFlowers.jpg.”
2. With the Circular Selection Tool, hold SHIFT+OPT and draw a circle around the box, starting from the centre. Reposition if necessary.
3. In the selection, right-click or CNTRL-click “New Layer from Cut.” This places the box on a new layer, leaving the Background empty.
4. In the Layers palette (Window > Layers), delete the Background layer.
5. File > Save for Web, select PNG-24 format, and check Transparency. The background should show as a checkered pattern.

JPEG image without transparency	PNG-24 image with transparency

Place in Web Page

1. Place both images into a web page styled with body {background: gray;}.
2. Note that the background of the PNG image is transparent while that of the JPG is not.

Images as Links

Images can be linked either to larger versions of themselves or to other HTML documents. Simply surround the image with a link tag (<a href=”filename”>).

Unlike a text link, with its default blue color and underline, an image link will not look any different from an unlinked image. However the pseudo-class “:hover” can be used to style the linked image differently when the mouse is over it. Some common styles include putting a border (e.g., “border: 1px solid grey;”) or drop-shadow (“box-shadow: 2px 3px 6px grey;”) around the image, reducing the opacity (“opacity: 0.50;”), expanding the image slightly (“transform: scale(1.05);”) or moving the image slightly (“transform: translateY(5px);”). All of these effects can be faded in by adding the “transition” style, specifying the style to be transitioned and the time in seconds, e.g., “transition: scale 0.5s;”.

Captioning with the Figure and Figcaption Tags

Using the <figure> tag, images can be grouped with a caption written in the <figcaption> tag. All three tags can be styled for size, positioning, margin and padding, and text wrap (float).

<figure>
<img src=”image.jpg” />
<figcaption>Figure 1.</figcaption>
</figure>

Grouping Photos with Divs or Tables

Two or more photos can be grouped together with <div> or <table> tags. The div width should be set to equal the sum of the image widths, including an allowance for any borders or margin around the images. Once grouped, the div can be styled by centering and placing spacing around it. A table can be constructed with one photo per cell (<td>) to create horizontal and vertical matrixes of images.

Arranging Photos with the Flexible Box and Grid Layouts

The relatively new “flexible box” and “grid” layouts are useful for arranging multiple images on web pages.

When a div is styled with “display: flex;” and accompanying “align-items” and related styles, the items in the div will arrange themselves on the page. Additional items can easily be added, such as more photos or documents.

Similarly, the “grid” layout can be used to specify columns, rows, or grid regions on the page.