In General

Images should be minified and compressed to the smallest size possible, however we take care of a lot of that for you with automatic resizing when you upload to WordPress.  Images should always be AT LEAST as wide as the minimum width for whichever size is being used (most often we will note this in the backend of your site, but when in doubt, 1600px wide is usually a good place to start.)  See some common image sizes below.

*Note: most images from a smartphone or point and shoot camera are plenty large, even for a hero image!

File Types

File types affect image sizes which in turn affect performance.  Here’s a guide to choosing what file type to use:

  • photos should mostly be JPGs
    (PNG works but will usually be a bigger file and is best used ONLY if you need a transparent background)
  • images with a transparent background should be PNG
    (often this includes your logo, but SVG is preferred
  • icons, logos or anything that will need to be crystal clear should ideally be SVG
    (SVGs are web vector files and are scalable)
  • documents, manuals, anything with lots of text should be PDF
  • we don’t support (and you can’t actually upload) the following file types to WordPress: TIFF and GIF

WordPress Resizing – like magic!

WordPress automatically creates multiple sizes of the same image when it is added to the media library. That means you do *NOT* need to deliver all sizes for each image, as long as it is large enough for the largest size used. WordPress will create all sizes that are SMALLER than the uploaded image.
For example: If you upload a 2400px wide image it would create: (note, these specifics are set within our custom templates)

  • a ~1600px wide image (hero) – this often also replaces the “original” image since it is the largest size needed.  (size may vary depending on design)
  • a ~1280px wide image (large – width may vary depending on design)
  • a ~600 px wide image (medium – width may vary depending on design)
  • a thumbnail

If you upload a 700px wide image it would create:

  • [no large or hero created, as image is smaller than these minimum widths]
  • a 700px wide image (the original)
  • a ~600px wide image (medium)
  • a thumbnail

Typical Image Sizes

Hero image (Full width of screen)

Images that bleed to the edge of the screen like large banners at the top of a page. Cropping of the height is automatic so the closer you match the aspect ratio in the designs, the less of the image that will be cropped.

  • Min width:1600px
  • Max width: doesn’t matter, as long as the image is under 2KB.  Smartphone images are plenty large, and usually still under 2KB.  Photos from an SLR might need to be reduced.  If batch editing, a width of 2000px is usually a safe bet.
  • Ideal proportions: 1600px x (whatever height maintains proportion) – ie 4/3 ratio would be 1600x1200px

Large Images (often full width of the content area)

Large images that often fill the area they are constrained to.  These may be very similar in sizing to your “hero” images.  Again, height and cropping typically is done automatically so the more closely you match the design proportions, the less of the image that will be cropped.

  • Min width: 900px
    **It’s totally fine for large images to be a bit bigger – they will be resized on upload.
  • Ideal proportions: (anything wider than the Max width) x (whatever height maintains proportion)

Medium (images that are 1/3 or 2/3 width of the screen – perhaps in a 2 or 3 column grid)

Again, height and cropping typically is done automatically so the more closely you match the designs, the less of the image that will be cropped.  Medium images can vary in sizing depending on your site needs.  Sizing will be set during development to most closely match your designs.  Multiple custom image sizes may also be set if necessary.

  • width: varies, from ~450px – 900px
  • Ideal proportions: (anything wider than the Max width) x (whatever height maintains proportion)

Thumbnail (smaller, auto generated versions for grid of items or list of blog posts)

Thumbnails usually do not need to be created by the user, as they will be auto-generated from the larger image sizes. They may or may not even be used on the site.  Typically thumbnails are 150×150 or 300×300 squares and represent a teaser for a blog.