I futzed with this a while back but never posted it, and it’s something that took just enough MDN consultation to figure out the right CSS property (object-fit: scale-down;) that it might be handy for someone to be able to shortcut.

If you’re fond of those old 88 by 31 pixel banners everyone used to have, you may want to display some yourself. This can then be tricky if you have an image that makes sense to use for one but would be better not to modify, as when it’s provided externally1.

You will need to know the background color that makes sense for your image. If the image is something you have open in a browser, you can use developer tools to eyedropper the color (Chrome, Firefox) to get a CSS compatible version of it. If you’re doing this with a transparent background image you can pick whatever makes sense to you.

For an example, I’ll use this sticker from Giphy:

it's a lifestyle

It’s questionably legible to start with, so it’s only going to get worse at a smaller size, but these are the sacrifices we make for authenticity.

The HTML will then look something like this:

<a href="https://www.myrecipes.com/extracrispy/what-do-goths-eat-for-breakfast">
  <img 
     style="height: 31px; width: 88px; object-fit: scale-down; background-color: black;"
     alt="It's a lifestyle"
     src="https://media3.giphy.com/media/IdI4cbTCChFXzSjx1H/giphy.gif">
</a>

Which will in turn get you this:

It's a lifestyle

Substitute in your desired link target, background color, alt text, and image source2.

I’ve provided the CSS inline here because it’s the kind of thing I like being able to copy and paste around without defining classes or whatnot. If you are a professional, then you’re probably not looking for advice from me anyway, but feel free to move to a stylesheet, of course.

You may want to consider setting your image-rendering CSS property up to make it nice and crunchy and pixelly for extra authenticity.

  1. Or as when you are lazy and do not want to figure out how to make the resize sharp with whatever tools you have to hand. ↩

  2. If you don’t provide alt text, you may fall victim to a curse. ↩