Skip to main content

INFO 1300: Images

Class 5: Images​

  • Images as content
  • Structuring images in HTML
  • Web supported image file formats
  • Image accessibility
  • Image best practices

Copyright 2026, Kyle J. Harms

Review: Card Sorting​

Card Sorting is a method for designing the information architecture of a website. Pieces of related content are physically grouped into categories and labeled.

Card sorting helps us determine the pages for a website and each page's name.

two groups of cards

Review: URL​

Uniform Resource Locator – the address of a resource (file)

(Absolute) URL:​

$$ \underbrace{\text{https}}{\text{scheme}}\text{://}\underbrace{\text{www.cornell.edu}}{\text{domain}}\text{/}\underbrace{\text{index.html}}_{\text{path}} $$

Relative URL:​

$$ \underbrace{\text{index.html}}_{\text{path}} $$

The Link (Anchor) Element: <a>

<a href="URL">LINK CONTENT</a>
<a href="index.html">Home</a>
<a href="https://www.cornell.edu/">Cornell University</a>

Review: Structuring Navigation​

<nav>
  <menu>
    <li><a href="index.html">Home</a></li>
    <li><a href="about.html">About</a></li>
    <li><a href="news.html">News</a></li>
  </menu>
</nav>

<ul>​

<nav>
  <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="about.html">About</a></li>
    <li><a href="news.html">News</a></li>
  </ul>
</nav>

Images as Content​

"Content is King"​

- Bill Gates, 1996​

Hero Images​

A banner that sits at the top of a website. Typically, a large image that fills the entire page designed to capture the user's attention.

Images and Content​

Ask yourself:
If you were a user of this website, would this image help you accomplish your goals?

  • Yes: It's content!
  • No: It's not content!

Activity: Content: :thumbsup:; Not Content :thumbsdown: – Apple​

Activity: Content: :thumbsup:; Not Content :thumbsdown: – Vue.js​

Activity: Content: :thumbsup:; Not Content :thumbsdown: – Cornell​

Activity: Content: :thumbsup:; Not Content :thumbsdown: – Firefox​

Review: Images as Content​

If the image helps the user accomplish their goals, then it's content.

Otherwise, the image may be decorative (or functional).

Decorative images enhance the visual design of a page, but do not help the user accomplish their goals.

Picture Elements​

Element Markup Rules – Attributes​

An attribute extends an HTML element, changing its behavior or providing metadata.

Review the element's reference documentation for available attributes.

An attribute always has the form: name="VALUE"

<html lang="en">
...

<h1>
  <abbr title="Frequently Asked Questions"> FAQ </abbr>
</h1>

<picture> & <img> Elements​

<picture>
  <img src="" alt="">
</picture>
  • src= relative URL (URL without scheme + domain)
  • alt= text description of image for accessibility (and slow internet)

Example​

<picture>
  <img src="/images/tower.jpg" alt="McGraw Tower">
</picture>

Use Only Relative URLs​

Your images should be stored on your web server (relative URL):

<picture>
  <img src="/images/tower.jpg" alt="McGraw Tower">
</picture>
  • repository root
    • images folder
      • tower.jpg

Demo: <picture>​

Gotcha: Hotlinking​

Hotlink: to load a resource (image) from another web server:

<picture>
  <img src="https://www.cornell.edu/images/tower.jpg" alt="McGraw Tower">
</picture>

If your image uses a full (absolute) URL, then it's hotlinking! Hotlinking is bandwidth "theft" ☹️.

Only use relative URLs for images and other media. (Do not "embed".)

Gotcha: <a> is Not Hotlinking​

A link takes the user to another website. It does not load a resource from another web server.

<a href="https://www.cornell.edu/">Cornell University</a>

Hotlinking does not apply to links (<a>); you may link to other websites without fear of hotlinking!

Gotcha: <img> without <picture>​

The HTML specification permits <img> to be used without <picture>.

<img src="/images/tower.jpg" alt="McGraw Tower">

Though, you shouldn't do this. Always use <picture> to structure images in HTML.

Why? Because <picture> supports responsive design; we want to create websites that work on phones as well as laptops, etc.

Using Images on the Web​

  • What image format should you use?
    • JPG, PNG, SVG, or WEBP
  • How do you make images accessible?
    • alt text
  • How do you resize images?
    • HTML is about structure; we won't resize images yet!

Image Formats​

Raster vs. Vector Images​

Raster (.jpg, .png, .webp)​

  • Raster images are a grid of pixels.
  • Raster images become pixalated when enlarged.

Vector (.svg)​

  • Vector images are mathematical descriptions of shapes.
  • You can enlarge vector images without losing quality.

JPEG/JPG (.jpg or .jpeg)​

Pronunciation: "Jay-peg" Type: Raster (grid of pixels)

An image format that's good for photos because it's lossy (compresses the image by removing some information).

It's not good for precise drawings (like screenshots, logos, or charts/graphs) because the compression makes the image fuzzy.

Note: Does not support transparency (like PNG and WEBP).

PNG (.png)​

Pronunciation: "Ping" Type: Raster (grid of pixels)

An image format that's good for precise drawings (like screenshots, logos, or charts/graphs) because it's lossless (does not remove any information).

It's not good for photos because the file sizes can be very large.

Note: Supports transparency (unlike JPG).

WEBP (.webp)​

Pronunciation: "Web-pea" Type: Raster (grid of pixels)

An image format that's good for both photos and precise drawings because it's lossy (compresses the image by removing some information).

It's a newer format that is not supported by older browsers.

SVG (.svg)​

Pronunciation: "S-V-G" Type: Vector (mathematical description of shapes)

An image format that's good for scalable line drawings (like logos, icons, and charts/graphs) because it's a vector format (mathematical description of shapes).

SVG images can be enlarged without losing quality, unlike raster images (JPG, PNG, WEBP).

GIF (.gif)​

Pronunciation: "Jif" (not "gif") Type: Raster (grid of pixels)

An image format that's good for small, limited-color (max 256 colors) animations because it's a lossless (does not remove any information) raster format.

This is an older format that should probably be avoided.

Demonstration: JPG, PNG, SVG​

  • Raster images (JPG, PNG) become pixalated when enlarged.
  • Precise drawings as JPG are fuzzy; use PNG for precise drawings.
  • Vector images (SVG) can be enlarged without becoming pixalated.

Supported Web Image Formats​

FormatTypeFile extensionPronunciationWhen to use
JPEG/JPGRaster.jpg"Jay-peg"Good for photos
PNGRaster.png"Ping"Good for precise drawings (non-photo)
like screenshots, logos, or charts/graphs
WEBPRaster.webp"Web-pea"Newer format that's good for both photos and drawings
SVGVector.svg"S-V-G"Good for scalable line drawings
GIFRaster.gif"Gif" "Jif"Good for small, limited-color animations

Note: HEIC (.heic) images are not a web standard; HEIC mostly works with iPhones. Do not use .heic images on the web!

Activity: JPG, PNG, or SVG?​

Working with a peer, complete Part I of the handout.

Image Accessibility​

Image alt= text​

alt text, is a text description of an image

Improves accessibility for assistive technology (e.g. screen reader) users and users with limited (e.g. slow) internet.

Example:

<picture>
  <img src="/images/tower.jpg" alt="McGraw Tower">
</picture>

Writing Alt Text​

  • Informative – simple concept or information (i.e. content)

    alt="2 tacos and a burrito combo" (food on a restaurant menu)

  • Functional – used to initiate action

    alt="Search" (search icon) or alt="Print" (print icon)

  • Decorative – doesn't add information to page's content

    alt="" (hero image, artsy line, interesting non-content image, etc.)

Activity: Informative, Functional, Decorative?​

Working with a peer, complete Part II of the handout.

Working with a peer, complete Part III of the handout.

  • Informative – simple concept or information (i.e. content)

    alt="2 tacos and a burrito combo" (food on a restaurant menu)

  • Functional – used to initiate action

    alt="Search" (search icon) or alt="Print" (print icon)

  • Decorative – doesn't add information to page's content

    alt="" (hero image, artsy line, interesting non-content image, etc.)

Resizing / Scaling Images​

Gotcha: <img> width= and height=​

Do not "resize" an image by changing the width= and height= attributes:

<picture>
  <img src="/images/tower.jpg" alt="McGraw Tower" width="2250" height="1500">
</picture>

Why? Because "resizing" this way does not change the image's file size and will make your website slow to download on slow internet connections.

Scale the image file in a file editor to make the file size smaller instead. (We'll cover this later.)

Example: Unscaled Images​

I want my image to be smaller!​

Sounds like you're changing the presentation (style) of the image. We're not ready for that (yet)!

Ignore the dimension of images in your homeworks and projects for now. (They will be really big. That's okay.)

Simply focus on the content's structure. We'll worry about the style (and dimensions) of images next week.

Never resize images using the width= and height= attributes. (Point deduction warning!)

Best Practices​

Image Best Practices​

  • Store all website image files inside the images folder at the root of the repository.

  • Use the same design best practices for image file names as URLs.

    • Use only lowercase letters in the file name.

      Tower.JPG ➞ tower.jpg

    • Never use spaces in file names / URLs.
      Use dashes/hyphens (no underscores).

      mcgraw tower.jpg ➞ mcgraw-tower.jpg

  • Do not resize images in CSS or HTML.

What's Next​

Homework 3 released yesterday.

Fri, Sept 11th, 11:59 PM: Practice Quiz 2 (Classes 4 + 5, Homework 3)

Sun, Sept 13th, 11:59 PM: Class 6, Preparation due

Mon, Sept 14th, 11:59 PM: Homework 3 due

Last updated on