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.