Images

Derek Bridge

Department of Computer Science,
University College Cork

Images

Aims:

• to learn about the differen types of images used on the Web
• to learn ways of incorporating images into fixed-width and liquid layouts

Two major types of images

• Bitmapped images
  • Consist of pixels (coloured dots) in a grid
  • Their quality depends on their resolution: the number of pixels per inch
  • When software decreases the size of such images, it throws pixels away
  • When software increases the size of such images, it inserts new pixels and must guess their colour
• Vector graphics images, e.g. Scalable Vector Graphics (SVG)
  • Defined by mathematical equations which describe lines, rectangles, circles, etc.
  • Scalable without the kinds of loss of quality that we get when we resize bitmapped images

Two kinds of bitmapped images

• Direct colour
  • The image file specifies the colour of each pixel by giving an RGB code
  • E.g. JPEG
  • Good for images with continuous changing shades and soft transitions, e.g. photos
• Indexed colour
  • The image file contains a palette of colours
  • It then specifies the colour of each pixel by giving the colour's position on the palette
  • E.g. GIF — uses a palette of up to 256 colours
  • Good for images with large areas of solid, flat colour, e.g. logos, icons, charts, cartoons
• Some image formats have the advantages of both, e.g. PNG, WebP

Compression

• Compression reduces the size of bitmapped image files
• GIF uses LZW compression
  • assigns a short code to certain sequences
  • if the sequence repeats, the repeat is replaced by the code
  Hence, lossless compression
• JPEG compression is lossy: info is thrown away
  • choose the compression rate when saving the image
  • higher rates do more compression but may make the image 'blocky'
• WebP compression is like JPEG compression but Google claims 38% smaller files with no discernible loss of quality
• PNG uses lossless compression that compresses more than GIF but less than JPEG

Revision: background images

body
{
    background-image: url(swirly-pattern.gif);
}

• Can put background images on any element, not just body
• Other relevant CSS includes:
  • background-repeat with values repeat (default), repeat-x, repeat-y, no-repeat
  • background-position with values top/center/bottom and left/center/right
  • background-attachment with values including scroll (default) and fixed
  Also background-size, background-origin, background-clip

Revision: regular images

<img src="wombat.jpg"
    alt="Wombats are furry, have protruding front teeth and walk on all fours."
    title="A wombat walking along a road" />

• There are also width and height attributes —see later
• You can also nest the img element inside a figure element, optionally along with a figcaption element
• Reminder: Unless you change things, images will have inline display role

Image dimensions: fixed-width layout

• In fixed-width layouts, you know how much space (in pixels) is available for your images
• As much as possible, try to create the original image so that it is the desired size
• If this is not possible, then scale it using image manipulation software (e.g. Photoshop, GIMP)
  • Good software uses good algorithms, e.g. bicubic interpolation
• It is less satisfactory to let the browser scale the image by specifying the desired size
  • either in the HTML, e.g.

    <img src="wombat.jpg" width="152" alt="..." />

  • or in the CSS

    img
    {
        width: 152px;
    }

  Question: Why are these less satisfactory?

Image dimensions: liquid layouts

• In liquid layouts, you don't know how much space is available for your images
• If the image is wider than the available space, it will overflow its container
• One option is to put the image into, e.g., a div and use CSS to handle the overflow:

  div
  {
      overflow: hidden;
  }

  The overflow property has values that include visible (default), hidden, scroll and auto

Image dimensions: liquid layouts

• A more flexible option (recommended by Ethan Marcottte's Responsive Web Design) is to set the max width to 100% in the CSS:

  img
  {
      max-width: 100%;
  }

  • If the image is narrower than its container, it will display at its normal size
  • If it is wider than its container, it will be scaled down to match the width of the container
• Or you could set the width to 100%:

  img
  {
      width: 100%;
  }

  Then the image scales up or down to match the container
• (This solution works for other media too, e.g. the video element)

Image dimensions: liquid layouts

• Be aware that percentage widths (or max-width)s involve scaling by the browser
• People are working on additions to HTML/CSS that will work like media queries to fetch the best of several versions of an image, to reduce scaling
• This has beconme more important with Apple Retina displays