What size should my images be for the web?

Most images on a website never need to be larger than about 1100-1500px on their longest side, and if they’re only going to be a small image on a page, you might not need that to be more than 900px.

Work back from the largest size the image will appear at. Most screens now pack two or more of their own pixels into every one the layout measures in, so an image displayed in an 800px-wide space needs to have 1600 pixels of detail to display well. For reference, a wide desktop can have dimensions of 2560 x 1440px (though most images will be displayed at less than 50% of that width).

Exceptions to the 1100-1500px guideline.

• Images of artworks. You can use 2560px as the max length for an artwork image as these need to be displayed large on single pages.
• Images you want visitors to be able to magnify. Details of a work, text in a document, anything meant to be examined closely. Sending an uncompressed original to every visitor would make the page slow for all of them, so this needs a separate arrangement that shows the large version only to the person who asks for it. We can set that up for you.
• Full-cover banner images. Though these often don’t need to be high-resolution, they stretch the whole width of the browser window, so 2000-2560px wide is the right range.

If you resize images yourself before you upload them, you will get better quality than if you leave the resizing to your website.

Never upload an image smaller than the space it has to fill. Enlarging a digital image makes it blurry, and nothing recovers detail that was never in the file. If a small image is all you have, it is better to display it small.

Finding out what you have

Before you resize anything, look at what you are starting from. You want two numbers for each image: its dimensions in pixels, and its file size.

• On a Mac: select the file and press Cmd+I. To see a whole folder at once, switch the Finder window to list view and turn on the Dimensions column.
• On Windows: right-click the file, choose Properties, then the Details tab. In File Explorer, Details view can show a Dimensions column for the same folder-wide view.

File sizes are given in kilobytes, megabytes, or—for scans and layered originals—gigabytes (KB, MB, GB). As a target for the finished web version: under about 300KB for a general image on a page, and under about 500KB for a full-width banner.

File formats

JPEG is the right format for almost every photographic image on a website. Save at medium quality; maximum quality gains nothing you can see on a web page and multiplies the file size. (The one exception is an image you have set up for magnifying, where the fine detail is the whole point.)

WebP is also safe to use. It will not rescue an image that is simply too big in pixel dimensions, though. When a file is too heavy, resizing it is the fix, whatever format it is in.

Use PNG only for images that need to be partly transparent—a logo designed to sit over a colored background, for instance. PNG files are enormous next to the equivalent JPEG, and for a photograph you get nothing in return for the weight.

Avoid files that were prepared for print. Images saved for a print job carry embedded color profiles and other production data, and they are stubborn: compressing them barely moves the file size, because the weight is not in the picture itself. Their colors also shift when a browser displays them. Re-save for web, in sRGB, before you upload.

Convert photographs off your phone. iPhones save as HEIC by default and websites reject the format outright. Either set the camera to Most Compatible, or export the photographs as JPEGs.

Resizing a whole batch

Work on copies and keep your originals untouched somewhere separate. Resizing throws away detail permanently.

• Photoshop handles a folder in one pass: File → Scripts → Image Processor. Point it at your folder, tick “Resize to Fit”, set the width and height limits, choose JPEG and a quality of around 6, and it writes resized copies into a new folder and leaves your originals alone. This is the best route if you have it.
• Preview, on a Mac, is already installed and does batches perfectly well. Select all the images in the Finder, open them together in Preview, press Cmd+A in the sidebar to select them all, then Tools → Adjust Size and set the longest side. File → Export Selected Images then writes them out as JPEGs with a quality slider.
• XnConvert is free, works on both Mac and Windows, and is built for exactly this: drag in a folder, add a Resize action, set the output to JPEG, and convert. Useful if you are on Windows, or if you have a large batch and no Photoshop.
• Squoosh (squoosh.app) works one image at a time, with a slider and a side-by-side preview. It is the right tool for a single stubborn file, and for seeing for yourself what a quality setting actually does to an image.

Naming your files

Filenames travel with your images onto the website, so they are worth getting right before you upload.

• All lowercase, with hyphens instead of spaces: red-vessel-2019.jpg.
• No apostrophes, commas, accents or other punctuation.
• Keep the file extension exactly as it is (.jpg).
• Make the name describe the image. IMG_4821.jpg tells nobody anything, including you in two years. What you can do to keep it in sync with the original is rename that file something like red-vessel-2019-4821.jpg.

If your content is being imported from a spreadsheet, the filename matters more: the spreadsheet carries the filename of the image belonging to each record, and it has to match the actual file exactly, extension included. See Preparing a Spreadsheet for Import into a Website.

For WordPress users

If you upload an image with either dimension greater than 2560px, WordPress automatically creates a “scaled” copy at 2560px and uses that one on your pages. Its resizing is cruder than what an image editor would give you, so a very large image can arrive on the page looking soft. Resize before uploading and the question never comes up.

There are two situations where the original does need to be that large: a magnifiable image, and a very tall image that has to run at full width. Both need the full-size original reached directly, which is something we set up for you.