11ty/eleventy-img

Stars
385
Rank 111,464 (Top 3 %)
Language
JavaScript
Created over 4 years ago
Updated over 1 year ago

11ty/eleventy-img

11ty

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Utility to perform build-time image transformations.

eleventy-img

Requires Node 14.15+

Low level utility to perform build-time image transformations for both vector and raster images. Output multiple sizes, save multiple formats, cache remote images locally. Uses the sharp image processor.

You maintain full control of your HTML. Use with <picture> or <img> or CSS background-image, or others! Works great to add width and height to your images!

The full `eleventy-img` documentation is on 11ty.dev.

This is a plugin for the Eleventy static site generator.
Find more Eleventy plugins.
Please star Eleventy on GitHub, follow @eleven_ty on Twitter, and support 11ty on Open Collective

Installation

npm install --save-dev @11ty/eleventy-img

The full eleventy-img documentation is on 11ty.dev.

Tests

npm run test

We use the ava JavaScript test runner (Assertions documentation)
ℹ️ To keep tests fast, thou shalt try to avoid writing files in tests.

Community Roadmap

Top Feature Requests (Add your own votes using the 👍 reaction)
Top Bugs 😱 (Add your own votes using the 👍 reaction)
Newest Bugs 🙀

eleventy

A simpler site generator. Transforms a directory of templates (of varying types) into HTML.

webc

Single File Web Components

eleventy-base-blog

A starter repository for a blog web site using the Eleventy static site generator.

11ty-website

Documentation site for the Eleventy static site generator.

is-land

A new performance-focused way to add interactive client-side components to your web site.

eleventy-plugin-vue

Use Vue.js templates and Vue.js single file components in Eleventy.

eleventy-fetch

Utility to cache any remote asset: Image, Video, Web Font, CSS, JSON, etc

eleventy-plugin-syntaxhighlight

A pack of Eleventy plugins for syntax highlighting in Markdown, Liquid, and Nunjucks templates.

eleventy-plugin-webc

Adds support for WebC *.webc files to Eleventy

eleventy-plugin-vite

A plugin to use Vite with Eleventy

api-screenshot

A service to add web page screenshots to your Eleventy sites.

eleventy-navigation

A plugin for creating hierarchical navigation in Eleventy projects. Supports breadcrumbs too!

eleventy-dev-server

A minimal generic web-development web server.

eleventy-activity-feed

Create one centralized RSS feed for all of the content you create across the web (aggregates from Twitter, RSS, Atom, Mastodon, YouTube)

eleventy-plugin-rss

A pack of Eleventy plugins for generating an RSS feed.

demo-eleventy-serverless

Run Eleventy in a serverless function

eleventy-upgrade-help

Helper plugin when upgrading your Eleventy project to a new major version.

api-indieweb-avatar

Return an optimized avatar image from a domain name input.

eleventy-plugin-bundle

Little bundles of code, little bundles of joy.

eleventy-plugin-inclusive-language

A linter plugin to check for inclusive language in markdown files.

demo-eleventy-serverless-oauth

A demo project using OAuth to secure some of your Eleventy Serverless routes.

eleventy-base-webc

A minimalist bare-bones starter project using Eleventy and WebC.

eleventy-assets

Code-split your CSS in Eleventy.

11ty-community

api-opengraph-image

A service that returns an optimized OpenGraph Image from a domain name input.

api-sparkline

Service to return sparkline SVG images.

eleventy-plugin-directory-output

Group and sort Eleventy’s verbose output by directory (and show file size with benchmarks)

tugboat

A modern starter project using Eleventy and WebC.

eleventy-server-browsersync

An Eleventy server plugin to use Browsersync with Eleventy 2.0+.

demo-eleventy-edge

giffleball

Giffleball is a web site for Gifs

eleventy-community

A repository for Eleventy community discussions.

demo-eleventy-img-netlify-cache

A demo to show how to re-use Eleventy Image’s disk cache across Netlify builds.

eleventy-utils

Lower level internal utilities to share amongst Eleventy packages

api-img

A runtime service to optimize hosted images.

api-explorer

A simple way to browse the different runtime services provided by Eleventy

demo-webc-counter

A progressively enhanced server-rendered form-aware web component counter using WebC

demo-eleventy-js-front-matter

Demo of free-form JavaScript in front matter to populate the Data Cascade.

eleventy-benchmark

Eleventy Benchmark Speed Regression Test

11ty-logo

11ty logo built for a browser.

eleventy-dependency-tree

Returns an unordered array of local paths to dependencies of a node JavaScript file (everything it or any of its dependencies require()s)

eleventy-plugin-img

A plugin to perform runtime image transformations.

eleventy-img-cloud

Run eleventy-img in the CLOUD ⛅️

eleventy-data-transistor-fm

An Eleventy data plugin to source transistor.fm episodes.

api-generator

Find the <meta name="generator"> for a web site

demo-webc-image-compare

Server rendered image comparison web components built using WebC

lodash-custom

A custom, focused build of lodash exclusively for use internally in Eleventy.

demo-webc-shadow-dom

Demo of rendering modes of WebC components: Shadow DOM versus HTML

eleventy-base-plugin

A starter project for a Plugin for the Eleventy static site generator.

eleventy-import-disqus

A manual process to import existing exported disqus.xml content into an eleventy blog.

.github

Special README repository

demo-eleventy-upgrade-help

A test project to demonstrate usage of the eleventy-upgrade-help plugin

eleventy-sample-jstl

An Eleventy sample project using JSTL files.

demo-eleventy-from-scratch-blog

Companion code to the “6 Minutes to Build a Blog from Scratch” tutorial