There are many different opinions about “optimal” image sizes for the web, but there are some definite best practices. These guidelines will help your photos and graphics display fast on your website, as well as improve user experience and page download time.
While pages and posts can have different image sizes, as well as featured image sizes, the guidelines below represent the “largest” that should be used.
NOTE: Because image sizes vary from site-to-site, this guide is only a general guide. For image sizes on certain sites on the LAS WP Network, please see Image Sizes on WP Network Sites. (link coming soon)
#1 Guideline: Pixel Size (Height/Width)
The pixel size is basically the height and width of your photos. If you download a photo, either from a stock image site or from your digital camera, the pixel size will generally be quite large such as 5000px x 3000px.
The main viewable window in any of the LAS themes we use is a maximum of 1200 pixels unless you are breaking the container block.
An exception to the above is if you upload a version for a thumbnail and a larger version for viewing, and link the thumbnail to the larger version so a user clicking on the thumbnail will see a larger version.
- Maximum width of images constrained in the container: 1200px
- Maximum width of images that break the container: 1600-1800px
If your image is larger than 1200px wide, resize the image either using Photoshop or an online photo application such as Picmonkey (linked below).
When choosing a header image for a page, it is important to choose a width/height ratio that is pleasing to look at. Generally, you will want an image close to the 3:1 ratio of width to height. This helps keep content high on your webpage without filling up the screen with a header image.
Here are some examples of header images sizes.
The height of the images is arbitrary, but best-practices say each “header image” on your website should remain consistent on pages. The Iowa State Homepage uses a standard image/header height of 1260x447px in its caraousel.
When you use images on the web, it is possible to tell the web browser how big to actually display the image. This is why you sometimes see really large image sizes scaled down to really small images on a webpage. Scaling images can sometimes make the browser slow and laggy when scrolling up and down the page.
For instance, if we have a directory photo that is 6000pixels high and 4000 pixels wide, and we automatically scale that down to a smaller size such as 600×400 pixels, placing a number of these on a page will be problematic since you are placing really big files and just making them smaller when you display them.
It is always best to resize your images before uploading them, rather than relying on WordPress or the user’s web browser to carry the heavy load of resizing images.
Since the web began using images, there has been a consistent guideline of using 72 DPI images on the web. While the exact intracacies of how DPI (dots per inch) relates to both size and file size, this remains a very good guideline when putting images on the web.
The higher the DPI, the greater the file size, but not necessarily the greater the pixel size. You might have an image that is 1200×600 pixels at 72 DPI, and a 1200×600 pixel image at 600 DPI. The image at 600 DPI is still the same size, but is significantly larger in file size so it will take longer to download.
File size is directly related to both pixel size and DPI. For the web, we generally want the lowest filesize possible, while maintaining the best user experience. In other words, the smallest file that looks the best.
Picking a target file size is pretty arbitrary. In today’s web world, it is usually advisable to have each image be less than 1MB in size, optimally less than 500K, and even better if under 100K.
Having a web page load quickly is a key component of Search Engine Optimization (SEO).
Choosing the right file type for a photo can help keep the file size down while maintaining image quality. Here is a simple list of when to use different file types:
- JPG – photos, real life, lots of colors
- GIF – rather out-dated, but can be used for images with low number of colors
- PNG – a “GIF replacement” – use when you have a substantial number of blocks of color such as icons/charts/graphs or need transparency
Resizing Your Images
You can resize your images in either Photoshop or via one of the following free image resizing websites:
Remember, keep both resolution (DPI), image size (height/width) and file size in mind when resizing images.
Why It Matters
Uploading the right image size not only helps your visitor have a great experience, it also helps in other areas such as Search Engine Optimization, server storage, backing up your site, and more. The smaller and more optimized your photos and images are on your website, the better overall.