Working with Images

Image Formats! #

There are several commonly used image formats on the web, each with their own purpose:

.gif Graphics Interchange Format

An early raster/bitmap format, heavily compressed with reduced palettes. It survives now because it does animations! This is the only reason to use this format, nowadays.

GIF compression is primitive and so they can quickly have huge file-sizes—and can still slow down computers (downloading and rendering), even now. Be careful with these. (If you have longer motion needs, consider a proper video element.)

Eric and I say GIF with a hard G (as in gift), and we are your instructors and are right.

.jpg Joint Photographic [Experts] Group

Ancient-but-timeless raster/bitmap format that remains a good choice for photos. JPG s can compress images down to much, much smaller file-sizes with adjustable, lossy compression ratios.

The combination of busyness and blurriness in photos tends to hide the resulting compression artifacts better than simple illustrations/graphics, so JPG lives on as a common, widely-used image format. When you are looking at a photo online, it is almost certainly a JPG.

Folks pretty much always call these jay-pegs.

.png Portable Network Graphics

Still raster/bitmap, but better than GIF s (if you don’t need animation) and JPG s (if you don’t care about file-size) as they can use lossless compression—meaning they won’t leave crunchy edges around high-contrast areas.

They also support alpha-channel (partial/smooth/aliased/masked) transparency, letting you overlay things on other backgrounds.

You’ll often use PNG s for illustrations and graphics—things with large areas of repeated colors—or where you need exact color accuracy, or the transparency. (But many of these should be SVG s, up next.) You can save photos as PNG s, but they will be much larger than JPG s. It’s a good “utility” format.

Many people use the acronym; you’ll also sometimes hear pings.

.svg Scalable Vector Graphics

Finally, a vector format! SVG s should be used for any icons, logos, or illustrations where you have access to the original source artwork for the vectors (shapes). You can also “hand” draw them yourself, in code! More on that below.

They store the vectors in code (a bit like HTML, we’ll see), and can be scaled cleanly for different sizes/resolutions. You can also target them with CSS, if they are inlined (embedded) directly into your DOM.

Everyone says S-V-G.

Sizing and Containers #

If you remember waaaay back to our HTML intro, images are a special HTML element:

		<img src="tim.jpg" alt="Tim Berners-Lee at a computer.">

	

The src attribute can point to a local image file (as it does here—a JPG in the same directory) or an external URL! The alt provides a description for accessibility/screen readers.

		<img src="tim.jpg" alt="Tim Berners-Lee at a computer." width="230" height="150">

	

object-fit #

CSS also added the object-fit and corresponding object-position properties for sizing images within their containers—as if the image file is a child of img. This is usually used when setting an img to fill a container:

• object-fit – MDN
  This used to be much harder!

aspect-ratio #

CSS also added an aspect-ratio property to control the width-to-height ratio of an element—maintaining this relationship as an element scales. (This used to be unnecessarily hard to achieve. CSS heights are always weird! You kids have it easy.)

• aspect-ratio – MDN
  So much easier now.

This is not just for images (you can use it on any element!), but commonly comes up when using them:

background-image #

You can also use images as backgrounds on elements with the background-image, background-size, and background-origin properties—particularly if you want to put something in front of them, like text.

• background-image – MDN
  Careful with these.

However this isn’t very semantic, as it blurs the content/presentation boundaries—since the image paths are moved into your CSS, and there is no alt text description available for screen-readers. So you should only use this for contextual or decorative images—not actual content:

figure / figcaption #

Speaking of semantics—HTML also has a figure element that you can use to associate an image (or other visual) with a visible figcaption description or legend. These containers formally link the meaning/context of the elements together:

• figure – MDN
  Many of your images should be in figure containers.

Responsive Images with picture / source #

With regards to their layout, you make images responsive in the same way you (should) make all your page structure responsive—by writing mobile-first front-end for their containers. You can change their flow, size, shape, and so-on—all via the box you put them in.

But using images introduces some additional considerations, going across breakpoints. You might want to serve/show different images at different sizes—whether for dimensional (file-size, bandwidth, performance) or art-direction (scale, crop) reasons. The exact same image src file is rarely ideal at both 375px and 2560px.

Our venerable <img> element added some control for this with the addition of the srcset and sizes attributes. But we think it is much easier (at least ergonomically) to skip right into using the modern picture element.

• picture – MDN
  These containers allow you to make your img responsive.

The <picture> element is a wrapper/container for an <img>, giving it alternate <source> tags that offer different image files for different scenarios. They use media-query-like syntax to change what image is loaded and displayed:

Note that you still include the <img> as a fallback—put your largest size there. We’ve found it helpful to follow the same mobile-first philosophy here as you do in the rest of your code—putting your smaller images first, and your larger lower. You can have as many <source> elements as you need—for image sizing, crops, or both.

Responsive images (like the rest of this) can get very complicated, very quickly—so always start with the basics (and mobile) first.

SVG s for UI #

SVGs are a (digital) designers best friend—mixing the adaptability and maintainability of code with the freedom and flexibility of visual design.

• Including Vector Graphics in HTML – MDN
  Good overview.

• How to Code SVG Icons by Hand
  Aleksandr Hovhannisyan goes deep on making SVGs. This is how the Pros do.

Anything you can draw in Figma (or Sketch, or Illustrator before it) lends itself to this hybrid representation. It’s common to export out .svg vector work from a design program, but you can also create (or at least edit) these files yourself—just like any other code:

		<svg width="48" height="40" viewBox="0 0 48 40" xmlns="http://www.w3.org/2000/svg">
	<line x1="2" y1="20" x2="44" y2="20" stroke="black" />
	<polyline points="26,4 44,20 26,36" fill="none" stroke="black" />
</svg>

	

In addition to being our only vector/scaleable format, SVGs have another trick up their sleeve. You can use the files as a src, like all the examples above—but their code can also be included directly into your HTML. This is called inlining (though some folks say embedding):

When targeting (or directly editing) SVG contents, note they have slightly different syntax than HTML/CSS—using fill and stroke instead of color and border, for example. Also remember that width and height attributes will fix the SVG size (just like on an img); use the viewBox attribute if you want them to scale.

A picture is often said to be worth a thousand words. Similarly, an interface is worth a thousand pictures.

Ben Shneiderman