O'Reilly logo
live online training icon Live Online training

Deconstructing Images for the Web

Using CSS and SVG for Optimized Web Graphics

Christopher Schmitt

Images took the internet from a scientific paper-sharing community to the vibrant global visual medium we know today. However, as our web pages have matured, their file sizes have grown too, from an average of 702 KB in the ’90s to 2.3 MB today. What’s responsible for this file-size bloat? Images.

Join expert web-builder Christopher Schmitt—author of CSS Cookbook and Designing Web Mobile Graphics—as he shows you how to make the most out of images with CSS and SVC. In just four hours, he’ll cover image optimization and compression, CSS and SVC filters, backgrounds and borders, and more. Through a mix of lectures and hands-on exercises, you’ll learn why images are clogging up the mobile web and what you can do to fix it.

What you'll learn-and how you can apply it

By the end of this live, online course, you’ll understand:

  • How to leverage image compression algorithms to create compact files with high visual impact
  • How SVG and CSS filters work
  • How to use CSS to provide native browser visual effects

And you’ll be able to:

  • Modify images using only web technologies
  • Chain SVG filters to create complex visual effects

This training course is for you because...

  • You’re a web designer who wants to better understand images on the frontend to make your site faster and implement better visual effects.
  • You’re a web developer with experience in CSS, HTML, and JavaScript who needs to streamline the images on your site.
  • You’re a web performance engineer who wants to understand how image compression, CSS, and SVG can make your site faster.

Prerequisites

  • A working knowledge of HTML, CSS, and SVG
  • Familiarity with digital imaging software (e.g., Photoshop)

Recommended preparation:

Using SVG with CSS3 and HTML5 (book)

High Performance Images (book)

Additional recommended training:

SVG Fundamentals & Animation: Making and Moving Modern Vector Graphics (training course)

Materials and downloads needed:

  • A desktop, laptop, or other connected machine with a modern browser and the following software installed:

  • SVGO

  • ImageOptim (for Mac users)

  • PNGGauntlet (for PC users)

  • Triage (for Linux users)

  • Adobe Photoshop

About your instructor

  • Christopher Schmitt is an award-winning designer and author of several books on web and graphic design. He is a popular international speaker with more than two decades of experience in web design, yet endlessly curious and a relentless tinkerer. Christopher is always looking for ways to help educate and empower people about web publishing and Internet culture.

Schedule

The timeframes are only estimates and may vary according to how the class is progressing

Web performance (40 minutes)

  • Lecture: The competitive advantage of being quick on the web. How to set up a performance budget to see if images are causing file-size bloat, how to optimize images, and how HTML can help serve the right image for the right mobile device
  • Exercise: Create a performance budget for your site with guidance from the instructor

Image optimization (40 minutes)

  • Lecture: How to compress images while retaining maximum visual image integrity; why design trends, concepts, and techniques that leverage these images require that we understand the compression method for each image format.
  • Exercise: Use free image-optimization applications to try to bring images to the lowest file size.

CSS filters and blends (40 minutes)

  • Lecture: How CSS can be used to tint images and how to use Photoshop-like blending modes without using Photoshop for faster prototyping
  • Exercise: Add CSS properties and values to modify images

Break (20 minutes)

CSS borders and backgrounds (40 minutes)

  • Lecture: Showcasing CSS border effects, from the common (rounded corners) to the not so common (border frames and more)
  • Exercise: Use CSS properties to add border and image effects to images

SVG filters (40 minutes)

  • Lecture: How to enhance your optimized images with SVG filter effects
  • Hands-on demo: Use premade SVG filters to modify images
  • Exercise: Use SVG filter code examples to create stylized images