Pull up one of your images on some.pics (or, really, anyone’s image).
Click on the image to view the raw image by itself.
Append any of the Bunny Image Optimizer query strings to the URL in your address bar.
It’s that easy to resize, compress, crop, or otherwise adjust your image outputs. This can make a huge difference in speeding up your weblog (letting folks get a smaller/optimized version of an image vs. the untouched original).
Huge thanks to @lewis for asking about this and leading me to realize that I could enable the feature globally so easily. Hope it’s helpful to everyone!
Sadly, I’ve never been able to grok responsive images. How would one go about adding this to all weblog images going forward, and having it apply automatically?
So, adding it to weblog images is as simple as tacking on the query string that you want onto the image URLs. For instance, instead of:
https://cdn.some.pics/adam/6428529f630ce.jpg
You’d do:
https://cdn.some.pics/adam/6428529f630ce.jpg?width=500 (or whatever parameters you want for your image)
To do this automatically would take a little thought. One approach would be to define a preference for desired Bunny Image Optimizer settings, and then those could be appended to the Markdown image URL automatically (if you copy it from the page where you upload pics). Another approach would be to establish the preference at the weblog.lol level and apply the query string universally to all some.pics image URLs.
Since you brought up responsiveness, though, I should mention that you can make the images on your site responsive through a little CSS (could be as simple as defining a width of 100% on img if you want them to always fill the size of their parent container, or a max-width of some specific size that you never want to exceed). With that setup, you don’t really even have to worry about the source image size (though if you’re concerned about page load times, you’d always want to try to serve images that more closely match their display size to conserve bandwidth).
Do you have any strong feelings on the implementation ideas above (i.e. defining the preference at the some.pics level or at he weblog.lol level)? Thanks!
Without familiarity with the backend engine, I’d think appending that per Markdown link would be more resource intensive. Having the strings applied to all some.pics URLs automatically would avoid having to crunch this at rendering time.