When working on website design or layout, or creating applications, sooner or later you’re likely to face two major enemies of any project: deadlines and images. And no matter how many guides have been written on how to compress images while maintaining quality – the problem is timeless. Sometimes, for one reason or another, images stop matching the layout; they require extensive retouching, color correction, resizing, and so on. Yet we all want to do more in less time, which makes the issue of saving time especially painful and pressing.

However, even in web layout there are hacks, tricks, and little secrets to help you process images quickly and save your precious time. Some of our readers may already know them, some may not – but they’ll never be useless, and even seasoned web developers can find a place for them in their toolbox.

Method 1

We've all been there: “ oh no, time is running out, must go faster, faster .” The deadline is looming, and yet the images refuse to align with the layout, even though everything seems correctly coded.

Let's take a look at the example below.

Looks familiar, doesn’t it? But here’s the thing — the background property is incredibly useful and just works. It’s great for non-content images or when you want to replace text, enable printability without the image, or reduce page load time. More on the usefulness of this property here . And nearly all browsers support it.

Method 2

Now imagine this same magic could be applied to <img> elements. Let's look at the object-fit property, which works wonderfully with both images and videos. Yes, video content too!

The key is using cover with the right value, but you can also assign contain to object-fit depending on your needs. You can see a working example on CodePen.

One downside is that object-fit is not supported by IE 11 and some versions of Edge. For those, there’s a polyfill that works in other browsers too.

Method 3

Let’s clarify — this method works in all browsers. The idea is to place the image inside a parent container. Then use padding with percentage values and set position to relative . The result: the image stretches to fill the parent’s area. For example, you create a “square,” and the image fills it entirely.

This approach is widely used worldwide. It’s especially handy when embedding YouTube or other video content where the aspect ratio must be preserved. Without this method, black bars often appear — this solves that.

You can see a working example on CodePen , or even in part of the Netflix site.

Method 4

This method will likely be familiar to many of you, but we couldn’t skip it. It's often used in the most basic website layouts. You can see a sample implementation again on CodePen.

Method 5

It’s great to include images and style them via CSS. But here’s another interesting point: web developers often work with large-scale images (width × height). If you resize them on the fly with code, even small delays in rendering each one can quickly add up and slow down page loading. And if there are many such blocks, performance suffers.

We’ve mentioned before that long page loads are undesirable, especially on mobile. While desktop browsers handle heavy images more gracefully, smartphones may struggle.

Fortunately, modern browsers (excluding IE11 and Opera Mini) allow you to serve different image sizes based on screen width using the srcset attribute.

This method also works beautifully when combined with the < picture > tag (HTML5). Mozilla provides an excellent guide on it. While not all browsers support srcset , you can easily fall back to using img if needed.

A full example using all relevant tags and attributes is available on CodePen.

Final tips

We've covered five small tricks that web developers use to optimize images during layout. Some of you may wonder: “ Okay, but which one should I use right now? ” And that’s a fair question — because while all methods aim for the same goal, your choice depends on... your project needs and image types. So here’s a brief recap:

Conclusion

These are small and simple CSS-based solutions for creating responsive, layout-friendly images. They’re widely used, often modified, and likely many of you know even more techniques.

Google itself has dedicated a comprehensive developer article to this topic. Still, many sites — desktop or mobile — fail to deliver adaptive image layouts. Unfortunately, some developers seem to prioritize speed over quality.

But given the high competition in web development (and the internet in general), eventually you’ll need to create something truly refined. Since clients rarely allow much time, the methods we shared can help speed up your workflow — especially when dealing with images. Whether you're embedding video, working with wide-format visuals, replacing text, or preparing pages for print, CSS offers powerful ways to handle it all.