Don't just display a boring ALT text when your image doesn't load
Don't just display a boring ALT text when your image doesn't load
Did you know that you can display a nicely styled text instead of the default ALT text in case your image is broken?
Before we dive in to today’s issue, I’d like to let you all know that I’ve moved this newsletter from Revue to Substack because the former is shutting down. But I’m loving Substack already :)
You can now join the CSS Simplified chat on Substack. This is a conversation space in the Substack app that I set up exclusively for my subscribers — kind of like a group chat or live hangout. I’ll post short prompts, thoughts, and updates that come my way, and you can jump into the discussion.
To join our chat, you’ll need to download the Substack app, now available for both iOS and Android. Chats are sent via the app, not email, so turn on push notifications so you don’t miss conversation as it happens.
Download the app by clicking this link or the button below. Substack Chat is now available on both iOS and Android.
Open the app and tap the Chat icon. It looks like two bubbles in the bottom bar, and you’ll see a row for my chat inside.
That’s it! Jump into my thread to say hi, and if you have any issues, check out Substack’s FAQ.
Alright, now onto today’s topic
Change the default ALT text display when the image doesn’t load
We try our best to make sure that none of our images are broken but sometimes we end up changing the image name but miss updating in some places in the markup. What do our users see? Something like this 👇
Looks bad right? If not anything, you can change the font size and color of the ALT text so it looks slightly better. For this, you need to simply add those styles directly to the image. It will not affect the image in anyway. These styles take effect only when the image doesn’t load.
But this isn’t enough. How do we make it better?
Using pseudo elements
We can use the ::before and ::after pseudo elements to display more text. The best part is, these pseudo elements’ content will be displayed only when the image doesn’t load. We can center the text too.
Now isn’t this better already?
In this case, we see a message after the default ALT text. You must be wondering, can we remove the ALT text entirely? Or replace it wioth something else? Yes, absolutely!
Use the same pseudo-element, but this time place it above the ALT text using absolute position and z-index. You can still include the ALT attribute in the content, so the user gets more context.
I totally love this display. What about you?
Let me know how you liked this issue. (You can reply directly or use the chat too)
Here’s the link to the full demo on Codepen.
📘 Complete Guide to CSS Flex and Grid
If you loved this write-up and how it was explained, you’ll absolutely love my eBook CSS Flex and Grid. Check it out!
📨 Newsletter suggestion
I love Tailwind CSS. If you love it too, I highly recommend subscribing to this one 👇
Tailwind Weekly: Weekly newsletter about all things Tailwind CSS. New issue every Saturday.