normalized_image_styles

Normalized Image Styles provides several sets of aspect ratio based image styles with normalized dimensions. These sets of image styles can be used by the core Responsive Image module as part of your site performance strategy.

Aspect ratios are derived from common options at https://en.wikipedia.org/wiki/List_of_common_display_resolutions.

Features

Normalized Image Styles provides 20 sets of aspect ratio based image styles:

• Landscape
  1. 32:9 (3.55556:1)
  2. 3:1
  3. Anamorphic (2.38694:1)
  4. 21:9 (2.37037:1)
  5. 2:1
  6. DCI (1.89629:1)
  7. Widescreen (1.85:1)
  8. 16:9 (1.77778:1)
  9. Golden Ratio (1.61803:1)
  10. 3:2 (1.5:1)
  11. 4:3 (1.33333:1)
  12. 5:4 (1.25:1)
• Square
  13. 1:1
• Scaled
  14. Max dimension
• Portrait
  15. 4:5 (0.8:1)
  16. 3:4 (0.75:1)
  17. 2:3 (0.66667:1)
  18. Golden Ratio (0.61803:1)
  19. 9:16 (0.5625:1)
  20. 1:2 (0.5:1)

Each set contains 17 normalized base widths (in pixels):

1. 3840
2. 3328
3. 2944
4. 2560
5. 2176
6. 1920
7. 1664
8. 1408
9. 1152
10. 1024
11. 896
12. 768
13. 640
14. 512
15. 384
16. 256
17. 128

Each set comes in both default format and WebP conversion.

The height for each image style is a function of the aspect ratio (width / aspect ratio, rounded down).

Each set (except 'Scaled') uses a Focal Point Scale and Crop image effect. Set the widget to Image (Focal Point) for the Image media form display (/admin/structure/media/manage/image/form-display). You can now manually choose the 'focal point' for each image on its media edit page (/media/*/edit) and every Normalized Image Styles set will respect that selection when it crops the image to the aspect ratio.

'Scaled' uses an upscaling-enabled Scale image effect. The larger dimension for each image will be the normalized dimension.

The smallest eleven widths use an Image Style Quality image effect at 85%. The largest six widths use an Image Style Quality image effect decreasing from 50% at 1920 to 25% at 3840 in 5% increments.

• If you choose to use all 40 sets you will generate a total of 680 image styles

Responsive Image Strategy

Cloudinary has recommended using optimized responsive image sizes since early 2016, and they have developed the Responsive Image Breakpoints Generator that calculates image dimensions based on the reduction in file size (in KB) for a given image. Just enter your minimum and maximum widths, the size (in KB) of image reduction for each step, the maximum number of image steps, and the generator will create an image-specific number of 'breakpoints' (i.e., width/height combinations).

Using these same inputs, the number and sizes of breakpoints will vary for every image depending on factors such as visual complexity and image format (with wildly varying compression algorithms). While this specificity is great if you're using Cloudinary's API, for a Drupal-based solution that still embraces the strategy of file size reduction there needs to be more stability in the number and sizes of width/height combinations for a given aspect ratio.

Rather than a multiplicity of individualized image styles, we need a defined set of Normalized Image Styles that can be used for all images.

New Calculations

Instead of basing the size reduction for each step as a KB decrease of the file size, Normalized Image Styles begins by basing the reduction on a percentage of the image area. This reduces the complexity of our calculation for each new step:

1. width x height = area
2. area - reduction (20%) = new step's area
3. √(new area x aspect ratio) = new width
4. new width / aspect ratio = new height

The problem with this simplified approach is that rounding (or lack thereof) of the new dimensions has a knock on effect on both the actual aspect ratio of the new dimensions AND the whole number pixel dimensions of the step. So instead the new width is passed through a FLOOR function with a significance value of 16 to get a normalized width, hence the module's name. The updated calculation:

4. FLOOR (new width, 16) = normalized width
5. ROUNDDOWN (normalized width / aspect ratio) = new height

These new dimension calculations result in an increase in the effectual percentage reduction from 20% to about 25%.

Demo

https://www.simplytest.me/project/normalized_image_styles

Post-Installation

Normalized Image Styles uses the Image Style Generate module to generate the image styles for each aspect ratio.

After enabling the base module and any desired aspect ratios, you need to run the migration import process one of two ways:

1. Using the Migrate Tools UI at /admin/structure/migrate/manage/normalized_image_styles/migrations
2. Using Drush (drush mim --tag normalized to import all enabled styles)

Once imported, Normalized Image Styles and all of its sub-modules can safely be uninstalled on the module Uninstall page. The generated image style configuration will persist and can be managed on the configuration Synchronize page (/admin/config/development/configuration) or via Drush commands.

Disclaimer

It's considered a best practice to NOT have Migrate module installed on your production environment, and by extension Migrate Plus and Migrate Tools, too. All can safely be uninstalled after your chosen Normalized Image Styles have been imported (drush un image_style_generate migrate_plus migrate_tools migrate).

Using

You can use your image styles anywhere you need to display images, or link to them, but a highly aligned use case is Responsive Images.

For each of your imported aspect ratio sets you can create a corresponding responsive image style (/admin/config/media/responsive-image-style). A naming convention could be something like 'orientation aspect:ratio' resulting in, for example:

• Landscape 16:9
• Landscape 4:3
• Square 1:1
• Scaled
• Portrait 2:3

Each responsive image style may also warrant a corresponding image view mode (/admin/structure/display-modes/view) using the same naming convention.

Additional Requirements

• Image Style Generate - create image styles in bulk, based on a defined set of rules and patterns
• Focal Point - specify the portion of an image that is most important
• Image Style Quality - specify a custom quality on individual image styles
• Migrate Plus - migration plugins can be implemented as configuration entities, allowing them to flexibly be loaded, modified, and saved
• Migrate Tools - provides tools for running and managing Drupal migrations

Recommended modules

• Responsive Image module from Drupal core
• View modes from Drupal core

Similar projects

• Easy Responsive Images
  Has the added benefit of generating media image view modes and responsive image styles for each aspect ratio you define. Currently employs a javascript based mechanism using data- attributes for swapping images rather than using native browser behavior.
• Normalized Responsive Images
  Drupal Recipe version of Normalized Image Styles that adds responsive image styles and image view modes.

Sample image courtesy Pexels