Though I like the concept of "responsive" apps, putting the same image in multiple resolutions on the server does not seem very appealing to me. In most cases, the images will anyway not fit perfectly to the browser pixel resolution. So the browser will need to rescale the image again, which does not cost bandwidth, but some rendering time anyway.
By the way, resolution is not the only factor that affects the file size of an image. With JPG or PNG you can change the compession factor to get a smaller size. So, you will lose some quality, but gain much better speed. It could be a good idea to deliver an image depending on viewport size AND bandwidth.
Leaving the heavy lifting to the server could be a far better solution, even for a web app, that runs completely in the browser. Some CMS like Directus allow to use resolution parameters when the browser asks for an image. This gives you in any case the best possible quality with the smallest size.
Agreed, the server should optimize images, like a CMS handling uploaded image files and generating different optimized versions in different sizes. Then the CMS theme can use source set markup to let the browser decide which image is the most appropriate while saving unnecessary bandwidth.
I have added code examples for complex image / picture source sets and explicitly stated in my conclusion that currently I would not use background images with image-set as long as using actual image tags is an option.
Directus reduces the image size on demand, so it is up to your application to ask for the "right" resolution. I´m not sure this is shown in the editor, but maybe there is an option to do so?!?
My knowledge about Directus is not up-to-date, so maybe you check out directus/discussions on github.
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
Though I like the concept of "responsive" apps, putting the same image in multiple resolutions on the server does not seem very appealing to me. In most cases, the images will anyway not fit perfectly to the browser pixel resolution. So the browser will need to rescale the image again, which does not cost bandwidth, but some rendering time anyway.
By the way, resolution is not the only factor that affects the file size of an image. With JPG or PNG you can change the compession factor to get a smaller size. So, you will lose some quality, but gain much better speed. It could be a good idea to deliver an image depending on viewport size AND bandwidth.
Leaving the heavy lifting to the server could be a far better solution, even for a web app, that runs completely in the browser. Some CMS like Directus allow to use resolution parameters when the browser asks for an image. This gives you in any case the best possible quality with the smallest size.
Agreed, the server should optimize images, like a CMS handling uploaded image files and generating different optimized versions in different sizes. Then the CMS theme can use source set markup to let the browser decide which image is the most appropriate while saving unnecessary bandwidth.
I have added code examples for complex image / picture source sets and explicitly stated in my conclusion that currently I would not use background images with image-set as long as using actual image tags is an option.
Do you know in Directus WYSIWYG editor how to make image responsive?
Directus reduces the image size on demand, so it is up to your application to ask for the "right" resolution. I´m not sure this is shown in the editor, but maybe there is an option to do so?!?
My knowledge about Directus is not up-to-date, so maybe you check out directus/discussions on github.