Image Format And Size Guide

Images are usually the heaviest part of a page. Tirenoa helps in three ways: it can convert uploads to a modern format, it creates several sizes of each image so browsers pick a fitting one, and it can delay images until the visitor scrolls to them.

All options mentioned here are under Tirenoa › Options › Performance, in the Images group, unless stated otherwise.

In this article: Choose A Format · Choose A Pixel Size · Set The Quality · Convert Existing Images · Lazy Loading · Related

Upload Image Format decides what happens after the upload. With Default, images stay as they are. With WebP or AVIF, every new JPEG, PNG and GIF, and all sizes created from it, are stored in that format. If you choose AVIF and your server cannot create AVIF files, Tirenoa uses WebP instead.

When a modern format is selected, two more options appear. Keep Original Upload Images also keeps the upload and its sizes in the original format, which uses more disk space. With that enabled, Display Image Format chooses whether pages load the Modern or the Original files.

Note: SVG upload is off by default. SVG files can contain scripts, so only upload SVG files from a source you trust.

Upload an image about as large as its biggest use on the site, not the size your camera delivers.

• Full-width backgrounds and hero images: about 1920 px wide. Tirenoa offers browsers image versions up to 1920 px wide plus the full-size file.
• Images inside the content area or in columns: 1200 px wide is enough for most layouts.
• Anything larger than WordPress Big Image Size Threshold (2560 px by default) is scaled down to that value on upload. Set it to 0 to switch the limit off.

For every upload, WordPress and Tirenoa create smaller copies. Tirenoa Image Sizes lists the ones Tirenoa adds: five uncropped widths (200, 400, 600, 800 and 1200 px), which grid, masonry and blog layouts use so that a phone does not download a desktop-sized file, and cropped sizes marked (L) that are only used by legacy blog and portfolio layouts. If your site uses none of the legacy layouts, you can remove the (L) sizes to save disk space. Check your pages afterwards.

WordPress Image Quality controls the compression of the sizes created from each upload. The default is 82. When the upload format is WebP, WordPress webP Image Quality (default 86) is used for WebP files. The Performance Wizard recommends about 80 for both as a balance of file size and quality.

Note: Quality, image sizes and the size threshold only apply to images uploaded after the change. For existing images, the generated sizes have to be created again; the option descriptions link to a thumbnail regeneration plugin for this.

1. Set Upload Image Format to WebP or AVIF and save.
2. Make a backup of the site. The conversion cannot be reversed.
3. Open Tirenoa › System Status and find Convert Image Formats. The line below it shows how many images can be converted.
4. Click Convert Images and confirm. Keep the tab open until the progress line reports that the conversion is complete.

The button is inactive while the upload format is Default, when the server supports neither format, or when there is nothing to convert.

Image Lazy Loading has three settings. Tirenoa loads a transparent placeholder with the image’s dimensions and swaps in the real image shortly before it scrolls into view. WordPress uses the browser’s built-in lazy loading, which can cause problems in image carousels. None loads every image at once and is the default.

The first large image a visitor sees should not wait. With the Tirenoa method selected, the Image element and containers with a background image have a Skip Lazy Loading option. Set it to Yes for the image at the top of the page, and set the Image element’s Fetch Priority to High there.

Note: If another plugin also offers lazy loading, use only one of the two.

• Image Element – has the Skip Lazy Loading and Fetch Priority options
• Optimization Guide – all performance settings in a sensible order
• What Are Google Core Web Vitals And Why They Matter – why the top image matters most