Download the PHP package jacerider/neo_image without Composer

CONTENTS OF THIS FILE

• Introduction
• Requirements
• Installation
• Twig
• Priority (LCP images)
• Responsive Image Generator
• Image Style Generator
• Image Style Naming Conventions

INTRODUCTION

Improved responsive image handler along with other image enhancements.

REQUIREMENTS

This module's requirements are the ones declared in neo_image.info.yml, and nothing else.

Modern image formats come from Drupal core, automatically: a format conversion effect is appended to every image style this module generates - AVIF where the image toolkit supports it, WebP everywhere else. No contributed module is involved.

The webp contrib module is optional. Nothing this module produces depends on it. When it is installed, it is used for one thing only: deleting the webp sidecar files it leaves beside a derivative when that derivative is flushed.

• https://www.drupal.org/project/webp

INSTALLATION

Install as you would normally install a contributed Drupal module. Visit https://www.drupal.org/node/1897420 for further information.

TWIG

There are 3 twig helpers available:

Single image

Responsive image

PRIORITY (LCP IMAGES)

Give the image most likely to be the page's largest contentful paint -- a hero, the first image above the fold -- the priority option. It goes beside the dimensions in either options shape, and either Twig function takes it:

With priority: true:

• the <img> gets loading="eager", fetchpriority="high" and decoding="async", replacing any loading the caller passed;
• the page head gets a <link rel="preload" as="image" fetchpriority="high"> for each image the render can paint: one per <source> of a <picture> plus one for its <img>, each limited by media to the viewports where that image is the one painted. Each viewport matches exactly one, so the browser downloads one image, early, and it is the image it then paints.

The links are attached (#attached['html_head']), not printed, so they come back with a render-cached copy of whatever contains the image. Leave the option out -- or pass priority: false -- and the output is what it always was. Use it on one image per page: every priority image competes for the same early bandwidth.

From PHP, set #priority on the render array either render builds:

Granting priority without editing a template

Code that knows which part of a page comes first, but not which image inside it renders first, can grant priority instead. The first neo_image render after the grant takes it, unless that render passed priority: false, which leaves the grant for the next image:

Always withdraw once that part has rendered, so an unclaimed grant cannot reach an image further down the page. A render served from the render cache claims nothing, so decide where to grant from something the cache cannot skip, and make the containing cache entry vary on that decision.

RESPONSIVE IMAGE GENERATOR

Build a picture element that provides breakpoint media query images. Its webp support comes from the format conversion effect appended to every generated image style, not from the picture element itself.

From Media or File Entity

IMAGE STYLE GENERATOR

Build a dynamic image style that will utilize on-demand effects.

IMAGE STYLE NAMING CONVENTIONS

Image styles are automatically created based on the effects added to a given style. The style names are such that they are a short as possible and URL-safe.

Image Effect Conversion

Property Conversion

Anchor Conversion