Medium-sized photos

Developers
1

Over the last few days we have started to enable a new smaller version of uploaded photos. You may notice these sometimes because they currently end in -m.jpg, with the “m” for “medium”. These photos are about 1000x1000, which often translates to about 1/4 of the usual file size.

They are currently used in the Uploads page on the web, and will be used more in the mobile apps later.

For years we’ve had a special photos proxy that can scale and cache photos to any size. These new more explicit medium-sized photos are convenient because they are generated when the post is created, not on-demand later. They can be used in blogs via Hugo templates or from the Micropub API.

From the Micropub API /micropub/media?q=source, there is a new sizes field in the JSON like this:

[
    {
      "url": "https://www.manton.org/uploads/2024/704d2398ba.jpg",
      "published": "2024-08-05T02:43:25+00:00",
      "alt": "A miniature golf putting green...",
      "sizes": {
        "medium": "https://www.manton.org/uploads/2024/704d2398ba-m.jpg"
      }
    }
]

This is not entirely set in stone. We may change it later after feedback from the IndieWeb community. Apps should always gracefully fall back on the main URL if the medium size is not available.

From Hugo parameters:

{{ range .Params.photos_with_metadata }}
   <img src="{{ .sizes.medium }}">
{{ end }}
2

Just checking, does this imply that these will be preprocessed at certain size classes?

3

Yes, currently the only size is “medium”, but there will be more later. Also, I forgot to mention that this is currently only done for photos / JPEGs.

4

So if we want to offer an option to click for a larger image in certain cases, we’ll have to host that image elsewhere for the time being? I don’t need this for every image, but sometimes it is helpful.

I suppose I could handle those cases with a free Flickr account and a link that makes clear it is not on my site. I’ve never used Flickr, but that seems to be doable given their current policies.

5

No, both versions will still exist. This is so the micro.blog site and apps can use smaller photos in places it may be appropriate (which will improve speed etc) and Manton is just also making those photo versions available to us.

For example, I wrote a plugin for lightboxing my photos that supports thumbnails but stopped using that feature because I didn’t want to make them myself and it wasn’t much faster using the on demand photo reside proxy of MB. I may switch back or try this.

1 Like
6

Thank you.

7

Update on this, in front matter we now also have a new “small” size. Note that like “medium” it’s not always present, so best to check before using it. For example:

{{ range .Params.photos_with_metadata }}
  {{ if .sizes.small }}
     <img src="{{ .sizes.small }}">
  {{ else }}
     <img src="{{ .url }}">
  {{ end }}
{{ end }}

To summarize the scaling Micro.blog does for JPEGs:

  • default for photos: 1800x1800
  • medium: 1000x1000
  • small: 300x300

The front matter should look like this:

photos_with_metadata:
- url: https://cdn.uploads.micro.blog/10/2024/example.jpg
  width: 600
  height: 600
  sizes:
    medium: https://cdn.uploads.micro.blog/10/2024/example-m.jpg
    medium: https://cdn.uploads.micro.blog/10/2024/example-s.jpg