Cacher is the code snippet organizer for pro developers

//// STEPS

1. Enable responsive images module (in core)

2. Make a breakpoints file. Give this yml file the name of your theme. Vb: tabor_neato.breakpoints.yml (Kopieer uit proj. CEO of TABOR)

3. Set basic images styles via /admin/config/media/image-style

4. Set resp. images styles via /admin/config/media/responsive-image-style

5. For your content type (or other bundle), go to "Manage Display," and for the "Format" of your image field choose "Responsive image."

ARTIKEL: https://www.previousnext.com.au/blog/responsive-images-media-entities-drupal-8

//// BREAKPOINTS FILE

• Set your breakpoints, making sure to order the weights from smallest to largest.
• Clear caches

//// WERKWIJZE VOOR MEDIA TYPE IMAGE:

Media type IMAGE krijgt verschillende display modes, vb Responsive Banner, Responsive Article Img Large, Publication Cover etc.

// NIEUWE DISPLAY MODES AANMAKEN HIER (onder Media):

admin/structure/display-modes/view

// ACTIVEREN EN INSTELLEN HIER:

admin/structure/media/manage/image/display

// WEERGAVE INSTELLEN IN DE VERSCHILLENDE CONTENT TYPES:

a) Stel foto in als Rendered Entity > Responsive image full width / Banner / Square cover ....

B) Stel foto in als Thumbnail > Kies een image style (Maar resp image styles verschijnen hier niet)

//// CONFIG vd RESP IMAGE STYLES: SIZES ATTRIBUTE OR SINGLE IMAGE STYLE?

Kort gezegd: if you're only needing to change the resolution of an image at different viewport sizes/densities, you should use srcset instead of the < picture > element:

• Als enkel beeldgrootte verandert, kies dan "Select multiple image styles and use the sizes attribute."

• De browser kies meest aangepaste stijl op basis van retina of niet, snel netwerk...

• Als styling verandert (meer pano, separate art direction/crops etc), kies dan "Select a single image style"

• Jij kiest welk formaat er staat per schermbreedte

The reason srcset is preferred, is that it allows the browser to make informed decisions about which version of the image to serve, whereas the < picture > element explicitly tells the browser which images to use and when via media queries. Browsers know way more about our end users than we (developers) can ever know, so why not let them make the hard decisions?

/////

We didn't talk about the sizes attribute at all here, on purpose. It's actually not that bad to just leave it off. In that case, it assumes sizes="100vw", which is saying:

I assume that when you use an image, it's going to be the entire width of the viewport.

That's usually not an awful assumption to make.

If you want, you can get all kinds of specific about it. You can use sizes to match your CSS layout exactly and tell the browser exactly how big that image is going to be on every screen size, matching how your breakpoints work in your design. That can get a little complicated and honestly it might be a little dangerous because you're putting CSS stuff in markup and you know how that goes. Eric Portis just wrote about this. Ideally it can be automated or injected server-side.

I also think kind of "generic" sizes attributes might be useful. On a kinda generic blog-ish site, maybe something like this is smart within content:

sizes="(min-width: 800px) 50vw, 100vw"

Meaning: "If the browser window is wider than 800px, this image is probably going to be displayed about half the size of that. If it's smaller, it'll probably be full-width." __