About » The Process » What size should my images be for the web?

What size should my images be for the web?

What Size Do You Need for Uploading?

The images you send will be re-sized for you to reasonable sizes for the web but it if you take the time to reduce them all to about 1000-1500px high before you send them, the uploading process will be faster—especially if you have a lot of images.

If you resize your images to either the max-size at which you plan to display them (or slightly larger) before you upload them to your website, you will probably get better image quality than you will if you rely solely on the image-resizing functionality of your content management system (and definitely better image quality than if your content management system doesn’t handle image-resizing at all). *

Photoshop is the best image-editor for quality resizing (and you may like to read “how to resize images for your website in photoshop” about taking careful steps in the process) but it’s an expensive program if this is all you’d use it for. Your computer’s image-editor may work for you or you could try the free software Canva (which does a lot more than resizing and is popular with Instagram users).

The most important thing is to only use images that are as large as you want or larger. Don’t ever upload an image at a smaller size than that at which you want to display it.

What Size Do You Need for Display on Your Site?

Regarding what size they need to be displayed at, you need to think about the size of the device screens on which they are going to be viewed, among other things.

If you are using WordPress, you (or your developer) can set up a srcset of images at various custom sizes that will be automatically created for you as you upload your original-size images. If you are manually adding images to pages or posts, you can also use the WordPress image-editor to reduce the size of large images within the page or post.

If you are using a set-up without automatic image-size selection, you can set the stylesheet to constrain the width of the image to its container. This will usually look fine but it can result in larger-than-necessary file-sizes for mobile devices so you would do better to manually create several different sizes and set up responsive rules to use the most appropriate version of the image for each device.

An Example

The image below has been uploaded at 1200x800px and resized with the WordPress image-editing options to display at 1100x733px. If you reduce the width of your screen it will re-dimension to fit the window automatically. The resizing is set up in the site’s code (actually, css).  If you drag it off the screen at any point, you will find you have the original 1200x800px image—so that will give you some idea of what size is not too large. If you click the image, you’ll see the same image used in a slideshow on this site where the display is set to be 750x500px (or less).

web design for a fitness coach, lecturer and choreographer

The Absolute Simplest Approach?

If working with code and/or stylesheets are not your thing and you are not working with a developer, the safest bet would be to upload images at around 1000-1500px high. That will cover you for most situations without risking the worst in terms of file-size (these will still be overly-large files for mobile devices but they won’t be as bad as images that come straight off a high-resolution camera).

* One exception to the practice of preparing images close to the size at which you’ll need them is Squarespace. They have a re-sizing process that first creates a really large image from whatever you upload (even if you’ve uploaded a small image because you only need it to be small) and then reduces the size back down to what you want—leaving you with a blurry version of an image that may have been quite sharp before you uploaded it (increasing photo size always increases fuzziness in an image). So for Squarespace, always upload images that are between 1500-2500px wide.