How To Optimize Images With Craft CMS

Prepare Images for Optimization Before Uploading to Craft CMS

Use Image Editing Tools to Optimize Originals

When preparing images for a Craft CMS website, it's important to optimize the original source files before uploading them. This will ensure the images load quickly and look crisp on the site. Using image editing software like Photoshop or GIMP, you can resize, compress, and convert the formats of the originals to ready them for the web.

First, check the pixel dimensions of the original photo or graphic. Resize the image so its longest side matches the maximum dimensions it will be displayed at on the site. Don't just shrink the file size smaller; actually resample the image to output smaller pixel dimensions. This reduces unnecessary image data and results in much smaller file sizes.

Next, run the image through compression and optimization tools in your editing software. For photos, use JPEG compression. The optimal quality setting will reduce file size while retaining high visual quality. For more graphical images, lossless PNG compression works well.

Finally, convert or export the optimized images to web-ready formats - JPEG is ideal for photos, PNG for graphics with transparency, and WebP for maximum compression with broad browser support. By outputting optimized versions from the original files first, you avoid excess image data and quality loss from repetitive compression.

Export Web-Ready JPEG and WebP Versions

When preparing images for your Craft site, exporting optimized JPEG and WebP versions of your source files can maximize quality and compression before uploading.

JPEG is ideal for photos, as its compression algorithm focuses on smooth colour and gradient representation over sharp edges. Export JPEG versions of your photos at a quality between 60-80% - this hits the sweet spot for visual quality and file size optimization for the web.

For graphics like logos, WebP often compresses much better than PNG while retaining sharp edges and transparency. WebP also has good browser support. Export your WebP images with lossless compression. This option avoids artefacts from aggressive compression levels.

In your editing software, be sure to set the optimal resolution when exporting JPEG and WebP versions as well. Images should be sized based on their maximum display dimensions on the site, not necessarily their original dimensions. Exporting a large image to a web format without resizing first can lead to excess file size without benefit.

By taking the time to export optimized web-ready JPEG and WebP versions before uploading to Craft, you avoid compressing images repeatedly and streamline site performance.

Resize Images to Max Display Dimensions

When preparing images for a Craft CMS site, resizing them appropriately for their maximum display size before uploading is key. This minimizes file size without losing quality, improving site speed.

First, analyze how each image will be displayed on the site. A large hero image may need dimensions like 1920x1080, while a smaller thumbnail may only need 320x240. Check the exact pixel width and height the image will render in the Craft templates.

Then in your image editor, resize the image to match those maximum display dimensions as closely as possible before export and upload. Don't just shrink the file size smaller without adjusting the pixel dimensions. This will result in a jagged, blurry, or pixelated image rendering smaller than its native resolution.

Be sure to resize proportionally, so the image isn't warped or stretched. Typically this means adjusting the width to the needed width, then letting the height adjust automatically to preserve the original aspect ratio.

For minor differences, like a needed height of 225 but the resized height being 240, err on the side of slightly larger dimensions. This retains detail when resized down. But avoid significantly larger dimensions that waste file size.

By taking the time to resize to the needed display dimensions first, images will look crisp and load fast on your Craft site without wasted image data. Just be sure to note the dimensions of your optimized exports to set image transforms accordingly.

Get Started with Automatic Image Optimization in Craft CMS

Install and Configure ImageOptimizer Plugin

One of the easiest ways to optimize images in Craft CMS is by installing the ImageOptimizer plugin. This handy plugin can shave kilobytes off your image sizes with just a few clicks.

First, install ImageOptimizer via Composer. From your project's root directory in terminal, run:

composer require servd/imageoptimizer

Next, go to Settings → Plugins in the Craft control panel, and install the plugin.

Now it's time to configure the settings. Under Image Optimizer in settings, decide whether you want lossless or lossy optimization methods. Lossless optimizes file size while maintaining 100% quality. Lossy uses compression that can degrade quality slightly but achieve much smaller files.

You can set universal settings here that apply to all images by default. But you can also override on a per-image basis using the Image Optimizer transform. Dial in the exact settings for each image's needs.

Lossless vs Lossy Optimization Methods

When configuring ImageOptimizer for Craft CMS, you'll need to choose between lossless and lossy optimization methods. Here's an overview of each:

Lossless methods like PNG and SVG compression maintain 100% of the original image quality while reducing file size through metadata removal and optimizing the storage format. This works well for logos, icons, and other images with crisp lines and edges.

Lossy methods like JPEG and WebP compression use algorithms that degrade quality slightly in order to achieve much smaller file sizes. Some data is discarded to minimize file size. This is ideal for photographs without sharp edges.

For photos, lossy JPEG optimization at 80% quality or below will look great while reducing file size significantly. For graphics, icons, and logos, lossless PNG or SVG optimization maintains quality while still trimming filesize.

Test different settings and methods on your actual images to find the optimal balance of size and quality. ImageOptimizer makes this easy to tweak and customize!

Recommended Settings for Best Results

To get the most out of ImageOptimizer for lossy image optimization in Craft, here are some recommended settings and tips:

• Use JPEG quality between 60-80% for best visual quality and compression. Going below 60% can often introduce too much distortion.

• Convert to WebP format for huge savings compared to JPEG with minimal visible quality loss.

• Resize images proportionally first for the fastest load times before running optimization.

• Downsample ultra high-res images to an appropriate max resolution before optimizing.

• Use the Picturefill transform to automatically output multiple formats and resolutions.

• Enable the Debug transform to inspect file sizes before and after optimizing.

• Configure universal default settings, but use the transform overrides for per-image tweaks.

With some tweaking and experimentation, you can dial in stellar lossy image optimization in Craft CMS using ImageOptimizer. Follow these tips and inspect file sizes in debug mode to nail down ideal settings.

Optimize Existing Images in Craft CMS

Use Asset Utilities to Retroactively Optimize

If you already have lots of images uploaded to your Craft CMS site, don't worry - you can still optimize them after the fact using Craft's handy asset utilities.

The Assets tool in the Craft control panel includes utilities for retroactively resizing, cropping, and running optimizations on previously uploaded asset files.

To use them, first select the assets you want to optimize in the file manager. Then click the Utilities button at the top. This will bring up options for all kinds of retroactive optimizations.

The Image Editor utility lets you crop and resize batches of images at once. Use this to bulk resize existing assets to their maximum needed display dimensions for faster pages.

The Image Optimize utility will run lossless and lossy optimization on selected image assets in bulk. Configure the quality settings and optimization methods you want to be applied.

These utilities make it easy to bring older, unoptimized images up to speed right within the Craft CMS control panel. No need to go back and re-export each original!

Prioritize Unoptimized Images First

When tackling image optimization for a site already running Craft CMS, it's smart to prioritize unoptimized images first.

Sort your assets by file size to easily see the largest, least-optimized images. Working to optimize these assets first will give you the biggest initial boost in page load speeds after re-saving.

You can also sort by image dimensions to find assets that haven't been resized for their display dimensions yet. Retroactively resizing these to specifications will improve speed.

Newly uploaded images should already have your optimization workflow applied. But older assets will benefit the most from utilities like bulk resizing and compression. Focus here first.

On-Demand Image Optimization Options

Beyond the bulk utilities in Craft's Assets tool, you have a couple of options for selectively optimizing individual images on-demand:

The Asset Editor in the control panel lets you run the Image Optimizer transform on any previously uploaded asset. Use this for quick lossy or lossless re-optimization when needed.

Craft's REST API can also run asset transforms. Hit the Optimizer API endpoint on select assets programmatically when needed.

Use these options judiciously to tune existing assets. But for best results, default all new uploads to apply your complete optimization workflow automatically on upload.

With some bulk retroactive optimization of old assets combined with defaults for new assets, you can get every image on your Craft CMS site up to speed for fast delivery and crisp quality. Just be sure to A/B test any lossy changes before publishing!

Set Default Image Optimizations for New Uploads

Apply Default Settings to Asset Volumes

One of the best practices for optimizing images in Craft CMS is to set default ImageOptimizer settings for your asset volumes. This ensures any new uploads are automatically optimized on upload.

In the Craft control panel, navigate to Settings → Assets. Here you can select your asset volumes, and edit the Image Optimizer settings applied to that volume by default.

Use the toggle to enable ImageOptimizer for the volume. Then select your preferred optimization method - lossless or lossy. Adjust the quality, auto-rotate, strip metadata, and other options to your liking.

Any images newly uploaded to that volume will have your default ImageOptimizer settings applied automatically at upload. No extra steps needed!

You can still override defaults on a per-asset basis using transforms. But this sets the baseline optimization for effortless results.

Ensure New Uploads are Optimized

Setting default ImageOptimizer settings for your asset volumes in Craft CMS means you can rest assured that new image uploads are automatically optimized.

Without volume defaults, it's easy to forget to manually optimize each new image uploaded in the control panel or via API, Bots, etc. Unoptimized images that slip through the cracks bloat page size.

But with your preferred ImageOptimizer settings applied to the volume, every new JPG, PNG, SVG, etc added to that volume gets optimized right on upload.

No need to run utilities on batches of new images later. No chance of missing optimizations. Just smooth automated optimization applied to all new uploads.

Supported Default Settings

Craft CMS lets you set several ImageOptimizer settings as defaults for an asset volume, ensuring new uploads are optimized:

• Quality compression percentage for lossy methods like JPEG and WebP.

• Lossless optimization methods like PNG and SVG crushing.

• Auto rotation based on EXIF data.

• Stripping of unnecessary EXIF and metadata.

• Default resize and resolution settings.

• Output formats like JPEG, WebP, PNG conversion.

• Sharpening filters and effects.

Get your asset volumes dialled in with your ideal set of default ImageOptimizer settings in Craft, and you can rest easy knowing new uploads will be primed for the web automatically.

Output Optimized Image Transforms in Craft CMS

Leverage Image Transform Tag

Once you've optimized your images in Craft CMS, you'll want to make sure you utilise the {% image %} tag in your templates to output properly sized and optimized transforms.

The image transform tag automatically generates resized, formatted, and optimized image variants based on the parameters you specify right in the template code.

For example:

{% image myImage, width: 500, format: 'webp' %}

This outputs a WebP version of myImage resized and optimized to 500px wide. The transform is generated on the fly and cached for efficient delivery.

Use width, height, quality, and format parameters to tailor image transforms for each unique use case and layout in your templates. Specify sizes and formats that match the display dimensions needed.

The image tag does all the work of resizing, optimizing, and converting the image for fast delivery.

Configure WebP and JPEG Variants

One optimization best practice is to configure both WebP and JPEG variants for your image transforms in Craft templates:

{% set image = craft.assets.id(123) %}

{% image image,

transforms: {

webp: {

format: 'webp',

quality: 80

},

jpg: {

format: 'jpg',

quality: 80

}

}

%}

This generates both a WebP and JPEG variant optimized for web delivery. Configure their compression levels for the best balance of size and quality.

Outputting multiple formats means smaller file sizes for supported browsers, and fallback support for those that don't support WebP yet.

Specify Image Sizes and Dimensions

When outputting image transforms in Craft CMS, be sure to specify optimized sizes and dimensions:

{% image image,

width: 800,

height: 600,

quality: 80

%}

This generates an image variant resized to 800x600 pixels, with 80% JPEG compression optimized for that display size.

Avoid overly large dimensions that create unneeded file size. But don't go too small and lose detail on larger displays.

You can also create optimized variants for different screen sizes like mobile, tablet and desktop. Or use Craft's built-in {% set %} tag for predefined sizes.

Precisely configured transforms ensure fast load times and crisp image quality.

Optimize Critical Above-the-Fold Images

Prioritize Hero and Top Images

When optimizing images for your Craft CMS website, prioritizing "above-the-fold" content seen first without scrolling is crucial for performance.

Hero banner images, navigation and header logos, featured photos, and other key visuals visible immediately should be optimized for priority loading. These drive the initial impression and loading perception.

Start by manually optimizing top hero and header images separately. Apply aggressive yet lossless settings beyond default optimizations to minimize critical file sizes.

Shave additional kilobytes off above-the-fold images to improve the initial loading experience even if it requires more manual intervention. This pays dividends in terms of performance.

Manually Optimize for Fastest Loading

For the fastest loading, manually optimize your most critical above-the-fold images in Craft CMS beyond just default methods.

Default image optimizations will cover all your assets. But take it a step further for hero banners, logos, and key images visible immediately on page load.

After applying automated default optimizations, manually inspect and tweak the most important images. Adjust the quality settings, enable additional sharpening, and convert formats to find further file size savings.

Though more hands-on, manual fine-tuning of your most visible images will noticeably improve your site's initial loading time and perception for users.

High Impact Optimization Opportunities

Some examples of high-impact image optimization opportunities for drastically improving loading speeds in Craft CMS:

• Losslessly optimize intricate hero banner images and large photos.

• Convert simple logos and icons to SVG format for sharpness and compression.

• Lower JPEG quality slightly more aggressively on key first-seen images.

• Enable additional sharpening filters selectively on critical above-the-fold images.

• Downsample extremely oversized images displayed prominently first.

With selective manual optimization beyond defaults on your most visible images, you can significantly improve the perceived load time of your Craft CMS site.

Enhance Performance with Image Caching

Enable Caching for Optimized Assets

Once you have images properly optimized in Craft CMS, enabling caching provides another performance boost by storing rendered versions in memory.

In the control panel, go to Settings → General and check the “Cache Images” box. This caches image transforms generated from the {% cache %} tag.

You can also enable caching specifically for Image Optimizer by installing the Optimizer Cache plugin. This further caches optimized images after processing.

Caching stores optimized transformed image files for faster retrieval on subsequent requests. It avoids needing to re-process and resize each image transform on every page load.

Be sure caching is enabled to maximize the performance gains of your optimized image workflow in Craft.

Set Optimal Caching Lifetimes

When caching optimized images in Craft, set optimal caching lifetimes by balancing performance and cache invalidation needs:

• Longer lifetimes improve speed by reducing cache expiration and reprocessing. But changes won't be reflected quickly.

• Shorter lifetimes ensure new images appear faster. But cache hits are reduced, hurting performance.

For most Craft sites, image caching lifetimes between 1-4 weeks work well. Test different durations and see the impact on your image transform reprocessing rates.

Invalidate image caches strategically when assets change significantly. But leverage long lifetimes for static images like logos and hero graphics.

Finding the right caching lifetime improves both site speed and cache invalidation responsiveness.

Image CDNs for Faster Delivery

Using a content delivery network (CDN) to distribute optimized images globally can significantly improve performance for Craft CMS sites.

A CDN acts as a globally distributed cache layer for fast image delivery around the world. Image requests get served from the nearest edge server, avoiding round trips to your origin servers.

Most CDNs also include automatic image optimization. Enable this to work in conjunction with your Craft optimizations for maximum compressed sizes.

With optimized images cached and delivered through a CDN edge network, you unlock speed benefits like:

• Faster response times for image requests.

• Reduced origin server workload and bandwidth costs.

• Ability to scale image delivery easily.

So implement a CDN for globally optimized image delivery and take site performance up another notch!