how it's done

This plugin is not enabled by default, since if you are not aware of how it works, its actions might seem confusing. Let's take a look at the configuration options to see what's happening.

Following the simple-is-better mentality of barely, there are only two tings you can actually configure: a TARGETS option and a LAYOUTS option.

TARGETS refer to the target resolutions and qualities of the images, LAYOUTS are essentially media queries that determine which image should be displayed. The default looks like this:

1
2
3
4
5
6
7
8

PIXELIZER:
    TARGETS:
        - lg 1000 70
        - md 650 70
        - sm 300 70
    LAYOUTS:
        - "(max-width: 1000px) 100vw"
        - "1000px"

First take a look at the targets. They are structured like this: <img-name-suffix> <width in px> <quality in %>. The suffix/names can be chosen freely, just as the values for pixel-width and quality. There's no upper limit to the amount of targets you can specify, but you need at least one.

Layouts are independent of targets. They tell the browser how large the images will be displayed (in the default example above: up until 1000px view width, they are full-width, but then won't grow upwards of 1000px); but it's up to the browser to pick the target-image best suited to the current view width.

For a much more thorough write-up on this topic, see this excellent article on css-tricks.com.

One last note on the configuration: You may have noticed that the values for LAYOUTS are wrapped in " ". That's because otherwise, the round braces declare a set in yaml, which is not what we want here.

what you get

Once you have enabled and configured the plugin (see above), all the magic happens in the background.

That means that for you, nothing changes. You simply put your original-size/format pictures in the appropriate folder and include them in markdown like you always have: ![my alt text](my-image.jpg).

Behind the scenes, the plugin will do two things:

1. to the image itself:

   • resize and compress it into every size and quality your configuration specified
   • copy and convert all of those images into webp-format
   • save all resized/compressed images in the original format, all resized/compressed images in webp format, and the unaltered original file to the appropriate place in your webroot.

2. to your markdown: normally, the example above would result in something like this: <img src="my-image.jpg" alt="my alt text">.

   Instead, the new output will look like this:

   1 2 3 4 5

   <picture> <source sizes="(max-width: 1000px) 100vw, 1000px" srcset="my-image-lg.webp 1000w, my-image-md.webp 650w, my-image-sm.webp 300w" type="image/webp"> <source sizes="(max-width: 1000px) 100vw, 1000px" srcset="my-image-lg.jpg 1000w, my-image-md.jpg 650w, my-image-sm.jpg 300w" type="image/jpg"> <img src="my-image.jpg" alt="my alt text"> </picture>

   That seems very verbose, but is actually quite simple:

   • my-image.jpg is still the fallback, should the browser be very old and not recognize the <picture> tag
   • if the browser understands the tag, but can't work with webp yet, it can choose from three differently-sized images that should all have a much lower filesize than the original
   • if the browser understands webp (yay!), those versions of the image will be used, at yet again reduced filesize

   This not only helps when users have slow internet speeds, but not using webp images actually significantly negatively affects your Google PageRank / Lighhouse scores!