Mastering Web Images
Welcome! This guide is designed for web designers and creators who want to stop guessing and start understanding how images work on the web. We'll demystify why images sometimes look stretched, blurry, or just plain wrong. The most common question is "How do I make my image fit a certain space?" By the end of this guide, you won't just know the answer—you'll understand the principles behind it, empowering you to solve any image challenge with confidence.
Use the navigation on the left (or the dropdown above on mobile) to explore the different topics. Each section includes interactive examples to help you learn by doing.
The Building Blocks: Pixels & Resolution
Before we talk about fitting images into boxes, we need to understand what an image is made of. Digital images are made of tiny squares called **pixels**. The number of pixels in an image determines its **resolution** or **dimensions** (e.g., 1920 pixels wide by 1080 pixels tall).
Resolution vs. Display Size
An image's resolution is its "true" size. You can display it at any size on a webpage, but if you display it larger than its true resolution, it will become blurry or **pixelated**. Let's see this in action.
This is a small 32x32 pixel image. See what happens when we force it to fill a large container.
Original 32x32px
Stretched to 256x256px
Key Takeaway:
Always use an image that is at least as large as the largest space it will fill. If your container is 600px wide, your image should be at least 600px wide. You can always scale an image down without losing quality, but scaling up will make it look bad.
Choosing the Right Image Format
The file format of your image (like .jpg or .png) has a big impact on quality, file size, and features like transparency. Choosing the right one is crucial for a fast, good-looking website.
The Shape of Things: Aspect Ratios
The **aspect ratio** is the proportional relationship between an image's width and its height. It's written as two numbers separated by a colon, like 16:9. A square image has an aspect ratio of 1:1. This is different from resolution! An image that is 600x600 pixels and one that is 2000x2000 pixels both have a 1:1 aspect ratio.
When you try to fit an image into a container with a different aspect ratio, you either get empty space, or part of the image gets cropped. Let's see how that works.
Original Image (3:2 ratio)
Fit this image into a container with a:
Key Takeaway:
If you want your entire image to be visible, make sure your original image has the same aspect ratio as the container it's going into. If you don't care about cropping, you can use CSS to make it fill the space beautifully (we'll cover that next!).
Making It Fit: HTML & CSS
This is where the magic happens! Using HTML and CSS, we can tell the browser exactly how to display our images. Forget stretching and squashing—these tools give you full control.
Our Image Container
<img id="sizing-image" src="..." style="
width: 100%; height: auto; object-fit: fill;
">
Pro Tip: The Holy Grail of Responsive Images
For most cases, this is the CSS you want: width: 100%;, height: auto;. This makes the image fill the width of its container while automatically adjusting its height to maintain the aspect ratio. To control how it fills a container of a specific height, object-fit: cover; is your best friend.
How Page Builders (like Elementor) Handle Images
Page builders like Elementor provide a user-friendly interface to manage images, but underneath, they're just applying the same HTML and CSS principles we've discussed. Understanding this helps you make better decisions in the builder.
1. Foreground Images (The Image Widget)
When you use an Image Widget, you're placing a standard <img> tag. Elementor gives you controls that translate to CSS properties.
Elementor Image Widget Panel
2. Background Images
When you set a background image on a Section or Column, you're not using an <img> tag. Instead, CSS properties like background-image and background-size are used. The controls look different but achieve similar results.
Elementor Section Style Panel
Common Mistakes & How to Fix Them
Let's look at some common image problems and the simple solutions to fix them. Click on each card to see the fix.
Problem: Stretched or Squashed Image
The image is distorted because a specific width and height were set that don't match its aspect ratio.
Solution: Use `object-fit` or `auto` height
Option A: Set height to `auto` and let the browser figure it out.
Option B: Use `object-fit: cover` to fill the box without distortion.
Problem: Blurry or Pixelated Image
A small image is being displayed in a large container, forcing the browser to stretch it beyond its original resolution.
Solution: Use a Higher Resolution Image
Upload an image that is at least as wide as the largest container it will fill. Here, we've replaced the 100px image with a 400px one.
