Good morning!
I'm very happy that you're still trying to learn new things, @tancredi 🙂
Let me clarify some of the questions you've asked!
Requests:
A website is a collection of documents. It contains text documents (HTML documents, CSS stylesheets, JS scripts), media files (PNG or JPEG images, PDF attachments, MP4 or OGG video files), and so on. Each and every one of them has to be loaded from server to the visitor's browser. Every act of requesting an asset like this, is called HTTP Request. So, when you use CSS pipelining, you are reducing number of requests at least twice! Yay! (And same goes for JS!)
Images:
- When you load image in Markdown via
syntax, you are loading this image in its full size. - When you load image via
you are performing two (well, actually three) media actions on this image:- First, you are resizing the image. As described in documentation, this makes Grav create automagically new image file by resizing your image to given dimensions - in this case 140px per 109px, and load this resized version into the website.
- Next, you are telling Grav to display this image with quality of 85. This shouldn't make a picture very blurry, you can see visual comparison of compression levels i. e. on excellent Coding Horror blog here or on Wikipedia. Please, note that
qualityis the opposite ofcompression level: this means that quality 85 equals to compression lvl 15, so it should be noticeable only on 4k or Retina screen, and in the same time it reduces image size even as much as twenty times, depending on image contents.
But, as @AmauryH mentioned, if you wish to generate different images for retina and non retina displays (and possibly other), that's not the thing you're looking for. But, fortunately, Grav has required option built-in! It is another media action, known as .sizes(). To use it, in place where you wish to insert the image, add this image in highest resolution available, name it i. e. [email protected] (depending on size) and use syntax  (Markdown). This will tell Grav to do the following:
- generate smaller versions of the image
- display one of them, depending on screen size of visitor's computer.
<details>
<summary>Wider description of how it works</summary>
It uses HTML srcset attribute, which takes multiple image URI's and displays to the user one that is fitting they screen best! Because it is rather new feature, it also adds fallback src for older browsers. Pretty cool, don't you think?
</details>