Images Perfection

you are here (click to zoom) - discover the stack

Perfect images in HTML will have a big impact on User Experience and SEO

Pages load faster
The browser loads images in the perfect size based on it's screen
Google PageSpeed returns a better score
Mobile devices are much faster

For perfect images, you must do quite a bit

Images should load lazy
Images should specify width and if possible, height
Images should be resized on the server to match what's needed
In most cases, use a <picture> tag instead of img so you can provide multiple formats such as jpg and webp
You should provide the best possible format (often webp)
You should provide multiple formats (jpg/webp, png/webp) so browsers can pick
You should provide multiple sizes so the browser can pick the best one
You should include resolution-factors or screen-factors for the sizes
You should include sizes-information so the browser can better select the perfect resolution

All this while still

Using images the content-editor added
...with optional custom alt-text adjusting to the editors needs (sometimes it should crop, sometimes not, ...)
Automatically behave differently depending on the format (svg, png, jpg, etc.)
Automatically behave differently depending on the size that should be shown (like 1/3 of the screen)
Automatically give larger images when the screen gets smaller (eg. when a 1/3rd image becomes full-width)

So instead of this...

<img src="/[path]/jellyfish-img-srcset-2000.jpg" />

...you should provide this for every image you have:

<picture>
  <source
    type="image/webp"
    srcset="
      /[path]/jellyfish-img-srcset-2000.jpg?w=2460&amp;h=1520&amp;quality=75&amp;mode=crop&amp;scale=both&amp;format=webp 2460w,
      /[path]/jellyfish-img-srcset-2000.jpg?w=1230&amp;h=760&amp;quality=75&amp;mode=crop&amp;scale=both&amp;format=webp  1230w,
      /[path]/jellyfish-img-srcset-2000.jpg?w=922&amp;h=569&amp;quality=75&amp;mode=crop&amp;scale=both&amp;format=webp    922w,
      /[path]/jellyfish-img-srcset-2000.jpg?w=615&amp;h=380&amp;quality=75&amp;mode=crop&amp;scale=both&amp;format=webp    615w
    "
    sizes="(max-width: 1400px) 100vw, 1230px"
  />
  <source
    type="image/jpeg"
    srcset="
      /[path]/jellyfish-img-srcset-2000.jpg?w=2460&amp;h=1520&amp;quality=75&amp;mode=crop&amp;scale=both 2460w,
      /[path]/jellyfish-img-srcset-2000.jpg?w=1230&amp;h=760&amp;quality=75&amp;mode=crop&amp;scale=both  1230w,
      /[path]/jellyfish-img-srcset-2000.jpg?w=922&amp;h=569&amp;quality=75&amp;mode=crop&amp;scale=both    922w,
      /[path]/jellyfish-img-srcset-2000.jpg?w=615&amp;h=380&amp;quality=75&amp;mode=crop&amp;scale=both    615w
    "
    sizes="(max-width: 1400px) 100vw, 1230px"
  />
  <img
    src="/[path]/jellyfish-img-srcset-2000.jpg?w=1230&amp;h=760&amp;quality=75&amp;mode=crop&amp;scale=both"
    loading="lazy"
    class="img-fluid"
    width="1230"
    height="760"
  />
</picture>

Super Easy with Image Service

2sxc 14 introduced the Image Service. It will do all of this and more, and is super configurable. So to get the entire code above all you need is this:

@Kit.Image.Picture(App.Path + "/img/assets/jellyfish-img-srcset-2000.jpg")

🎓 See a live example in the tutorials

All of it is fully automated. By default, you will get the core functionality such as automatic resize etc.

The full scope of features requires a Patron Perfectionist licenses for 10 USD/month. Only then will all the things you see above work. Otherwise you can still code it yourself 😉.

🦸🏻‍♀️ Learn about Patron Perfectionist

🦸🏻‍♀️ Learn about becoming a Patron

Some Tutorials to learn this

You can also do some really advanced custom configuration to change how the resizer behaves.

👉🏼 Read more about Image Settings

👉🏼 Read more about Image Recipes

History

Added in v14

Table of Contents

Images Perfection

Super Easy with Image Service

More

History