Apple Annie’s WeblogResponsive images with Flickr sources: a walkthrough.
Talking about Flickr in 2023 sometimes feels a bit retro. There's nothing flashy about Flickr. Or is there? Isn't there something ✨flashy✨ about a service that just hums along, keeps working, maybe it doesn't make waves, but it also isn't actively getting worse? I came up with a list of only three services that I've been using for a long time, that I pay for, and that enshittification has not yet taken ahold of.
I was trying to think of services I still regularly use, and pay for, that have not succumbed to enshittification, even if they are rather stale and have not been "loved" in a while.
I think I can only think of three:
- Flickr Pro
- Pandora Plus
- iTunes Match
edit: to say I am only referring to services I've used for a long long time, not leaving out omg.lol!
— @anniegreens@social.lol
For #NaBloPoMo Thursday I wrote up a more personal post on my microblog and included a bunch of pictures that I shot this week in my parents' garden. I only uploaded one photo to microblog since, right now, per-post photos only show one image in the grid on my photos page. I uploaded the rest of them to Flickr where I could take advantage of all the automatic resizing for responsive images, as well as store the original full-sized image (with Flickr Pro).
I got excited yesterday thinking about this for today's post but then recalled I already sort of touched on responsive images with Flickr sources in a post in February. In reviewing that post, though, I realize I didn't really go into how to do this in the Flickr UI, as it isn't very intuitive and I surmised on Mastodon: do people even know about this?
Flickr Pro subscribers get unlimited storage including the full-sized original image. Alongside this, Flickr users get resized images of common sizes and crops, such as various thumbnails for crafting an image grid, as well as low to high resolution resizes that in combination can be used for responsive images on the web.
It's not very apparent where or how to find these images. You can access them via the Flickr API, but if you're looking in the web UI, it's a little obscured. In the normal course of viewing images in someone's photostream, you end up viewing only one of these images in a sort of slideshow through the available images either of the entire photostream or a particular album.
To get to the page where you have access to all resized images and crops in the web UI, you need to click the "download icon" in the lower right of that slideshow view. They call this the "photo page" and distinguish the photo page URL vs the photo URL and give a step-by-step how-to.
Once you've clicked the "View all sizes" link you will be taken to an "All sizes" page for the photo. The list of resized images will vary based on the original image uploaded and whether the owner of the image has made any of them hidden or unavailable. Additionally, original images are only available for Pro subscribers and they have an option to disable download of that original image.
Depending on your use case, you may want multiple sizes for crafting a responsive image. You will need to follow the steps 4-6 above for each size you want to use and plug them into the HTML for the <img> tag as well as any sizes you may be using. Again, here's my photo masthead from weblog homepage as an example.
<figure class="img-masthead">
<img srcset="https://live.staticflickr.com/65535/52666408908_11a3cd58b5_w.jpg 400w,
https://live.staticflickr.com/65535/52666408908_11a3cd58b5_c.jpg 800w,
https://live.staticflickr.com/65535/52666408908_1c71cdf4d8_h.jpg 1600w,
https://live.staticflickr.com/65535/52666408908_c5eab311e9_k.jpg 2048w"
sizes="(max-width: 400px) 400px, (max-width: 800px) 800px, (max-width: 1600px) 1600px, 2048px"
src="https://live.staticflickr.com/65535/52666408908_1c71cdf4d8_h.jpg"
alt="Closeup of purple tulips from near ground level, making them look like goblets on green stems against a blue sky with white clouds." width=2048 height=683>
<figcaption class="img-masthead__caption">
<cite><small><b>Image source:</b> <a href="https://flic.kr/p/2oeX7uU">@anniegreens</a> on Flickr.</small></cite>
</figcaption>
</figure>
Finally, if you use this method, please remember that the Flickr Terms of Use requires any image used on an external site be linked back to Flickr. I like to do this in the <figcaption> for an image and link back to the photo page URL, as distinguished in the link I provided above.
Post info
- NaBloPoMo: 10/30
- I'll be keeping tally over on my microblog.
Links in this post:
- Day tripping.
- Responsive images with Flickr sources.
- Reasons to upgrade to Flickr Pro
- Photo Image URLs
- Share or embed Flickr photos/albums
- Flickr Terms & Conditions of Use
POSSE copies:
