How to break your site with images

Long ago, the World Wide Web was nothing but text. Then, some genius realized you could encode images and have browsers display them, and we've been suffering ever since. Images now play a crucial role in web development, but when handled poorly, they can break your project, like literally break your site.

So just for fun, here’s a handy guide on how to absolutely ruin your project with images.

⚠️ Warning: Following these steps may lead to complete project failure (and angry clients).

1️⃣ Don't specify image sizes
Why bother with height and width? Just let the page jump around as images load. Users love a little layout shift.

2️⃣ Forget responsive images
srcset? picture? Too complicated. Just force mobile users to download that glorious 4K hero banner. Their data plan will thank you.

3️⃣ Use images that are way too big
Because nothing builds character like waiting a full minute for a page to load.

4️⃣ Or too small
Stretch that 60px thumbnail into a full-screen masterpiece. Blurry images are good exercise for the eyes.

5️⃣ Skip accessibility
Alt tags? Who needs them? Definitely not screen readers, SEO, or literally anyone.

6️⃣ Skip compression
Go ahead. Upload raw uncompressed files, bonus points for BMP files. Who cares if your landing page weighs 250 MB? It’s not about bytes, it's about aesthetics.

7️⃣ Aspect ratio is for the weak
Squash and stretch images until they’re completely unrecognizable. Distortion is art.

8️⃣ Don't be lazy
Make sure every single image, especially the 100 MB ones, loads immediately. Don’t be lazy, your users love waiting, remember?


Obviously, we're kidding. Please don’t do any of this. In fact, we have a nice blog post that details how you should treat images you can check out instead:
👉 8 tips to bring your website images to the next level.