Background & retina images · Web Dev 3

Background & retina images

Background vs. foreground

<img> is for content
The user would have difficulty understanding the page without this image
background-image is for decoration
The user wouldn’t miss the image if it didn’t load

No alternatives

Background images don’t have alt="" tags, because they aren’t important to the content

HTML

<div class="bg">
  <h1>Background images!</h1>
</div>

CSS

.bg {
  background-image: url("../images/pattern.svg");
  border: 4px solid steelblue;
}

HTML

<!--
  If the element doesn’t take up space,
  the image isn’t visible
-->
<div class="bg"></div>

CSS

.bg {
  background-image: url("../images/pattern.svg");
  border: 4px solid steelblue;
}

CSS

.thingy {
  /* Link to an image in another folder */
  background-image: url("../images/pattern.svg");

  /* Control how the image repeats: `repeat`, `no-repeat` `repeat-x` `repeat-y` */
  background-repeat: no-repeat;

  /* Change the size of the image: `width height` */
  background-size: 64px auto;

  /* Change the location of the image: `horizontal vertical` */
  background-position: left center;
}

HTML

<div class="bg">
  <h1>Gradients!</h1>
</div>

CSS

.bg {
  background-image: linear-gradient(to bottom, red, darkred);
  color: #fff;
}

Retina images

With so many screens being Hi-DPI it’s a good idea to optimize images
We need to do it in a way that doesn’t make our website slower

Retina image solutions

<img srcset="…" alt="…">
<picture>
“Compressive JPGs”

srcset is great when you want to provide different resolutions of the same graphic, like a 1× & a 2×. It’s backwards compatible because the regular src attribute should always point to the smallest image version.
<picture> is great for different croppings of images, like a square image on small screens & a rectangular image on large screens. It’s generally backwards compatible because a standard <img> tag should be nested inside.
“Compressive JPGs” are what we’ll concentrate on: making the images bigger than they’re displayed.

Compressive JPGs

Recognizes that the images are scaled down
The quality can be much lower to save download time—yet still look good

Compressive calculations

(maximum width in browser)
× 2
===============================
(image dimensions in Photoshop)

Photoshop Save for Web JPG quality: 20%–30%

Background vs. foreground

No alternatives

Retina images

Retina image solutions

Compressive JPGs

Compressive calculations

Videos & tutorials