Question when using the compose screen on the web (Micro.blog)
Currently when I add an image to a post, the img tag has the width and height set (600 and 400 respectively I believe).
For my theme I don’t want those set, so I end up having to do a “Save Draft” → Posts → Edit Post to get to a point where I can see and remove those width and height properties.
I know when you add an image to a post, if you click on it you can add an alt description, but it’s probably too much UX to also customize the width and height properties (especially since I want to remove them entirely, not just change the numbers).
Would it be possible to just add the img tag to the compose box like it is after you’ve saved the draft?
First, I encourage you to keep the width and height attributes. They are not strictly required by the HTML specification but impact performance and user experience, especially on image-heavy pages.
Including height and width enables the aspect ratio of the image to be calculated by the browser prior to the image being loaded. This aspect ratio is used to reserve the space needed to display the image, reducing or even preventing a layout shift when the image is downloaded and painted to the screen. Reducing layout shift is a major component of good user experience and web performance.
With that preaching by a web developer out of the way, here comes a couple of workarounds.
If you upload the photo before writing your post, on the Uploads page, there’s a Copy HTML button you can click. It will leave the img HTML snippet in the clipboard for you to paste (and edit).
Other Micro.blog clients might better suit your needs. For example, Gluon has the option to inline an image. Tapping the Inline button will add a Markdown image snippet (without width and height) to the post.
If you’re on iOS, Mimi Uploader might be worth checking out. A great tool for uploading images and quickly getting the HTML for pasting into your post.
Thanks for the reminder on width/height – I’ve been using the CSS aspect-ratio for this purpose, but since that is a CSS solution and not in the tag presentation, it makes sense.
I think if the width and hight were set to the actual image dimensions rather than 600x400 picked arbitrarily, that would solve my issue. I just want the images larger than 600 so it fills the column in my theme.
I’ll try the “Upload before writing” step and see if that works for me.
Good feedback. It’s probably time for us to make the 600 width a preference. I like having that default because it looks good most places, but I can see how in some themes it doesn’t make as much sense. By the way, there’s no problem with keeping the width="600" in HTML and then overriding it with CSS on your blog to be full-width.
I’d definitely prefer if Micro.blog made it easier to copy Markdown code for uploaded images and not HTML (could make a preference or another button under each image).
If you’re using the Mac app, if you control-click on an upload and hold down the option key, you’ll get a Copy Markdown menu item for the image. I know it’s a little hidden! We’ll have to figure out how to add this on the web as well.
