August 24, 2017
If you’ve been building your own website—or trying to prepare images to hand off to someone who’s building it for you—you’ve probably run into the question of what size and format to use. The answers have changed quite a bit in recent years, so if you’re working from advice written more than a few years ago (including an earlier version of this post), it’s worth a fresh look.
Format first: what to upload
The short answer is JPEG. For photographic images of artwork, portraits, installation views, and most other things artists need on a website, JPEG is the right format—it handles color gradation and saturation well, file sizes are manageable, and every browser, device, and platform handles it without difficulty.
WordPress will also accept PNG files, but the file sizes tend to be significantly larger than equivalent JPEGs. For artwork and photography, JPEG is preferable. PNG is most useful for images that require a transparent background (logos, graphical elements) where JPEG’s lack of transparency support is a limitation.
WebP is a format increasingly promoted as ideal for websites, on the basis that it typically achieves smaller file sizes than JPEG at equivalent visual quality, and unlike JPEG it supports transparency. In practice, however, for artists displaying color-critical work, JPEG tends to reproduce fine color gradations and saturated tones more reliably. And as you’ll see below, WordPress 6+ now handles WebP generation automatically in most hosting environments—so if you upload a JPEG, WordPress will take care of the rest.
TIFF, RAW and HEIC formats need to be converted to JPEG before uploading for website use.
What WordPress does for you these days
This is where things have improved considerably.
When you upload an image to the WordPress media library, WordPress automatically generates multiple size variants of that image—thumbnail, medium, large, and any custom sizes your theme or developer has configured. Those custom sizes matter: a well-built theme will have sizes set up specifically for banner images, portfolio thumbnails, single-work pages, and so on, so that the right size is served in the right context without the browser having to load a much larger image than necessary.
WordPress also handles lazy loading automatically—meaning images further down the page don’t load until the user scrolls toward them. This makes a real difference to how quickly a page initially loads, which matters both for the experience of visitors (people abandon slow pages quickly) and for how search engines assess your site.
Perhaps most usefully: WordPress now serves WebP versions of your uploaded JPEGs automatically to browsers that support the format, while continuing to serve the JPEG as a fallback where needed. You don’t need to do anything for this to happen—it’s handled in the background.
The quality of WordPress’s scaled images has also improved significantly. In earlier versions, scaling a large image down produced noticeably blurry results. That’s no longer the case—scaled versions are now quite decent, which makes image preparation a whole lot easier.
What size should you upload?
The old advice was to resize images carefully before uploading—to upload only as large as the maximum display size on the page in order to keep file sizes small and pages loading quickly. That advice made sense when WordPress’s image handling was less sophisticated and hosting environments were slower.
The situation now is more flexible. A reasonably high-resolution JPEG—for example 2000–3000px on the longest side—can be uploaded and WordPress will serve it at whatever size is appropriate for each context. The advantage of uploading at this kind of resolution is that the original file in your media library is also a useful high-resolution version, available if you ever need to link to a larger view of the work or make the image available for download.
That said, there’s no other benefit in uploading files at truly enormous dimensions (a 6000px scan from a drum scanner, for example). WordPress will generate the sizes it needs regardless, and you’ll be storing a very large file unnecessarily. Something in the 2000–3000px range gives you both flexibility and practicality.
High-resolution images often don’t look any better than medium-resolution images on a website, so if you are making copies of images for your website for which you don’t need a high-resolution copy, it’s fine to save them at medium resolution. You can experiment with this.
For specific contexts, here’s some rough guidance:
Full-screen cover images: if your homepage or any page uses a full-bleed background image, it needs to be wide enough to look sharp on large screens. 1900–2500px wide is a reasonable target. The image will be cropped differently on different screen sizes and orientations, so keep the important visual content away from the edges.
Banner images (partial-height, full-width): 1600–2000px wide is generally sufficient.
Single artwork pages / large portfolio images: 1500–2000px on the longest side. If you want users to be able to zoom in on detail, a larger version linked separately is a better solution than simply uploading a very large image.
Thumbnails: WordPress generates these automatically from your uploaded image, so you don’t need to create them separately. What matters is that your theme’s thumbnail size is configured appropriately—worth checking with your developer if thumbnail images ever look blurry or oddly cropped.
Portrait images: these are often uploaded nearly square or in a tall format. 1000–1500px high is usually sufficient.
Tools for preparing and optimizing images
Photoshop remains a good option if you have it. The “Export As” option (which replaced the older “Save for Web” in more recent versions) gives you control over file size and quality. Resizing in steps—reducing by no more than 50% at a time—still produces better results than a single large reduction if you’re working with very high-resolution originals.
For those who don’t have Photoshop, or want a faster option:
Squoosh: a free browser-based tool from Google. You can resize and compress images and see the before-and-after quality difference in real time before downloading. Very straightforward to use.
ImageOptim: a free Mac application. Drag images onto it and it compresses them without visible quality loss. Good for batch processing.
Both are worth knowing about. The difference between a well-optimized image and an unoptimized one can be significant in terms of file size, and while WordPress handles a lot automatically, uploading a more reasonably sized file to begin with is still better practice than relying entirely on WordPress to compensate for a very large one.
You can also do some basic image editing in the WordPress image editor (cropping and resizing).
A note on page load speed
It’s worth being aware that the total weight of images on a page—all the images added together—has a real effect on how quickly the page loads—especially noticeable when the images at the top of a webpage are large and heavy. Slow pages frustrate visitors and are assessed negatively by search engines. WordPress’s lazy loading helps considerably, as does uploading images at sensible dimensions rather than unnecessarily large ones. If you’re working with a developer, it’s worth asking them whether your theme has image sizes configured correctly and whether any caching or image optimization plugins are in use.
The goal, as ever, is pages that load quickly, look good, and don’t make your visitors work harder than they need to.
Last tip: use words to name your images
Name your images with words by which you’ll be able to search for them. If all your images have names like IMG_4081 the day will come when you’ll regret that. Name that one scream_4081 and it’ll still be traceable to your original image.
