Guidelines for Image Sizes for New Websites

by | Last Updated: Feb 27, 2023 | Blog, WordPress & web development

When selecting images for use in a new website, here are general guidelines to use for image sizes:

Image Guidelines

  • What you upload depends on where you want to use it on your website.
  • The proportions of the image are more important than the size (so that it fits where you want to use it and is consistent with other images in the same area on your website).
  • Max image size is important so it doesn’t slow down page load, so the upload shouldn’t be much bigger than the largest display size (unless you are shooting for Retina displays then you need to upload twice the final output size…see below more more on targeting Retina displays).

Min width x height / Max width x height / File Type

Logo: 200×150 / 500×300 / PSD or PNG

Header: 960×150 / 1000×400 / JPG or PNG

Normal content image: 300×300 / 600×400 / JPG or PNG

Full width (in content): 900×400 / 1000×600 / JPG or PNG

Image sliders: 960×300 / 1000×500 / JPG or PNG

Icons: 150×150 / 300×300 / PNG

It makes it a lot easier if we have the actual images to work with rather than placeholders. If we don’t then there is double the work to put in images more than once, and then to perhaps have to work around size variances and layout issues at that point.

In addition, we often use provided images to help come up with a good color scheme for elements of the website, so having all of the assets including the images before we design the website helps a lot in the site building process.

It’s usually best to provide images larger than needed for things like sliders; we can crop them as needed. We can always reduce images, but cannot enlarge them without image degradation.

It’s best not to have to purchase (and upload to the media library) a 1000×1000 pixel image if we are pretty sure we are only going to use it as 400×400 (maximum) in the content area, so it is always best to purchase just above what is needed (maybe 500×500 in most cases unless it is a full width header/banner) and then crop any images in advance of uploading if the end size is known. That saves cost when purchasing any stock images, and reduces the load time by not uploading an image larger than will actually be displayed.

Image Format & Resolution

If you’re using Photoshop do ‘Save for web‘ (PNG24 for most, or JPG MEDIUM), and that should cover it. Otherwise a resolution of 96dpi should be fine. The actual pixel dimensions are most critical (widthxlength).

For any images needing a transparent background, such as a logo, use PNG24.

More on image sizes…

Just within this last year (2012), if you want images suitable for high resolution Retina displays you need to upload images at 2x the actual display size so they don’t look fuzzy. But that can also create a lag on load time, especially on mobile. And is currently very hard and clunky to manage the display across browsers and devices.

As with many things, there are pros and cons to every approach, and techniques for handling this are still rapidly evolving and not yet mature enough to implement in our opinion.

It is not a current requirement within scope of most projects, just a consideration to think about. We don’t even have a retina display to test on. So just stick with 100% actual size images for now (for the first phase of your project).

We can use a Retina Display plugin to display any images that are capable of displaying smaller than the original upload (even if we don’t intentionally load them all at 2x size it will theoretically catch the ones that are displayed 2x smaller than the upload), and we can use a mobile plugin for eliminating some of those larger images from displaying on mobile….but non of that is perfect since these plugins handle all images and not image specific (i.e. header or icons vs. content image), and may not work on all browsers & devices. In some future phase you may want to address this after the techniques mature (very tedious and out of scope of current requirements for most projects).

This is very complicated and cutting edge, and in transition, so the bottom line is go with the image sizes suggested earlier.

Content Satisfaction Survey

We value your feedback. You may remain anonymous if you like.

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

You might also like

None found

Subscribe to our Blog

Follow Us

Latest Posts

Does migrating marketing automation or CRM platforms actually pay off?

Are you thinking about migrating Marketing Automation or CRM platforms and wondering if it’s worth it? Will your company/organization be better off in the long run if you migrate MAP and/or CRM platforms? Download our ‘Marketing Automation & CRM Platform Migration Checklist‘ Google Sheet as a valuable resource to give you some things to consider before making the jump.

How to avoid form spam using marketing automation

Best methods to defeat form spam from bots and human spammers. Whether it’s spam bots or human spammers, we’ll discuss how to identify spammers and provide a best methods on how to defeat form spam.

Quick Tip: Syncing HubSpot with Salesforce Do Not Email

If you are connecting HubSpot with Salesforce and setting up HubSpot to sync with Salesforce, you don’t want to map the ‘Marketing contact status’ field directly to Salesforce’s ‘Do Not Email’ (DNE) field; those fields will not sync the proper values based on how they are intended to work.

Trending Posts

Subscribe to our articles

Like this article? Comment with your feedback below, and subscribe for all the latest helpful information.

Apply to be a Guest Poster if you are interested in writing one or more articles for our blog. To qualify you must be a subject matter expert that aligns with one of our current blog categories.

Related articles…