---
title: "Optimizing Images with Eleventy on Netlify"
url: https://daily.dev/posts/optimizing-images-with-eleventy-on-netlify-pqxya44ll
source_url: https://kittygiraudel.com/2026/05/05/optimizing-images-with-11ty-on-netlify
type: article
source: "Kitty says hi."
author: "Kitty Giraudel"
published: 2026-05-05T10:47:57.324Z
updated: 2026-05-06T07:00:22.494Z
tags: ["webdev", "netlify"]
reading_time: 3
upvotes: 1
comments: 0
language: en
---

> ## Documentation Index
> Fetch the complete documentation index at: https://daily.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Optimizing Images with Eleventy on Netlify

**[Kitty says hi.](https://daily.dev/sources/kittygiraudel)** · [@kittygiraudel](https://daily.dev/kittygiraudel) · 3 min read · 1 upvotes · 0 comments

## Summary

A walkthrough of setting up image optimization on an Eleventy site hosted on Netlify. The author uses the Eleventy image transform plugin to generate avif and webp formats at multiple widths (640, 960, 1280, 1600px) with lazy loading. To avoid doubling build times, transformed images are cached in a `.cache` directory that Netlify preserves across builds, and copied to the output directory post-build. This keeps build time around 1 minute for 400+ pages and 200 images.

## Full article

daily.dev links to this article rather than hosting it. Read it at the original source: <https://kittygiraudel.com/2026/05/05/optimizing-images-with-11ty-on-netlify>

## Similar posts on daily.dev

- [Four things that made my Eleventy website faster without removing the fun](https://daily.dev/posts/four-things-that-made-my-eleventy-website-faster-without-removing-the-fun-5pnqlr22o) · Blogging and all that Malarkey · 2 upvotes · 0 comments
- [How to Optimize Your WordPress Images for Maximum Speed \(Compression \+ WebP/AVIF\)](https://daily.dev/posts/how-to-optimize-your-wordpress-images-for-maximum-speed-compression-webp-avif--aafcvphmm) · WP Mayor · 1 upvotes · 1 comments

---

Tags: [#webdev](https://daily.dev/tags/webdev), [#netlify](https://daily.dev/tags/netlify)

[View this post on daily.dev](https://daily.dev/posts/optimizing-images-with-eleventy-on-netlify-pqxya44ll)