Creating Web Media

High-quality media is a must for any website. But to keep visitors happy, it has to load fast and look great. Web developers need to be able to balance quality and performance for all types, including graphics, animation, video, and audio. Creating Web Media is a weekly series that will help you create, optimize, and implement media in the most modern way possible. Follow along with Chris Converse to learn new ways to integrate bitmap and vector graphics (including SVG), audio and video, and feeds from social media and streaming video sites into your sites, using CSS, HTML, and JavaScript. Check back each Thursday for a new tip and a free exercise file.

Sprite Sheet for animation with Sketch

Sprite Sheet for animation with Photoshop

Customized Markers for Google Maps

Animating SVG with CSS

Zooming hover state

Responsive SVG logo

Triggering content from a video

Animating an HTML canvas

Masking an image in SVG

Image zoom to point of interest

Inline video for iOS

Indicating download file types

Creating a sprite sheet for links

Responsive Images and the Picture Element

Responsive Images and the Image Element

Using GULP with Sketch files

Base64 encoding images

Video jump points with JavaScript

Loading animation with HTML and CSS

Fullscreen background video

Creating Customizable Graphics with CSS

Interactive inline photo gallery

Animating a sprite sheet with JavaScript

Animating a sprite sheet with CSS

Read JPG metadata with PHP

Customize your thumbnails in WordPress

Get SVG from Photoshop

Randomized animation with JavaScript

The audio element

Looping a CSS animation

Create a tiling SVG with Sketch

Create a tiling SVG with Illustrator

Responsive iFrames

Keeping it in proportion

Web graphics from InDesign

Generate assets from Photoshop in no time

Combining images with HTML canvas

Add a Twitter Feed

High Definition Graphics with Sketch

Control colors in SVG with CSS

The Video Element

SVG Symbols with Illustrator