# The Picture Element

Use picture and source to offer smaller AVIF and WebP files with a JPEG backup, and to show phones a tighter crop of a photo than big screens get.

![Codey's cheat sheet for The Picture Element: Use picture and source to offer smaller AVIF and WebP files with a JPEG backup, and to show phones a tighter crop of a photo than big screens get.](https://fsdtrainingmedia.blob.core.windows.net/public/images/2026/10/4239be5e7828425ca141d821a83b3830.webp)

- Category: HTML
- Level: Journeyman
- Tags: <picture>, <source>, Art direction, AVIF, html, web-development
- Updated: October 31, 2026

Source: https://www.ask-codey.com/cheat-sheets/html-images-the-picture-element-cheat-sheet