Optimal Image size & resolution

Is there a currently agreed standard for appropriate resolution (size and DPI) for images used in blog posts?

Even better, is there any chance that micro.blog could somehow offer some kind of automatic ‘image-magick’ method of serving an appropriately scaled image if the user uploads a full-resolution version?

An example of what I’m thinking about is https://www.imgix.com/.

Futzing with image scaling is the most frustrating part of longer form blogging for me.

Micro.blog offers an endpoint to resize uploaded images. Once you upload the image, if you do https://micro.blog/photos/###x/, but replace ### with the pixel width you want, followed by the full URL to the image, you’ll show an image with that width. For example, if I wanted the image at https://json.blog/foo.jpg to be 480px wide, I could use <img src=“https://micro.blog/photos/480x/https://json.blog/foo.jpg”>.

I have built that into the glightbox plugin that I maintain, so that images will be resized if they are put within a gallery. You can see these thumbnails in action on this post.

As for whether there is a standard size, I think that depends a bit on your theme.

4 Likes

Nice, I wasn’t aware of this. I was going to go the Hugo image processing route until I learned that getting the image as a Hugo resource was a dead end.

Agreed. I use an Adobe Lightroom export plug-in that resizes and optimises to the required size, and then uploads to my WordPress website. Since I can’t do the same for micro.blog, I use an export workflow that resizes and optimises each image which I then manually upload to micro.blog.

Look to your theme to find the “correct” sizing.

I had no idea this was a thing! :exploding_head:

Mimi Uploader should totally be using this for showing Recent Uploads. Currently it downloads the whole image just for showing thumbnails :man_facepalming:

(Sorry for bumping an old thread but I really wish this was better known)

Thank you for bumping the thread! I’ve been experimenting with this endpoint on my photos page. So far it’s looking very promising. A lot of bytes are saved that would otherwise be sent over the network.

Are there any additional settings that can be sent to the endpoint? It would, for example, be great to specify that I would like the resulted image to be converted to “webp” or “avif”. That would save even more bandwidth and would make for a great, faster loading, user experience.

That is actually fantastic, surprised it isn’t documented anywhere.
But I’m not sure the current version of glightbox actually uses this to resize thumbnails, they are the same images. I might look into that.
P.S. Cloned the plugin and added this line manually. It works and makes the process so much simpler.

Yeah I removed it because I wasn’t that pleased with the results.

@jsonbecker realized what you were talking about, even when scaling to a higher resolution, the resulting image is quite bad (as if the conversion was optimized for speed/resources).

Too bad there’s no obvious way to do this statically. Still figuring out the best way to upload images. Mimi seems to be the best option so far, the native Micro.blog uploader butchers the colors, but unless you make thumbnails manually you can’t really have them as it seems.