I’m trying to use Micro.blog to host images too. I’ve uploaded a bunch from my vacation and now my home page takes many seconds to load.
I’m pretty sure I uploaded these via Sunlit.
Is Sunlit supposed to resize the images? If so, is it?
I can’t tell you if Sunlit is supposed to resize images, but it does. 
I just snapped a photo using my iPhone and uploaded it to Micro.blog via Sunlit. Here’s what happened:
- The photo was stripped of most metadata (like location information).
- It was scaled down to 1800 × 1350 px (from 4032 × 3024 px).
- The file size was reduced to 1.6 MB (from 4 MB).
1.6 MB for one photo is pretty big for the web. It soon adds up. As a rule of thumb, a decent quality photo for viewing on a blog rarely needs to be heavier than 0.5 MB.
You could resize the photos manually before uploading them to Micro.blog. Or maybe @manton could adjust Sunlit’s resizing algorithm to target a more lightweight file size?
That’s a good summary, thanks @sod. Your home page still loads very fast for me, but I’m on fast wi-fi right now so I know that’s not really a fair test.
There are a couple of options we could explore. Micro.blog has a resizing image cache that could be used to show smaller images on the home page. Ideally we could make a plug-in to enable this, but because the home page is different in different themes, I’m not sure of a good way to handle that right now. We could also add a setting to Sunlit to give people more control over the image size. That would require an app update, of course.
Happy to hear suggestions of what people would like to see here.
I forgot to mention, another option is the iOS app Mimi Uploader. It has a “Small” setting to resize images before uploading.
Ok, thanks for the quick response. I looked at the page now and it seems to be loading much quicker. I’m not sure what is going on here.
I like the idea of adding a setting to Sunlit.
For bloggers that use the Markdown syntax for images, Hugo’s render hooks are pretty cool.
You get complete control over how to render the img tag. So, for example, Micro.blog could have a default that uses the image cache for large photos, sets width and height correctly, and maybe sets loading to lazy (which will defer downloading of images until they are shown in view).
Power users can override the default and render images their way. For example, maybe they want all images to be zoomable or render images differently depending on the post type.
Unfortunately, render hooks only works with “Markdown images” (). So people who use HTML to insert images in their blog posts are out of luck. Of course, this could also be handled during the build process. Some kind of post processing on the rendered HTML before it’s deployed, but I don’t think there’s built-in support for that in Hugo.
Yeah, render hooks is probably the best method, but I think Manton would have to commit to a change of Markdown-by-default for images versus HTML. The render hooks worked great for glightbox https://github.com/jsonbecker/plugin-glightbox
I would love if Markdown is the default to insert images in Micro.blog instead of HTML. It’s converted to HTML later anyway, right? You can have the option to export in HTML if you need to.
I think Manton mentioned that the tag was better as you could put dimensions and that helps some themes, but honestly, not sure if these themes are that important.
Right now it’s definitely a bit difficult to have a good photo blog without either overcompressing the images or doing a lot of manual work to have thumbnails.