A poll for front-end developers and UX designers.
Fares
10 replies
When you code a webpage or design a template, how many variants of a responsive image do you prepare?
Thanks in advance. and feel free to comment :D
Replies
Benjamin Arne@benjamin_arne
It depends on the tools I use. When I code by hand, I stop at 3 variants because beyond that it becomes a nightmare...
Share
@benjamin_arne I take your word for ! but with metrics such as the Core Web Vitals, aren't you afraid of being poorly highlighted on the web, and of the user experience?
I'd say 3 to 5 variants in most cases.
Always too many when you don't have a proper solution.
Short answer:
One most of the time, two sometimes
Long answer:
I work with a master image resized on the fly for better performance. I always set up a proxy for resizing and cache the result in a CDN. The usual config I use is made of nine breakpoints, so technically I’m going up to 9 variants of the same picture, but always one master file. It has the main benefits of being scalable and works well even with user created content.
The notable exception is when I need some kind of art direction, like a hero picture with a landscape and portrait version. In that case I would definitely have 2 picture (or more if I need to be even more specific, i.e tablet).
@montmirail Thank you for the detailed answer, Paul-Emile.
Your approach must yield a decent web performance, indeed. Do you use a commercial platform for on-the-fly image generation? Or did you configure some open-source engine like Thumbor and run it on your own server?
@fares_aktouf I run an open-source engine on my own server. I will neither advise against or for using a self managed solution, it's really more of a personal preference. I like to now every pieces of my software and will rely on commercial platform only for critical part that would be impossible to handle myself, like payment system.
If interested I am using https://www.producthunt.com/post... as an engine
@montmirail I'm sorry, I thought I answered you.
It's a great solution. if you have some bandwidth in your schedule. try the features of the solution " https://www.twicpics.com/docs/ge... " and tell me what you think.
I usually start with 2-5 variations to make sure the direction is correct and then create few more with the feedback, only sometimes I would have to create more than 10 variations; usually when the requirements are not very clear in the first iteration.