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.
Additionally, we’ll briefly touch on some additional modules in the ecosystem, including: ImageAPI Optimize Binaries, Kraken, reSmush.it, Blazy, Lazy-load and more. You will leave this session with an understanding of how to implement these tools on your site today, as a solution that will work across standard image fields, Drupal core Media, and Media Entity solutions.
https://2019.badcamp.org/session/recipe-better-images-drupal-8
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.
Additionally, we’ll briefly touch on some additional modules in the ecosystem, including: ImageAPI Optimize Binaries, Kraken, reSmush.it, Blazy, Lazy-load and more. You will leave this session with an understanding of how to implement these tools on your site today, as a solution that will work across standard image fields, Drupal core Media, and Media Entity solutions.
https://2019.badcamp.org/session/recipe-better-images-drupal-8