Four Island

I know I've mostly been writing blog posts that are thousands of words long lately, but this is going to be a quick one! I just wanted to share some webdev advice that might be helpful. Maybe I can actually use my blog as a blog sometimes!

I like to include a lot of media in my aforementioned very long blog posts, in order to break up the blocks of text. The problem with this is that all of that media has to load, and it can be a little slow depending on how large the files are. By default, web pages do not know how much space to reserve for external media, which results in the contents of the page shifting around as everything loads in. This can be annoying, especially if you refresh the page when you're somewhat far down.

The main way to solve this problem is to set the HTML width and height attributes on the <img> tag. This way, the page can reserve the appropriate amount of space before the file gets fully downloaded. The reason this doesn't immediately work for me is because most of my images are intentionally wider than the content area of my website. I have max-width: 100% set on img tags in blog posts, which shrinks the image down to the right size. But if you have the image's height annotated on the img tag, the image will shrink to the correct width, but will be stretched out to the original height! Uh oh!

Luckily, the fix for this is very simple:

.entry-content img {
  max-width: 100%;
  height: auto;
}

Yeah, CSS just has a built in way to set the height that preserves an image's aspect ratio. I was originally playing around with the aspect-ratio property, which lets you do exactly what you'd assume. It does work; I set aspect ratios on all of the images in a couple of posts and it correctly reserved vertical space given the width of the content area. But, semantically speaking, it makes a bit more sense to annotate the actual width and height on the element instead of providing it as an aspect ratio.

Here you can see how much of a difference this can make! This is a recording of me refreshing the history of updates to The Witness, a notoriously long post with many images and videos in it. On the left is the article before annotating dimensions and on the right is after:

I've gone through and updated all of my modern-era blog posts with size annotations for the images, so that the pages don't move around while loading. It's a little annoying, because it means I can't use the Markdown format for adding images to pages; I have to use <img> every time. But it's worth it! I hope this little blog post was interesting to read.

(Side note: it's kind of amusing that the other (very old) CSS advice post on this blog also had to do with reserving space so that things don't move around.)

(Second side note: maybe I also need to be setting cache times on my hosted images so that they don't have to get re-downloaded every time the page is loaded... It's not surprising that I haven't yet though considering Rails does not seem to properly support it.)