My First Post With Images

A baby step towards a blog

Images and SEO

So apparently images are a thing regarding SEO. I figured I would at one point need to add support for them, but it seems I also need them to make money off of you guys. While I agree that most blogs become more entertaining if you are met with something other than a wall of text, I would argue that my first blog post - Witness Me - is high quality content, despite its visuals. Anyways, money talks, so now I'll venture into this post about how I've added images to this blog.

Next.js & Images

Luckily images and image optimization is one of the basic features of Next.js. All I had to do was find the docs page for it, copy paste some code and voilá: an image appears.

With the code from picture above the first image is generated. That all works smoothly, exept for the fact that they are shown in their original size. I'd rather not have my blog looking like this, with images overflowing to the screen on the neighbouring desk.

Getting flashbacks to previous googling runs of "fit image in parent", "preserve aspect ratio image css" and "set image height based on width", I struggled to keep my cool. Returning to the Next.js docs they actually adressed this. While providing props for styling this to the Image component (in addition to the existing style prop), I don't see myself wanting anything but an image that fits in its parent any time soon. Correspondingly, I added global styles to make all images behave this way. So if this page were to be indexed and someone needs the answer to "preserve aspect ratio image css", the answer is a few simple lines of styling:

img {
    width: 100%;
    height: auto;
}

With the height set to auto, the image will automatically get the hight needed to preserve its original spect ratio.

That would be all for today ✌️