A Recipe for Better Images in Drupal 8

Michael Lander

For many Drupal 8 users, image display begins and ends with Drupal core's image styles. In this session we will look at a recipe of core and contributed modules that can push this further to support better performance across devices and browsers. We will start with a brief overview of image styles and responsive images. Then we'll move into image compression and optimization, with an emphasis on the how and why of using various contributed modules together. We will also look at how we can support Google's WebP for even better image quality and optimization for most modern browsers.

The walkthrough will include the following modules:

Image(core) - Provides image styles and basic compression using image toolkits.
Responsive Image(core) - Implements support for HTML5 Picture elements, using defined breakpoints and image styles.
ImageAPI Optimize(imageapi_optimize) - Enables advanced optimization options, including additional binary support and third parties in the form of optimization pipelines.
ImageAPI Optimize GD(imageapi_optimize_gd) - Provides similar GD toolkit compression as Drupal core, but in the form of a ImageAPI Optimize pipeline.
ImageAPI Optimize WebP(imageapi_optimize_webp) - Enables you to derive a WebP copy of an image, and additionally provides a submodule for responsive image integration.

[LucaP]

very interesting, but what about imeges inserted by content -editors within pages with the CKE editor ?!? I guess there is no way to integrateimageStyles with that !!

[ehsanbagherzadegantalkhoun]

This module and also imagemagick and also webp module dont work with amazon S3 :( , I mean .webp file didn't upload to s3 bucket

[MEGATestberichte]

There is always a truck driving backwards :D

[ralfeausw]

Sadly the audio quality is rather bad.