Responsive and NextGen Images in Drupal 8

1. Who knows what the core Responsive Image module is?
2. Who uses core’s Responsive Image module?
3. Who uses NextGen image formats (webp)?
4. Summary: Image styles, Responsive Image Styles, NextGen Images
5. Go through current image styles
   • Image is uploaded, Drupal responds to certain settings in the image formatter, then displays image on page
6. Go through basic responsive image setup
   • Responsive images allows you to switch out image styles based on the browsers width and density (retina)
   • Breakpoints yml file
7. Go through NextGen image setup
   • Image Optimize API - adds optimizations after Drupal generates styles
     • Pipelines are created to connect with 3rd party and local services
   • Image Optimize GD - pipeline processor with GD Toolkit (native PHP library)
     • Defers compression from Drupal to the pipeline, avoiding double compression
   • Image Optimize WebP - transforms an uploaded image to webp format
     • Htacess addition
     • Employs both lossy and lossless compression.
     • Supports transparency in both lossy and lossless compression.
     • 25% - 35% smaller than JPEG
     • 26% smaller than PNG when lossless
     • 3x smaller than PNG when lossy & still supports transparency
8. Mention Media Entity Responsive module for those who use Media Entity module
9. Cvent project ~25 hours convert all images to responsive
   • Cut page size by half or more / increased speed
   • Pretty easy to switch from image styles to responsive images

Image Optimize API
Image Optimize GD
Image Optimize Webp

Example

CVENT\

HTACCESS

# Add encoding or WEBP
AddType image/webp .webp

\

example.breakpoints.yml

example.mobile:
  label: Mobile
  mediaQuery: ''
  weight: 0
  multipliers:
    - 1x

example.narrow:
  label: Narrow
  mediaQuery: 'all and (min-width: 560px) and (max-width: 1024px)'
  weight: 1
  multipliers:
    - 1x
    - 2x

example.wide:
  label: Wide
  mediaQuery: 'all and (min-width: 1024px)'
  weight: 2
  multipliers:
    - 1x
    - 2x