Images formats

A group activity to practice quickly determining the correct image format and how to correctly implement the image into a website.

Go fullscreen: ⌃⌥F

Image formats

Set up

You’ll be shown an image—we’ll discuss together what format it should be exported

The checkerboard isn’t part of the images—it’s giving you helpful information

Don’t look ahead—the answers are within!

№ 1

№ 2

№ 3

№ 4

№ 5

№ 6

№ 7

№ 8

  1. SVG — simple graphic
  2. JPG — complex photograph
  3. JPG — too complex for anything else
  4. PNG — can’t be reproduced easily with SVG
  5. SVG — SVGs can have effects
  6. SVG — and animations!
  7. SVG + JPG + PNG — SVG using PNG mask & JPG image
  8. SVG + HTML + CSS — SVG for graphic, text as live text
Start

Images formats

A group activity to practice quickly determining the correct image format and how to correctly implement the image into a website.