Lecture #8

Book chapter 7

 

Web and user interface design

 

slides.com/jkohlin/web8/live

Today's problem to solve:

How to minimize
graphical content delivery over the internet
to make your site faster
and more sustainable.

Photoshop, HTML, CSS

https://www.websitecarbon.com

We will learn:

  • Choosing the optimal file format
  • Re-crispify shrunken images
  • Deliver the optimal image file
  • Responsive art direction

Why optimizing images for the web?

  • Limited mobile data plans
  • Cellular coverage (low bandwidth)
  • Speed
  • Sustainability

Image formats

.jpg

.gif

.png

.svg

jpg

quality: 8/10 (67Kb)

quality: 1/10 (8Kb)

  • Good compression for photos
  • Bad compression for text

​Use for photos

gif

max 256 colors, can be animated

256 colors (92Kb)

8 colors (18Kb)

  • Max 256 colors
  • Can be animated
  • Can have 1 transparent color

​Use for text/graphics/ animations

png

24 bit (248Kb)

8 bit, 8 colors (18Kb)

PNG-24

  • No compression
  • Can have alpha channel
  • Large file sizes

Use for text/graphics with transparency

PNG-8

  • Same as GIF
  • But no animation*

​Use for text and graphics

Shrink further: https://squoosh.app

svg

Scalable Vector Graphics

  • Vector based graphics
  • Scalable
  • Small file size*

​

Use for illustrations,
text and graphics

Apologies for the ugly drawing

shrink further: SVGOMG

WebP

The best from GIF, JPG and PNG

About: https://developers.google.com/speed/webp

Browser Support: https://caniuse.com/#feat=webp 

AVIF

Even better than WebP

but support is yet far from usable

Photoshop optimization

Photoshop re-crispify

Changing size of an image, blurs it

bicubic smoother

bicubic sharper

bilinear

bicubic

nearest neighbour

Photoshop re-crispify

Make it sharp again with Filter/unsharp mask

Low radius

High amount

Increase to remove noise

Photoshop optimization

Step #1 Select a file format

Photoshop optimization

Step #2 choose compression

Photoshop optimization

Step #3 check size vs quality

Responsive image techniques

  • prevent browsers on small screens from downloading more image data than they need
  • give high-resolution displays on fast networks, images large enough to look extra-gorgeous
  • serve differently cropped images for different contexts

What CSS

media queries can do

(change background images)

.image-container {
  background-image: url('low-res.jpg');
}

@media (min-width:720px) {
  .image-container {
    background-image: url('hi-res.jpg');
  }

}

Responsive images
with HTML

<img src="low-res.jpg" alt="" srcset="" sizes="">
<picture>
  <source srcset="" media="">
  <source srcset="" media="">
  <img src="low-res.jpg" alt="">
</picture>

A pixel is not a pixel

(pixel density - screen resolution)

1 CSS pixel or Reference pixel

4 or 9 actual pixels on the device screen

1 CSS pixel = 1pt = 1/72 inch

but first...

the srcset attribute

as supplement attribute to the img element

  • There are two use cases for the srcset attribute on <img>,
    to provide alternative image files for screens with different:
    • pixel density (resolution)
    • sizes (browser/viewport width)
  • It's up to the browser to choose which file to use. 
  • You cannot control it, only advice via descriptors

the srcset attribute

use case #1 –screen resolution alternatives

  • The value of srcset is a comma-separated list of options
  •  Each item in that list has two parts
    • the URL of an image file
    • an x-descriptor that specifies the resolution

Device-pixel-ratios

<img 
  src="images/horses_lowres.jpg" 
  alt="icelandic horses" 
  width="400" 
  srcset="images/horses1x.png 1x, 
          images/horses2x.png 2x"
>

the srcset attribute

use case #2 –screen size alternatives

  • same as previous slide but...
    •  the URL of an image file
    • a w-descriptor that specifies the width of the image file in pixels

screen size

you also need to use the sizes attribute to tell the browser the approximate size that the image will appear in the page’s layout

<img 
  src="images/horses_lowres.jpg" 
  alt="icelandic horses" 
  srcset="images/horses_small.png 400w, 
          images/horses_large.png 800w" 
  <!-- One more thing is needed. 
       See next slide -->  
>

the sizes attribute

sizes="(min-width: 480px) 50vw, (min-width: 768px) 33vw, 100vw"
  • Used with srcset if you have a w-descriptor
  • The value of sizes is a comma-separated list of options
  •  Each item in that list has two parts
    • a media query 
    • the approximate width the image will occupy

screen size

the srcset & sizes attributes

the combo for alternative image sizes based on viewport width

<img 
  src="images/horses_lowres.jpg" 
  alt="icelandic horses" 
  srcset="images/horses_small.png 400w, 
          images/horses_large.png 800w" 
  sizes=" (min-width:480px) 50vw,
          (min-width:960px) 33vw,
          100vw"
>

the picture/source element

Take control over what image gets loaded when

  • Crop an image in multiple ways for different situations.
  • decide when to use what file, based on media queries

the picture/source element

Take control over what image gets loaded when

<picture>  
  <source media="(min-width: 600px)" srcset="mountains_desktop.jpg">  
  <source media="(orientation:portrait)" srcset="mountains_portrait.jpg">  
  <img src="mountains_lowres.jpg" alt="mountains in the horizon">
</picture>

Use it for WebP - images

only browsers with support for that type will show it

<picture>
  <source srcset="WebPImage.webp" type="image/webp">
  <source srcset="creakyOldJPEG.jpg" type="image/jpeg"> 
  <img src="lowres.jpg" alt="">
</picture>

One more thing...

loading="lazy"
<img src="below_the_fold.jpg" alt="" loading="lazy">

Only load images that are about to be scrolled into view

Lab 4

Make a responsive web page

based on these wireframes

You pick the design

Till next time

Read Chapter 18