Images 137 posts
Category: IMAGES (137 posts)
2025
My New On-Demand Image Resizing Pipeline for Eleventy
Don't get me wrong: I love using Eleventy . I am benefiting so much of its little and big conveniences and generally agreeโฆ
By Martin Hรคhnel (14 posts)
Simple Lossless Image Compression
Software engineering leader and occasional side project hacker.
By Brian Cantoni (6 posts)
Eleventy Launch
As I discussed previously, Iโve been rewriting this blog in a new tool called 11ty (aka Eleventy - the projectโs devs arenโt consistent so I wonโt be either). This is the first blog post written in the new blog engine, and the migration is complete!
By Ash Furrow (2 posts)
11ty Hacks for Fun and Performance
Alex Russell on browsers, standards, and the process of progress.
By Alex Russell (1 post)
Leveling Up Responsive Images with Eleventy Img
Walking through the fixes that led us from stretched screenshots to a lean Eleventy Img pipeline, plus a quick primer on how responsive image markup really works.
By Nicholas Clooney (5 posts)
From Dotclear to Eleventy 3
How to migrate a blog from Dotclear on to eleventy 3- Content Migration
By Alix Guillard (4 posts)
Conditional favicon in Elevยญenty using passthrough copy
Never mix up dev and prod again! (due to identical icons, at least)
By Christopher Kirk-Nielsen (14 posts)
OG Images using 11ty Screenshot Service
Solving my Image Dimension Problem with an Eleventy Transform
Software engineering leader and occasional side project hacker.
By Brian Cantoni (6 posts)
One weird trick to reduce Eleventy Image Build Times by 60%
Migrating An Eleventy Site to Bunny.Net
Chris McLeod is a software developer with over 20 years of experience. Sometimes he writes about it.
By Chris McLeod (7 posts)
How To Use eleventy-img (To Optmize Images In Eleventy) With Caching (To Keep Build Times Low) On Cloudflare Pages (Which Can't Cache Optimize Images Out Of The Box)
The Problem Cloudflare offers build caching for static site generators like Eleventy . Both are powering this blog. Great.โฆ
By Martin Hรคhnel (14 posts)
Migrating WordPress To Eleventy
Software engineering leader and occasional side project hacker.
By Brian Cantoni (6 posts)
Uploading Images For Your Eleventy Blog to Cloudflare R2 from Obsidian
At some point I will write about my Obsidian as a blog editor setup in more detail, but I just wanted to make a note here,โฆ
By Martin Hรคhnel (14 posts)
Creating proportional, equal-height image rows with CSS, 11ty, and Nunjucks
Hi, Iโm Jeremy. I build things on the web and share what I learn on my blog.
By Jeremy Robert Jones (1 post)
'Built with Eleventy' Animated 88x31
I was tagged several days ago on Mastodon, as someone was looking for a "90s-style 88x31 footer GIF" for pages built with Eleventy, and [... I] gave animating the badge a shot!
By Chris Burnell (8 posts)
A Slightly Improved Image Gallery for Eleventy
Blog about programming, scientific machine learning and the related techniques and methods.
By Valentin Pratz (2 posts)
How I built dynamic social media images in Eleventy using Cloudinary
My not very sophisticated but very understandable approach to making social media share images for a blog in Eleventy.
By Chip Cullen (2 posts)
How I write and publish blog posts in April 2025
Itโs time for documenting my current stack and process for writing and publishing a blog post.
By Juha-Matti Santala (22 posts)
Magick images
Iโve upgraded my siteโs social media preview images, using a combination of ImageMagick and Eleventy. Hereโs entirely too many words about how I made it all happen.
By Ethan Marcotte (2 posts)
Adding base64 placeholder background images to eleventy-img
Add a low-quality webp placeholder image to the HTML of your site
By Stefan Burke (4 posts)
Eleventy's Image Plugin Disk Caching Approach For HTML Transform Method
In this guide, I'll walk you through an approach of utilizing disk cache while using the HTML transform method of the eleventy image plugin. Disk cache is a persistent cache which allows you to not re-optimize every single image at every single build. However, there are some caveats which I ran
By Murtuzaali Surti (5 posts)
Extract Colors from an Image for CSS Themes
Building a personal digital music library with Eleventy and APIs
Building a personal digital music library with Eleventy and APIs
By Damian Walsh (3 posts)
11ty and OG images
11ty
Loading Pixelfed Photos with Eleventy
Eleventy, Open Graph images and fun?
Rewriting My Astro Blog with Eleventy
hi there! please enjoy my blog of things i think are interesting
By Melanie Kat (2 posts)
Build-time og:image generation with eleventy-img
O(M)G Images
How I built the Books page
I went live with my Books page a short while ago. Here's how I built it.
By Bob Monsour (20 posts)
2024
An idiot's guide to adding open graph images to an 11ty blog
Going all in with 'native' markdown
I've been typing way too much. There are simpler ways to use markdown for images and tables of contents. Here's how I'm doing it.
By Bob Monsour (20 posts)
Eleventy Transform speeds local development...a lot!
I just converted all the images on my site to use the Eleventy Transform capability in v3.0.0 and wow did it slash my local build times.
By Bob Monsour (20 posts)
Integrating Jupyter Notebook Cells in Eleventy Posts
Blog about programming, scientific machine learning and the related techniques and methods.
By Valentin Pratz (2 posts)
Here's how this is all put together
I've been fiddling with this site for the better part of a year now and now that it's fairly stable, I'm putting together what amounts to a public `README` (or a note to self). This post is that document.
By Cory Dransfeldt (46 posts)
Open Graph Metadata and Images in Eleventy Made Easy
Blog posts are meant to be shared. When sharing links, youโll often see a preview on social media and instant messengers. But how does it work and how can you do it with Eleventy?
By Sebin Nyshkim (3 posts)
Dynamic social share images using Cloudinary
Automatically generate unique Open Graph images for each page of your website
By Sia Karamalegos (13 posts)
Responsive, Self-hosted Images for Your Eleventy Blog
While you can certainly host your image files with the Git repo your Eleventy site is checked into, or add them manually after building it, neither option is ideal if you want responsive images in multiple formats to save precious bandwidth.
By Sebin Nyshkim (3 posts)
Prairie Rose Arena - Project Notes
My Decap CMS setup with 11ty hosted on Cloudflare Pages
Eleventy Images Just Got Better
Eleventy 3.0 adds a new API to optimize images anywhere on your site, without shortcodes.
By Aleksandr Hovhannisyan (14 posts)
Building a Web Version of Your Mastodon Archive with Eleventy
Turning your Mastodon archive into a web site with Eleventy
By Raymond Camden (104 posts)
Adding a Photo Stream to an Eleventy Site
Fetching all my public photos from Flickr & putting them on my page
By nonnullish (3 posts)
Twenty year celebration: Site update number three
By Peter Sefton (1 post)
Upgrading to Eleventy v3
I took some time this week to upgrade my site to the newest version of Eleventy. Here's what I learned.
By Alex Zappa (2 posts)
Upgrading to Eleventy 3.0
Netlify Large Media forces my hand.
By Mark Llobrera (7 posts)
Convert Obsidian Image Links to Nunjucks Shortcodes in Eleventy
JavaScript code to convert Obsidian image links to Nunjucks short codes.
By Amy Khar (1 post)
Eleventy Image problem with Netlify's build
I used wrong slashes in my source code, so Netlify's build step failed while using Eleventy Image.
By Sami Mรครคttรค (6 posts)
Handling images with B2, Netlify's image CDN, Hazel and Mountain Duck
I've spent a while hosting and fetching images from bunny.net when my 11ty builds. I had multiple pull zones configured and wanted to leverage bunny.net's transforms, but the pricing of $15/month per zone wasn't feasible.
By Cory Dransfeldt (46 posts)
Upgrading to Eleventy 1.0.1
Fixing a typo shaved 4 minutes off my Netlify build time
Generating Open Graph preview images for 11ty
Generated Open Graph images, without driving a browser. Here is how I made mine.
By John Hobbs (4 posts)
Automatic image pre-processing in Eleventy, Part 2
A post about the new automatic template image scaling support in Eleventy Image 4.0.0.
By Martin Gunnarsson (9 posts)
I have a Problem with Build Times
Chris McLeod is a software developer with over 20 years of experience. Sometimes he writes about it.
By Chris McLeod (7 posts)
Adding inline SVGs to Eleventy.js
JavaScript software development tips, strategies for salary negotiation, and other helpful advice for navigating software as a career.
By Jordan Kohl (8 posts)
Eleventy - Differentiate between dev and production builds with unique favicons
It is easy to mix up the dev and production versions of a website in the browser. Let's make them look unique by using different favicons.
By Rob O'Leary (13 posts)
Setting up image transforms in Eleventy
Eleventy added a transform option to process images in Eleventy v3.0.0-alpha.5 and Image v4.0.1 so, naturally, I had to set it up on my site. If you don't want to read this post, you can check out the full diff for the changes.
By Cory Dransfeldt (46 posts)
Eleventy ๐ค Immich
Check if images are available before optimizing in Eleventy
How to check if a remote image is available before attempting to optimize it using @11ty/eleventy-img.
By Cory Dransfeldt (46 posts)
Using 11ty to generate Open Graph images
Super fast responsive image loading in Eleventy
Automatically optimise and serve images by type and size in Eleventy.
By Eystein Mack Alnaes (2 posts)
Eleventy Photo Gallery
How I used JPEGs as templates in Eleventy to build a photo gallery
By Evan Sheehan (8 posts)
2023
Automatic pre-processing of post images in Eleventy
A brief description of how I set up automatic image scaling in Eleventy.
By Martin Gunnarsson (9 posts)
Generating and Caching Open Graph Images with Eleventy
How I'm caching my open graph images with eleventy-plugin-og-image instead of generating them on every build
By Robb Knight (20 posts)
Generating Open Graph Images in Eleventy
Autogenerating image previews with Eleventy filter functions and node-canvas
By nonnullish (3 posts)
Migrating from WordPress to Eleventy (part 4)
A new technique for image optimization: SVG short circuiting
A post by Zach Leatherman (zachleat)
By Zach Leatherman (55 posts)
Automatically optimize your images with Eleventy Image and CloudCannon
Websites are becoming increasingly visual and we're adding more and more image content to our sites โ but these images need to be optimized.
By Zach Leatherman (55 posts)
Building a photography website
Adding Social Preview Images To Our 11ty Blog
Twitter X recently removed headlines and descriptions from link previews, in the name of โesthetics.โ Inspired by Steph Ango, while we try not to run our business on the whims of a social media platform, this change did push us into making a change weโve been meaning to for awhile: adding social pre
By Matthew Lettini (1 post)
Making a lighthouse-fast website with a static site generator like 11ty
Creating an SSG flow to generate a highly optimized static website.
By Piotr Maliลski (3 posts)
Headless kiosk application (with Kirby CMS)
Use Kirby and 11ty to generate a headless kiosk application that works offline.
By James Steel (1 post)
Eleventy Category Images
Describes a solution I implemented in this site to add Category-specific header images to posts. I modified my eleventy-generate-category-pages module to generate additional properties for the header images and some shortcodes to add the image and attribution to the site's pages.
By John M. Wargo (45 posts)
Favicon Generation In Eleventy
Markdown Image Optimization In Eleventy
I'm equilibriumuk, a software engineer. I write about programming & computer related topics
By equilibriumuk (19 posts)
Image Optimization In Eleventy
I'm equilibriumuk, a software engineer. I write about programming & computer related topics
By equilibriumuk (19 posts)
Adding game cover art to my /now page
How I'm using Eleventy-Fetch and the Steam API to fetch recently played games, the games cover art and store page URL to display on my /now page.
By fLaMEd (10 posts)
11ty image shortcode best practice
Simon Cox outlines how to properly set up and use the 11ty image shortcode, fixing issues with high-res sources, spacing in markdown, and rendering bugs.
By Simon Cox (16 posts)
Generating Custom OpenGraph Cards with Gatsby and the 11ty Screenshot Service
By Matt Steele (3 posts)
Take your 11ty build from 1 second to 2 minutes by generating OG images
I tried to generate OG images during build and it ended up taking a long time
By Mike Street (13 posts)
Eleventy: Building an Image Gallery with CSS Grid and PhotoSwipe
Trying out CSS Gridโs new Masonry Layout, with a PhotoSwipe lightbox
By Mark Llobrera (7 posts)
2022
Creating image galleries in eleventy(11ty) with elventy-img
I wanted to have image galleries on my site and Eleventy didn't have any plugins that did this already. So I added support for it on my own.
By Prabashwara Seneviratne (1 post)
Integrating Cloudinary into Eleventy
A look at integrating Cloudinary image processing with Eleventy
By Raymond Camden (104 posts)
Manage your SVG files with Eleventy's render plugin
Using renderFile to keep things tidy.
By Christopher Kirk-Nielsen (14 posts)
Processing images linked from frontmatter with eleventy-img to use in meta tags
Reading Comic Books in the Jamstack
Adding support for digital comic books to your Jamstack site
By Raymond Camden (104 posts)
Optimizing Images with the 11ty Image Plugin
While imagery can enrich your content, it can also slow down your site if itโs not used responsibly. Learn how to use the official 11ty image plugin to create optimized and responsive images.
By Aleksandr Hovhannisyan (14 posts)
Using the Eleventy Image plugin without a central image folder
Eleventyโs official image pre-processing plugin assumes you have a single folder with all your images in it. I needed something different, and this is how I did it.
By Graham F. Scott (5 posts)
Responsive Images in Markdown with Eleventy Image
I love markdown's simplicity and convenience, but sometimes you need a little more than the default image tag. In this post, I walk through how responsive images (with the picture tag) are handled on this blog in a way that doesn't compromise the authoring experience.
By Tomi Chen (1 post)
Generating Apple Touch Icons with Eleventy
Creating the various sizes of Apple Touch Icons is one of the more tedious tasks in web development, but we can use JavaScript templates in Eleventy to automatically generate Apple Touch Icons.
By Florian Eckerstorfer (9 posts)
Easily Create Gravatar Images With Eleventy
If you're moving your Wordpress site to Eleventy, you will want to convert your Gravatar images too. Find out how easy it is using an Eleventy shortcode.
By Marc Littlemore (4 posts)
My complete blogging workflow
Here is my complete blogging workflow from how I manage ideas all the way to publishing and sharing.
By Michael Harley (14 posts)
Using a Google Photos Album in your Eleventy Site with Pipedream
Integrating a Google Photos Album in your Eleventy site with Pipedream
By Raymond Camden (104 posts)
Fetching remote images with Eleventy
Following up on last monthโs article about doing this in Hugo, we explain how to get there in a JavaScript-based SSG.
By Bryce Wray (26 posts)
2021
Setting a conditional variable in Javascript
Software developer and team lead working remotely from Richmond, VA. Loves solving problems, grilling, tinkering with Home Assistant, metal shows, and his cats.
By Michael Harley (14 posts)
Improving my automated open graph image process w/ Eleventy
Software developer and team lead working remotely from Richmond, VA. Loves solving problems, grilling, tinkering with Home Assistant, metal shows, and his cats.
By Michael Harley (14 posts)
Improving upon my image processing with Eleventy
I recently relaunched my website and I believe I have improved upon my image processing setup using eleventy-img. Here is what I did.
By Michael Harley (14 posts)
Automatically generate open graph images in Eleventy
Bernard Nijenhuis โข Front-end Developer โข Katwijk, The Netherlands โข Father of 3 kids โข Husband to 1 wife โข Owner of 2 cats
By Bernard Nijenhuis (8 posts)
Eleventy 1.0
In the changelog, Iโm documenting modifications to this site that might be of interest, but are not necessarily my own ideas or work. This time itโs about the update to Eleventy 1.0 and some things that changed while updating.
By Martin Schneider (7 posts)
Building a Simple Image Gallery with Eleventy
Using the Image plugin with Eleventy to build a simple gallery
By Raymond Camden (104 posts)
Using the Eleventy image plugin to generate images
In the changelog I'm documenting modifications to this site that might be of interest, but are not necessarily my own ideas or work.
By Martin Schneider (7 posts)
Let's Learn Eleventy (11ty) - Images
In the fourth part of the Let't Learn Eleventy series, we'll learn how use images with eleventy-img plugin
By Rares Portan (5 posts)
Automated social sharing images with Eleventy and Puppeteer
Software developer and team lead working remotely from Richmond, VA. Loves solving problems, grilling, tinkering with Home Assistant, metal shows, and his cats.
By Michael Harley (14 posts)
Setup social sharing previews, SEO, and favicons on Eleventy
This is part four of how I used 11ty to setup my personal site. This is how I setup open graph protocol, search and favicons.
By Michael Harley (14 posts)
2020
Configuring responsive and optimized images with Eleventy
Software developer and team lead working remotely from Richmond, VA. Loves solving problems, grilling, tinkering with Home Assistant, metal shows, and his cats.
By Michael Harley (14 posts)
Optimize Images in Eleventy Using Cloudinary
Learn the fundamentals behind responsive images and how to set them up in Eleventy using Cloudinary and Eleventy shortcodes
By Sia Karamalegos (13 posts)
Generating Social Sharing Images In Eleventy
Standing on the shoulders of giants makes it possible to generate social sharing images with very little code.
By Steven Hicks (1 post)
Eleventy and Responsive Images
I have created a remark plugin called @fec/remark-images that can be used with Eleventy to automatically generate responsive images.
By Florian Eckerstorfer (9 posts)
Automated Open Graph images with 11ty and Cloudinary
I wanted to find a way to dynamically generate a unique Opengraph images for each blog post automatically using post data, Cloudinary API & Eleventy
By Juan Fernandes (4 posts)
2019
Multilingual sites with Eleventy
Eleventy might not have multilingual and localisation capabilities out of the box, but you can build a pretty good setup using global data files, collections and Nunjucks as a templating language.
By Jรฉrรดme Coupรฉ (10 posts)