Images are a lot harder than I expected. Naively I assumed, I could just add an img-tag with the original image  and bootstrap would take care of the rest. But it turned out it wouldn't. And how would it be able to do this? We have a wide variety of viewport sizes nowadays and downloading the same image for all of them would be a huge waste of bandwith. After reading the chapter on responsive images of  Smashing Book 5 — Real-Life RWD I took a deep breath and tried to do it properly. It turns out there is almost no tooling for that, at least in the django world, so I rolled my own image resizing, transposing and compressing solution. I just use pillow with quality set to 65 atm, but l'm planning to replace it with mozjpeg as soon as I find out how to get it to work in the application server docker container.

Anyway, I have a rough first version of responsive images working and now I'm able to just upload an image from my phone and it gets rotated, shrinked and saved in the appropriate sizes automatically. And here's an example of a responsive image of a sweet potato dish I prepared a few days ago: