I make a site for 300 painting images. I set the models, templates, I can deploy via Pythonanywhere and put static files on a cloud… but I struggle to find a proper approach to implement responsive images.
That is tackle Art Direction (image scale) and resolution switching (diff. image sizes).
Painting images are in two formats, portrait and landscape. file size is about 2-3 MB and resolution is about 3K.
I want to serve these images so I can scale them to fill the screen. I could not find a way to do it methodically.
so far I found two approaches:
I). Keep it all in django: via models and views templates… in my case it means adding a boolean attribute the Painting model so mark landscape Yes/No. Then pass it to the template with a for loop and the SRCSET method to switch resolutions.
Then for the scale/cropping I can use the Picture method with additional if loop to scale/fill the screen according two option portrait/landscape accordingly.
This keeps it all inside django, but:
Some articles find the picture method is cumbersome and unreliable. It’s also verbose and not take time to adapt.
If in the future I move the templates to Jinja I need to redefine it all from scratch.
II) CDNs offers a great solution. they offer not only resizing and cropping but also auto format (ex converting to webp) and can do all transformations on the fly.
They are expensive. and then, I haven’t found a CDN that combines community/enough documentation for Django with Image manipulations. The monthly price I can afford is around 30 USD.
for example: Cloudinary answers all my needs (and offers much more)… but it had only few references for Django. As I beginner this is risky and time consuming. Their Git learning samples aren’t intuitive and take time to set up.
I suppose I miss important elements and larger knowledge, I make some wrong assumptions, I.e. I write to ask for help. Recommendations? workflows, scheme to handle images and their transformations (crop + switch resolution)?
highly appreciated