Step by step

Screenshot walkthroughs

Four practical tutorials, each with real interface screenshots taken during testing. These are general guides, not instructions written for one specific CMS, since exact menu names shift between platforms and versions.

Specialist navigating a content management system media settings panel on a laptop screen
Locating image format and lazy loading settings inside a CMS media panel

Walkthrough 1

Compressing an image without visible quality loss

  1. Open a free browser-based compressor

    Squoosh, built by the Chrome team, runs entirely in the browser with no upload account required. Open it and drag your source image onto the page.

  2. Compare the split-screen preview

    Squoosh shows the original on one side and the compressed result on the other, at matching zoom levels. Zoom into detailed areas like fine text or textured surfaces where compression artifacts show first.

  3. Adjust the quality slider gradually

    Start around 80 and move down in small increments while watching the preview and the file size counter. Stop as soon as you notice blurring, blockiness, or color banding in the preview, and step back up slightly.

  4. Check the resulting file size drop

    Squoosh displays the percentage reduction next to the preview. A typical photograph often shrinks substantially at this stage while remaining visually indistinguishable from the original at normal viewing sizes.

  5. Download and upload to your CMS

    Save the compressed file and replace the original in your media library. Some CMS platforms will run their own additional compression on top, which is generally fine and rarely stacks in a way that causes visible loss.

Walkthrough 2

Converting to WebP or AVIF and checking CMS support

  1. Check if your CMS already converts automatically

    Upload one test image through your normal media library and inspect the file it produces, either through the media details panel or by viewing the image URL directly. If the extension already reads .webp or .avif, conversion is likely already handled for you.

  2. Look in performance or media settings

    Search your CMS settings for terms like "next-gen formats," "modern image formats," or "WebP conversion." Many platforms bundle this into a performance or media optimization section rather than the main image settings.

  3. Convert manually with a free tool if needed

    If your CMS has no built-in option, Squoosh and GIMP can both export directly to WebP. AVIF export support varies more by tool version, so check the export format list before assuming it is available.

  4. Confirm a fallback exists for older browsers

    Modern setups use the <picture> element to offer AVIF or WebP first, falling back to JPEG automatically if a browser does not support the newer format. Most CMS plugins that add this feature handle the fallback without extra configuration.

What if my CMS shows an error converting to AVIF?

This is usually a server-side encoding limitation rather than a setting you can fix from the CMS interface, since AVIF encoding requires more processing time and specific server libraries. In that case, WebP remains a solid fallback with far broader server support.

Walkthrough 3

Writing alt text inside your CMS editor

  1. Open the image's media details panel

    Most CMS platforms show an "Alt Text" or "Alternative Text" field either in the media library grid view or when editing an image block directly on the page.

  2. Describe what the image shows

    Write one clear sentence describing the visible content and its relevance to the surrounding text. Avoid starting with "image of" since screen readers already announce that context.

  3. Leave decorative images blank on purpose

    For purely decorative graphics, leave the alt field empty rather than filling it with a description. An empty alt attribute tells assistive technology to skip past the image.

  4. Save and preview with a screen reader if possible

    Built-in screen readers exist on most operating systems (VoiceOver on macOS, Narrator on Windows) and can be turned on briefly to hear how your alt text sounds in context.

Walkthrough 4

Enabling lazy loading correctly

  1. Find the lazy loading setting

    Search your CMS performance or media settings for "lazy load" or "lazy loading images." Many platforms enable this globally by default in current versions.

  2. Identify your above-the-fold images

    Open your homepage and any key landing pages, and note which image is visible without scrolling, typically a hero banner or featured photo.

  3. Exclude that image from lazy loading

    Most CMS block editors let you toggle lazy loading per image or per block. Set the hero image to load eagerly so it is not delayed and does not hurt Largest Contentful Paint.

  4. Confirm width and height are set

    Check that every image, lazy loaded or not, has explicit width and height attributes or a CSS aspect-ratio applied, so the browser reserves the correct space and avoids layout shift while the image loads.

  5. Re-run a Core Web Vitals check

    Use a browser's built-in Lighthouse panel or a public Core Web Vitals report to confirm Largest Contentful Paint and Cumulative Layout Shift after making these changes.

Questions about a specific step?

Check the FAQ first, or reach out directly if something in a walkthrough was unclear.

Read the FAQ