Responsive images that look sharp on any device

To make images look sharp on any device, upload each one at about twice the size it appears on screen, save it in a modern format like WebP, and make sure your site serves smaller copies to phones and larger copies to big screens. Then compress the file so it loads fast. That's the whole recipe. The rest of this post explains each step in plain English, so you can do it (or check that your website builder is doing it for you) without touching code.

Why do images look blurry on some screens and fine on others?

Every screen is made of tiny dots called pixels. An image is also made of pixels. If a photo is 500 pixels wide and your site stretches it across a space that's 1000 pixels wide, the screen has to invent the missing detail. The result is soft, fuzzy edges.

It gets trickier because many phones and laptops pack two or three screen pixels into the space that used to hold one. People call these high-density or "retina" screens. A photo that looks fine on an older monitor can look slightly soft on a modern phone, because the phone needs more pixels to look crisp.

The rule of thumb: your image file should be about twice as wide as the space it fills. If a photo sits in a column that's 600 pixels wide on screen, upload it at around 1200 pixels wide. Going beyond that rarely helps and just makes the file heavier.

What size should I upload?

You don't need to memorize numbers for every layout. These starting points cover most small business sites:

• Full-width banner or hero image: around 2000 pixels wide.
• Image beside text or in a content column: around 1200 pixels wide.
• Small thumbnails, product cards, team photos: around 600 to 800 pixels wide.
• Logos and icons: use an SVG file if you have one. It's a format made of shapes instead of pixels, so it stays sharp at any size.

If your original photo came straight off a phone, it's probably 4000 pixels wide or more. That's far bigger than any web page needs, and it will slow your site down. Resize it first. Free tools on any computer or phone can do this, and most website builders can do it automatically.

How does one image work on a phone and a desktop?

This is what "responsive" means. The page adjusts to the screen it's on. For images, there are two parts to it.

First, the image scales to fit its container. On a phone, a wide photo shrinks to fit the narrow screen instead of running off the edge. Nearly every modern website builder does this by default.

Second, and this is the part people miss, a well-built page can offer the browser several sizes of the same image and let it choose. A phone on a slow connection grabs the small version. A large desktop monitor grabs the big one. Developers do this with something called srcset, which is just a list of image files and their widths written into the page. You don't have to write it yourself, but it's worth asking your website tool whether it creates these versions for you. If it does, you can upload one good image and stop worrying.

If you're not sure what your own builder does, our frequently asked questions page is a good place to start, and you can always get in touch with a question about how your site is set up.

Which file format and file size are best?

For photos, use WebP if your tool supports it. It produces files noticeably smaller than JPEG at similar quality, and every current browser can display it. JPEG is still fine if WebP isn't an option. Use PNG for graphics that need a transparent background or have sharp text in them, and SVG for logos and simple icons.

As for file size, a good target is to keep most images on a page well under 200 KB (kilobytes), and hero images not much beyond that. That's a rule of thumb, not a law, but it keeps pages quick on mobile data. Compression is what gets you there. It trims the file by discarding detail your eye won't miss. Set quality somewhere around 75 to 85 percent and compare the result with the original. If you can't tell the difference, you've compressed it well.

Two small habits help as well:

1. Lazy loading. This tells the browser to load images further down the page only when a visitor scrolls near them. Your top-of-page content shows up faster.
2. Alt text. This is a short written description attached to each image. It helps people using screen readers, and it gives search engines and AI assistants a clear idea of what the picture shows. Write it like you're describing the photo to a friend over the phone.

How to check your images are working

Open your site on your phone and on a computer. Look at the biggest image on the page. Is it crisp, or are the edges soft? Does the page feel slow to load? If either answer is bad, the image is probably too small, too large, or in the wrong format.

For a quicker read, run your address through the free website grader, which scores an existing site and can point out where it's falling short.

If you're building a new site, SimplePath lets you describe what you want and builds it for you, whether that's a simple site, a store, or a blog. You can see the full range on the products page. Whatever tool you use, the habits above still apply: right size, modern format, small file, clear alt text. Get those four right and your images will look good wherever people open your site.