HTML Elements

Page 5

Image Techniques

Introduction WebP WebP Markup Picture HTML Tag Picture Tag Markup Summary

United States: Animated States: WebP Format — Animated United States: WebP Format

Introduction

This page discusses image file options for the Web including the WebP format and the picture HTML tag. Learn how to prepare an animated WebP file with the GIMP application. Learn to display one image at different resolutions, based on screen orientation with the picture tag. The next page demonstrates and discusses the APNG file format.

WebP

Most people are familiar with animated GIF files. They're versatile, lightweight and include transparency. However animated GIFs require indexed, or 8 bit files. Use the search icon above, to find the Indexed Color Animation Tutorial, on this Website, for indexed file details.

Animated WebP files are also lightweight and include transparency yet they support 24 bit depth plus 8 bits of alpha transparency. The higher the bit depth, the more colors and levels of transparency display. However often the higher the bit depth the larger the file and longer it takes to download.

I compared the animated WebP United States file size to the animated GIF United States file sizes. The WebP file size is 125KB. The animated GIF file size is 100KB. Considering the WebP displays three times the range of colors and transparency, WebP seems to have very good compression.

Prepare the WebP File

If you don't have access to imaging software that prepares animated WebP files, then install free GIMP from GNU Image Manipulation. The following bulleted list briefly explains the steps to prepare a WebP animation with GIMP.

If the animation, above, doesn't run, then your browser doesn't support the WebP format. However I assigned the animation to run one loop each time you load the page. Therefore you might have to reload this Web page to see the animation.

Steps to Prepare Animated WebP

Select File > Open Image As Layers. Select every image you want in your animation. Optionally create unique layers, within GIMP, for animation.
See your animation: From the toolbar select Filters > Animations > Playback.
Save your animation: Select File > Export, then append the filename with webp.
A dialog displays with many settings. Select Animation, and any other options you want.
Select or deselect Loop Forever. If you don't select Loop Forever, then the animation displays once, per page load.
Display the WebP file with the following HTML.

WebP Markup

The following markup displays the mapstates-once.webp animation, which just loops once. I deselected Loop Forever from the GIMP dialog. Otherwise the animation will continually run. The animation's wrapped within a figure tag and includes a caption.

<figure>

<img 
src="mapstates-once.webp" 
alt="Animated United States: WebP Format" 
>

<figcaption>
Animated United States: WebP Format
</figcaption>

</figure>

Other Options

A Photoshop plugin exists to save WebP format animations as well.

Graphics Source

Graphics for Animated United States were prepared from 7Thunders.biz python subdomain's interactive crime map, and After Effects, then composited with GIMP. Use the search icon, above, to find the US States: Crime Data Map interactive example.

Picture HTML Tag

The picture HTML tag allows Web developers to display images based on various dimension options. This allows devices with smaller screens to show lower resolution images, and therefore download faster. Devices with larger screens can show larger resolution images.

In other words, you can tell the browser to display image a within a specific screen width, image b at another width and image c at the widest width. It's good practice to always include one default img tag for those browsers that don't support the picture tag yet.

You can specify media queries. In the following example the browser displays blue, when the screen's in landscape orientation and gold when then screen's in portrait mode. If the browser doesn't support the picture tag, then the browser displays blue-green.

The picture tag is not recommended for changing the image people will see, but rather for changing the dimensions of a scaled down, or scaled up, version of the same image. However, I used different colors, to highlight the purpose of the picture tag here. If you're viewing on a desktop computer, resize your browser window into tall and thin or wide and short dimensions. The color you see should change. If you're viewing on a mobile device, rotate the device to see the color change.

Picture Tag Markup

HTML markup for the previous picture tag displays below.

<picture>

<source 
class="ex"  
media="(orientation: landscape)" 
srcset="color-blue.png" 
title="Blue Color"
>

<source 
class="ex"  
media="(orientation: portrait)" 
srcset="color-gold.png" 
title="Gold Color"
>

<img 
class="ex"  
src="color-blue-green.png" 
alt="Blue Green Color"
>

</picture>

Many more options exist for the picture tag including various other media queries and size specifications.

Summary

This page discussed image file options for the Web including the WebP format and the picture HTML tag. You learned how to prepare an animated WebP file with the GIMP application. You saw how to display one image at different resolutions, based on screen orientation with the picture tag. The next page demonstrates and discusses the APNG file format.