Skip to main content

69 posts in 'Images'

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.

Categories: DebuggingImagesPlugins

Handling images with B2, Netlify's image CDN, Hazel and Mountain Duck

I've spent a while hosting and fetching images from when my 11ty builds. I had multiple pull zones configured and wanted to leverage's transforms, but the pricing of $15/month per zone wasn't feasible.

Categories: How to...Images

Upgrading to Eleventy 1.0.1

If it ain’t broke, clearly you gotta fix it.

Categories: ImagesMarkdownShortcodes

Automatic image pre-processing in Eleventy, Part 2

A post about the new automatic template image scaling support in Eleventy Image 4.0.0.

Categories: ConfigurationHow to...Images

I have a Problem with Build Times

Chris McLeod is a software developer with over 20 years of experience. Sometimes he writes about it.

Categories: ImagesPerformance

Adding inline SVGs to Eleventy.js

JavaScript software development tips, strategies for salary negotiation, and other helpful advice for navigating software as a career.

Categories: How to...ImagesConfiguration

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.

Categories: ConfigurationData CascadeDeploymentImages

Setting up image transforms in Eleventy

I'm a software developer in Camarillo, California. I enjoy hanging out with my beautiful family and 3 rescue dogs, technology, automation, music, writing, reading and tv and movies.

Categories: How to...ImagesPlugins

Eleventy 🤝 Immich


Categories: CollectionsHow to...ImagesPlugins

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.

Categories: How to...ImagesWebmentions

Super fast responsive image loading in Eleventy

Automatically optimise and serve images by type and size in Eleventy.

Categories: How to...ImagesPerformancePlugins

I design and build websites, web applications, and data visualizations. I’ve been known to play fiddle from time to time and board games.

Categories: ConfigurationHow to...ImagesLayoutsImage Galleries

Automatic pre-processing of post images in Eleventy

A brief description of how I set up automatic image scaling in Eleventy.

Categories: ConfigurationHow to...ImagesPlugins

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

Categories: ConfigurationHow to...ImagesLayoutsSocial Media

Generating Open Graph Images in Eleventy

I added the og:media image tags yesterday, and the approach seems to work, so I'm going to share it in this post.

Categories: FiltersHow to...ImagesSocial Media

VSCode Pasting 11ty Images

Creating content locally like a hosted editor

Categories: How to...ImagesMarkdownPlugins

A new technique for image optimization: SVG short circuiting

A post by Zach Leatherman (zachleat)

Categories: How to...ImagesPlugins

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.

Categories: ImagesPerformancePlugins

Building a photography website

The setup for sharing my photo gallery.

Categories: How to...ImagesNavigationImage Galleries

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 preview images for our blog posts. For example, this is now what you’ll see when you share this post:

Categories: How to...ImagesSocial Media

Making a lighthouse-fast website with a static site generator like 11ty

Creating an SSG flow to generate a highly optimized static website.

Categories: ConfigurationHow to...ImagesCSS/SassSocial Media

Headless kiosk application (with Kirby CMS)

Use Kirby and 11ty to generate a headless kiosk application hat works offline.

Categories: CMSHow to...Images

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.

Categories: ImagesHow to...

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.

Categories: ImagesRemote DataHow to...Now Page

11ty image shortcode best practice

Quick reminder to myself about how to use the 11ty shortcode for images

Categories: ImagesHow to...MarkdownShortcodes

Farewell Netlify Large Media, Welcome eleventy-img

Not too complex once I had finished making my mistakes.

Categories: ImagesHow to...

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

Categories: Social MediaImages


The posts below were published before the release of Eleventy v2.0.0 (Feb 8, 2023). Information in these posts may be out of date. The current stable release is 2.0.1. Eleventy v3.0 is currently under development and available for testing.

Trying out CSS Grid’s new Masonry Layout, with a PhotoSwipe lightbox

Categories: ImagesImage Galleries

Hello 2023

Maybe I'm writing again.

Categories: How to...Images

Integrating Cloudinary into Eleventy

A look at integrating Cloudinary image processing with Eleventy

Categories: ImagesHow to...

Manage your SVG files with Eleventy's render plugin

Using renderFile to keep things tidy

Categories: PluginsImages

Processing images linked from frontmatter with eleventy-img to use in meta tags

Engineering Management, SQL, and a dash of front-end from NYC.

Categories: Front MatterImagesHow to...

Reading Comic Books in the Jamstack

Adding support for digital comic books to your Jamstack site

Categories: Global DataHow to...Images

Inlining SVGs in Eleventy

Medium post

Categories: ConfigurationHow to...Images

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.

Categories: ImagesPlugins

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.

Categories: PluginsImagesHow to...

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.

Categories: MarkdownImagesHow to...

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.

Categories: ImagesHow to...

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.

Categories: ImagesHow to...

My complete blogging workflow

Here is my complete blogging workflow from how I manage ideas all the way to publishing and sharing.

Categories: BloggingHow to...ImagesFront Matter

Using a Google Photos Album in your Eleventy Site with Pipedream

Integrating a Google Photos Album in your Eleventy site with Pipedream

Categories: ImagesHow to...Remote DataImage Galleries

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.

Categories: ImagesRemote Data


The posts below were published before the release of Eleventy v1.0.0 (Jan 9, 2022). Information in these posts may be out of date. The current stable release is 2.0.1. Eleventy v3.0 is currently under development and available for testing.

Automatically Generated Social Media Images with HTML, CSS, Eleventy & Puppeteer

Prettier previews, built with many moving parts.

Categories: ImagesHow to...

Setting a conditional variable in Javascript

Power Platform Developer and all around cool guy

Categories: ImagesHow to...

Improving my automated open graph image process w/ Eleventy

Power Platform Developer and all around cool guy

Categories: ImagesSocial MediaHow to...

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.

Categories: ImagesHow to...

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

Categories: FiltersHow to...ImagesSocial Media

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.

Categories: ImagesSocial MediaHow to...

Using Eleventy’s official image plugin

The what, why, and how of Eleventy Image.

Categories: ImagesHow to...

Using the Image plugin with Eleventy to build a simple gallery

Categories: ImagesHow to...PluginsConfigurationImage Galleries

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.

Categories: ImagesHow to...

Don't shut down your business! Instead use Eleventy Image

A post by Zach Leatherman (zachleat)

Categories: Images

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

Categories: ImagesHow to...

An async function walks into a loop.

A solution for async functionality in template loops, using `eleventy-image` as an example, some basics about JavaScript loops, and debugging advice. All in what should be a short note.

Categories: Images

Automated social sharing images with Eleventy and Puppeteer

Power Platform Developer and all around cool guy

Categories: How to...Images

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.

Categories: Social MediaImagesHow to...

Maximally optimizing image loading for the web

In this post I'll outline 8 image loading optimization techniques to minimize both the bandwidth used for loading images on the web and the...

Categories: ImagesHow to...

Configuring responsive and optimized images with Eleventy

Power Platform Developer and all around cool guy

Categories: ImagesHow to...Plugins

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

Categories: Images

Generating Social Sharing Images In Eleventy

Standing on the shoulders of giants makes it possible to generate social sharing images with very little code.

Categories: Social MediaImagesHow to...

Responsive Images with Eleventy & Sharp

High school student and open source developer.

Categories: ImagesHow to...

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.

Categories: Images

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

Categories: Social MediaImagesHow to...

Tips for rolling your own lazy loading

You may have heard (or even issued the call) that “we can just use lazy loading!” when looking for a way to slim down a particularly heavy web page.

Categories: ImagesHow to...

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.

Categories: ImagesHow to...

Get the blog by email (or RSS)

Powered by Buttondown