Blazy

Provides integration with bLazy and or Intersection Observer API (IO), or Native lazy loading to lazy load and multi-serve images to save bandwidth and server requests. The user will have faster load times and save data usage if they don't browse the whole page.
A friend of mobile devices. Do not let images, especially iframes, kill mobile device traffics.

Requirements

• 3.x: core Media, and core Layout discovery for Blazy layout sub-module.
• 8.x-2.x: core Media.
• 8.x-1.x: core Image.
• 7.x: PHP 7.4+ since 1.4, core Image, libraries and one of autoloader modules, read more
• bLazy library library (>= v1.6.0):
  • Download bLazy from https://github.com/dinbror/blazy
  • Extract it as is, rename blazy-master to blazy, so the assets are at:
    /libraries/blazy/blazy.min.js
    /libraries/blazy/blazy.js
    Ensures both files are present due to branch changes.

  Since 8.x-2.6, it is no longer required. Instead included as a forked fallback to play nice between Native lazy, IO and old approaches, read more.

Versions

• 3.x: D9.3 - D11.
• 8.x-2.x+: D8.8 - D10 at most, depends on core Media, with oEmbed. Has Intersection Observer API and Native lazy loading. This branch is a transition from VEF/ VEM to Media.
• 8.x-1.x is dead branch as per VEF deprecation notice.
• 7.x requires a proper installation, see Installation. It supports optional contrib Media and Views. Has Intersection Observer API.

Installation

Manual:

Install the module as usual:

• Blazy 7.x installation with autoloader.
  Drupal 7
• Drupal 8

Composer:

Check out here.

Features

• Works absurdly fine at IE9 for Blazy 2.6+.
• Works without JavaScript within/without JavaScript browsers aka decoupled lazyload scripts since 2.6.
• Works at AMP pages. Or static/ archived sites ala Tome, HTTrack, etc.
• Supports modern Native lazyload since incubation before Firefox or core had it, or old data-[src|srcset] since eons.
• Core Media with oEmbed, Image, Responsive image. Works with <img> and <picture> elements.
• CSS background lazyloading.
• (Responsive|picture|plain) image, (remote|local) video within lightboxes (2.3+): builtin Flybox aka non-disruptive lightbox aka picture in picture window (2.17+), Magnific Popup, Colorbox, PhotoSwipe, Splidebox, etc. Be sure to read more.
• A simple effortless CSS loading indicator.
• Simple builtin shortcodes for inline galleries, hardcoded or entity-embed like, read more at /filter/tips.
• It doesn't take over all images, so it can be enabled as needed via Blazy formatters, or its supporting modules.

Additional features

• Blazy dynamic layout sub-module for Layout Builder since 3.0.1.
• Supports inline images and iframes with lightboxes via Blazy Filter. (8.x-2.x and 7.x only)
• CSS3 masonry, Grid Foundation, Flexbox, Native Grid for Views, fields, texts, Blazy Filter (8.x-2.5+)

Usages

Enable Blazy UI which can be uninstalled at production later. Go to "/admin/config/media/blazy" to manage few global options.

Blazy as field formatters

• Go to Manage display page, e.g.:
  /admin/structure/types/manage/page/display
• Find Blazy formatter under Manage display.

Blazy Filter as HTML filter (8.x-2.x and 7.x only)

• Visit /admin/config/content/formats/full_html, etc.
• Enable Blazy Filter.

Blazy Grid as Views style

• Visit /admin/structure/views.
• Add a new Blazy Grid under Format.

Programmatically:
Check out blazy.api.php for details.

Enhancements

Blazy works with fields, and Views, and supports a few enhancements.

How much can Blazy help performance?

This may vary, just a quick illustration on Blazy performance. On private benchmarks, Blazy saves a page with lots of images from 14MB to 3MB (A few jumbo slideshow images + tons of thumbnail previews), 200 http requests to 20, loading time 30s to 3s. Elevating performance grade from F/E to A/B via gtmetrix. Overall ~5-10x better. Combining Blazy with other performance tools such as AdvAgg, etc. will obviously make optimum results with less efforts.

Recommended modules

For better admin help page, either way will do:

• Markdown
• composer require league/commonmark

Troubleshootings

• Check out troubleshooting.

Upgrading from 1.x to 2.x or 3+

Upgrading from 1.x is not supported, yet.

Should you need to upgrade, to minimize issues, do it one at a time, sequential, not parallel:

1. Core Drupal
2. Core Media (auto-installed, yet install it beforehand for safety)
3. Media entity (ME)
4. Video Embed Field (VEF)
5. Blazy and sub-modules (must be parallel here and match branch numbers _if available: 2.x for 2.x, etc.)

Be sure you succeed on upgrading them before proceeding to Blazy!
Most reported issues are if you have ME and VEF. Both are optional integrations, the main reason for sequential upgrade, not Blazy's requirements.

If you don't have them, a matter of matching sub-module branches.

Sequential number is expected:
1.x -> 2.x (contains deprecated stuffs to avoid WSOD) -> 3+ (when available).
Jumping from 1.x to 3.x, bypassing 2.x, may likely cause WSOD due to added/ removed services, formatters, database updates, etc. which must be checked and performed in 2.x.

Preparations:

• Prepare for the worst! Backup aka restore point.
• Inspirations: happy or sad
• Change records: Twig, CSS and custom Breakpoints for core Responsive image. Deprecated stuffs, including formatters, are intact at 2.x to avoid WSOD till you have time to change them-- gone at 3.x, though.

Execution:

• drush updb and drush cr for each sequence. Or see update SOP. _If CLI drush updb failed, as a few reported, try Drupal UI. At best, drush cr, hardly failed.
• Only if any issues, re-visit Blazy, Field or Views UI for new options, and re-save them as needed.
• Common error causes:
  Mostly due to added/ removed services not being recognized.
  • Failing to clear cache.
  • Parallel upgrade. On the contrary, Blazy and sub-modules require parallel one.
  • Mismatched Blazy sub-module branches.
• It should (hopefully) be as easy as upgrading Drupal. Best wishes!

Upgrading from 2.x or 3+

Blazy 3.x moved Blazy UI sub-module into a sub-folder. To avoid issues, uninstall Blazy UI before upgrading to 3.x. All blazy-related sub-module UIs are safe to be uninstalled without breaking anything. Then only re-enable it if any use. Please see update SOP > WSOD if any such issues.

Only if you were still using VEF and stuck for a reason. Steps:

• Replace Blazy Video (deprecated) formatter with BVEF at Field or Views UI before upgrading to 3.x.
• Proceed with upgrade steps as outlined above, excluding Media (Entity) and VEF.

Failing to clear cache and mismatched branches are the most potential errors here on.
Potential oversight for manual FTP upgrade. For Composer, it is smart and helpful with suggestions before proceeding to not trespass/ mismatch branches.

FTP or GIT Upgrades

If using Composer locally, but using FTP or GIT (e.g. cPanel commands pulling from GIT) on productions, be sure to selectively delete (manually or with commands) old folders first, not merging the new folders with the old ones. Merging folders (normally where PHP lives like vendor, core, modules, themes, etc.) will definitely cause issues and headaches due to likely namespace re-location or organization. Composer takes care of old folder deletion, but not FTP nor GIT.

Quick FAQS

• Q: Is Blazy deprecated by core lazy loading attribute?
  A: As of this writing, native lazyloading only supports image and iframe, not DIV nor local video, etc. Depreciation might happen if core superseded or covered 90% features (CSS background, aspect ratio, lightboxes, carousel, masonry grid, fullscreen video, graceful degradation for oldies, media player etc.). All cosmetics, and the little details that Blazy has to offer with contrib integrations, colorbox, carousel, svg, animate.css, etc. are less likely entering core. Even if media players, lightboxes and carousels were in core, there are still some added values that Blazy can offer and do with contribs. A DRY buster ala CTools, in the least. Shortly, nope. Check out #3172307: Compatible or being replaced with lazy load initiative?
• Q: What is the correlation between lazy loading and Blazy Grid for texts and Views fields/ contents? Texts don't lazy load.
  A: The focus is lazy loading as noted in the Features. Around lazy loading, we have requirements to make image/ media fields displayed in a grid such as lightbox galleries. Grid for Texts and Views are just bonuses thanks to re-usability. Grid is also the recommended alternative to carousels based on some A/B testings.
• Q: I don't use Media, why required?
  A: When you add a new plain old image says at /admin/structure/types/manage/page/fields/add-field, Drupal speaks authoritatively:
  Use Media reference fields for most files, images, audio, videos, and remote media. Use File or Image reference fields when creating your own media types, or for legacy files and images created before enabling the Media module. For more information, see the Media help page.
• Q: Why are many modules dependent on Blazy?
  A: Read more 5-year-old noble intentions here. Shortly, DRY.

Known issues/ limitations

• Blazy formatter embedded/ rewritten within Views UI Rewrite results has issues, check this and that out.
• Blazy 7.x installation with autoloader.

Submitting issues or patches

Please check this out before submitting issues, or patches.