Theme Image Sizing Guides

Below are some general dimensions for how large to size your images in all our themes. 

• Curious what @1x and @2x refers to? Read our article on Understanding Retina Display.
• Uploading images and they look blurry? Read this.
• Need help with Featured Images? Start here.

JUMP TO YOUR THEME:

• Barton
• Hayes
• Pearl
• Rania
• Presidio
• Miramar
• Brevier
• Archer

The sizing information below may also be found in your Documentation PDF, included with your email purchase receipt. The PDF version includes additional sizing tips and examples to help you choose the correct image sizes for your specific Barton layout.

Home Page Featured Images

SHOWCASE IMAGES

Barton’s Home Page features a unique Showcase area, with the option to create a one, two, or three-column layout. Within each column, you may opt to feature a blog post, or widget(s).

Minimum image sizes for each Showcase layout and relevant content pieces are below. Where only width is given, you may edit the photo to your preferred height depending on the image/feature at hand. All image sizes below are listed @2x to accommodate Retina displays:

BLOG FEED FEATURED IMAGE SIZING

Barton features four different post feed layouts, with the option to choose from portrait, landscape, or square images within most of the feeds. You can approach featured image sizing for these thumbnails in one of two ways:

1. Size featured images based on your chosen post feed layouts, and upload separately sized images into blog posts (saves server space since image file sizes will be slightly smaller for featured images), OR
2. Upload all post featured images and images embedded into blog posts at a single, consistent width of 1700px (results in larger image files than needed on featured images, but only have to remember one dimension)

OPTION 1: Uploading featured images based on your post feed layouts

The image sizes listed below work across all four feed types (Classic, Classic (Large), Grid, Featured).

To determine which size will work across your chosen feed layouts and image orientations, refer to the list of image sizes below and choose the largest overall size.

• Landscape featured images: 1200x800px (@2x) / 600x400px (@1x)
• Square featured images: 760x760px (@2x) / 380x380px (@1x)
• Portrait featured images: 1250x1660px (@2x) / 625x830px (@1x)
• Showcase with single column, single post (large landscape image): 2600x1240px (@2x) / 1300x620px (@1x)

OPTION 2: Upload all blog post images and post featured images at 1700px width

You may also opt to upload image all featured images at the Single Post page sizing of 1700px (@2x), and each will re-crop within the featured image container at hand within your feeds. This is an easier option for some users, as they only have to remember one image width dimension as they create content for their blog—whether embedding an image into a post, or uploading it to a featured space. Just make sure the height of these images meets the minimum featured image sizing, as listed above!

Barton Single Post Pages

For full-width blog post layouts, and blog posts featuring a sidebar, the width of the container is 850px/1700px for Retina displays. All images uploaded into the content of your blog posts should meet this minimum width recommendation.

Barton Sidebar Widgets

Images uploaded to your sidebar should be sized at a minimum of 350px wide, but ideally 700px wide. The height of the image can be variable based on the widget you’re utilizing. As a general rule of thumb, we recommend keeping images the same height for like widgets placed in sequence. For example, if you’re using three images within a Barton: Topics widget, try making the images all 700x700px wide, to make these buttons look clean and consistent.

Home Page Featured Images

Featured images should be at least 780x965px (@1x), or 1560x1930px (@2x) for Retina displays. If you upload featured images at this size, they should work within all feature image spaces, no matter the Post Feed type you use on the Home Page.

However, if you are using a full-width blog post layout (see below), you may instead opt to upload all post and featured image content at 850x1055px (@1x), or 1700x2110px (@2x) for Retina, to make it easier on yourself!

Single Post Pages, and Static Info Pages

For both full-width blog post layouts, and static info pages without a sidebar, the width of the container is 850px/1700px for Retina displays.

Because of Pearl's unique layout options—inclusive of the Home Page slider which features landscape/horizontal images—there are several sizing parameters to take into account when choosing an appropriate featured image size for your theme. We've included a comprehensive list of featured image specs below. As a general rule, read through the settings below, and select the largest dimension based on the features you have enabled. For example, if you are not using the Featured Posts slider, you can ignore the minimum sizing listed here, and instead reference the largest featured image size of Post Feed layouts you've enabled. If you ARE using it, since this features the largest image width of any specification listed below, this should be your minimum image width for any featured image uploaded site wide.

Featured Images

Pearl's Home Page features a number of different post feed layouts, all of which can be mixed and matched. Below are the exact featured image sizes for each. If you have designed your Blog Feed so that you are only using a single type of post feed layout, use may the corresponding layout's featured post dimensions. If you have mixed and matched layouts, use the dimensions of the largest image featured in your feed.

• Offset Feed Featured Image: 540x730px (@1x) / 1080x1460px (@2x)
• Classic Feed Featured Image: 350x475px (@1x) / 700x950px (@2x)
• Grid Feed Featured Image: 255x348px (@1x) / 510x695px (@2x)

A note for Grid Plugin users: If you have purchased and installed the EmPress Grid Plugin in your Pearl theme, Grid image sizes are 360x490px (@1x) or 720x980px (@2x). Be sure any featured images you are uploading meet or exceeds this size, regardless of the post feed layouts you have enabled on your Home Page.

Featured Posts Slider

When enabled, the Featured Posts slider will auto-feed and display the featured image attached to blog posts. We recommend uploading a featured image at least 1500px wide (for @2x Retina displays) to any posts featured in the slider. The slider will then automatically crop the images to fit within each container. Note that the height of these images should meet or exceed a height of 1140px. The exact slider image dimensions are 740x570px (@1x), or 1480x1140px (@2x).

Single Post Pages, and Static Info Pages

For both full-width blog post layouts, and blog posts featuring a sidebar, the width of the container is 750px/1500px for Retina displays.

Too much to remember?

If you prefer to remember only a single image width for all images uploaded to your blog, make it 1500px wide. Images sized this large would work in any Post Feed layout on the Home Page, in the Grid plugin, on blog post and info pages, as well as in the slider (so long as the height of that image was 1140px).

General Rule

A standard size for all images across your blog posts and featured images is  1560px in width. For featured images, in addition to being 1560px in width, the image should be a minimum of 1280px in height (height can be variable for an image beyond this, but this is the minimum height). At this size, images will have no problem fitting into featured image thumbnails, and will look good within blog posts, regardless of whether your posts feature the sidebar, or display in the “full-width” layout.

Landscape Featured Post Size

Note that the 1560px size above assumes you’ll always have two featured posts featured at the top of the Home Page ( like this). If you ever switch to only one featured post (like in this example, with the perfume post at the top), the featured image for that single featured post would need to be uploaded at 2080x1280px.

Size all images theme wide at a minimum of 720px wide (@1x) or 1440px (@2x). Images at this width will fit across all containers throughout the theme.

Size images embedded into blog posts at 850px wide (@1x)  |  1700px wide (@2x)

Featured Images for blog posts (as displayed in the Home Page feed): 600x640px (@1x)  |  1200x1280px (@2x)

FEATURED POSTS

Miramar includes space for one or two featured posts at the top of the Home Page. Learn how to enable your featured posts here.

With both Featured Posts enabled

When you have both featured posts enabled:

• The dimensions for Post #1 are 700x490 (@1x) or 1400x980px (@2x) for Post #1. 
• For Post #2, the dimensions are 450x490px (@1x) or 900x980px (@2x) for Post #2. 

With only Post #1 enabled

If you are using only the large, landscape featured image (i.e., you have disabled Post #2), try sizing your featured image for Post #1 at 1200x654px (@1x) or 2400x1310px (@2x). This should be large enough to fit the space at the top of the Home Page, but also tall enough to look good within your Home Page blog feed. Keep in mind that this large, landscape image will be cropped to fit Miramar's more squared-off blog feed featured images.

• If you are using a sidebar: 700px wide (@1x)  | 1400px wide (@2x)
• If you are not using a sidebar:  900px wide (@1x) | 1800px wide (@2x)

Size featured images at 800px wide (@1x) | 1600px wide (@2x)