Sliders, Horizontal Galleries, & Blog Post Featured Images

Dimensions: 1500w x 1000h

Filesize: ~250k

Or

Dimensions: 2000w x 1500h

Filesize: ~300-350k

Vertical Galleries & Portfolio Featured Images

Dimensions: 1000w x 1500h

Filesize: ~250k

Or

Dimensions: 1500w x 2000h

Filesize: ~300-350k

Logo Images

Dimensions: 300w x 300h

Filesize: <10kb

Dimensions: 500w x 500h

Filesize: <10kb

Site Logo

Dimensions: 400w x 200h

Filesize: <300kb

Site Icon/Favicon

Dimensions: 512w x 512h

Why Those Sizes?

Banners/Galleries/Featured Images:

Image size and quality is a bit subjective. Like the part of a recipe that says “season to taste”.

For comparison, here’s a screenshot of the original image, uncompressed and not resized, 4000 x 2667 and 6.7mb.

https://ascendant.nyc/wp-content/uploads/2019/11/7megs.png

Resized to 2000 x 1500 and compressed to 350kb:

https://ascendant.nyc/wp-content/uploads/2019/11/350k.png

Resized to 1500 x 1000 and compressed to 250kb:

https://ascendant.nyc/wp-content/uploads/2019/11/250k.png

In my opinion, getting the image to as small a file as you can tolerate pays dividends in site loading speeds. Especially for mobile. If you have a gallery with 5 images at 250kb each, that’s already a megabyte of data to download on just one page.

One thing to keep in mind is that quality-wise, it’s much easier to shrink an image than it is to increase the size. Quality can be noticeably terrible when you try to make a smaller image larger. That’s important because most WordPress themes are designed to be “Responsive”, which is fancy talk for mobile friendly.

Because mobile screens and desktops have completely different aspect ratios, images are adjusted/zoomed/cropped at different screen sizes automatically. Short of someone viewing your image gallery on exactly the specific screen size suited to your image, it’s never going to look exactly the same for a visitor. For that reason it’s also best to use images that can tolerate losing real estate along the edges.

It’s also why putting text onto an image itself isn’t ideal, because you can have a nightmare of a time making sure that text is visible AND legible at all screen sizes. Similar situations apply to photographs of faces. Headshots aren’t going to make ideal banners/featured images.

For people who always want their site to look exactly the same at all times, that can be frustrating. But it saves an immense amount of time and energy on your part. It’s why many sites no longer need a separate “mobile” version such as “m.domain.com”.

Desktop:

Tablet:

Mobile:

Logos:

Logos are a bit more flexible because they’re so small to begin with. And they’re usually simple enough that they can tolerate a bit of resizing. I’d recommend a 300×300 or 500×500 image, and then choosing the “thumbnail” image size when you add them places

When you import an image WordPress automatically creates “large”, “medium”, and “thumbnail” sizes. “Full” means the image at the exact same dimensions of the file you uploaded.

Site Logo:

For the site logo that appears above the menu, I’d go for as close to the exact dimensions as possible. For this theme I’d recommend 400×200. Some themes will force a specific image size/ratio, and the results can be really blurry. So staying as close as possible to a specific theme’s recommendation is best.

Site Icon/Favicon:

Favicons (the icon/image you see displayed in the browser tab, not on your site itself) have a LOT of wiggle room because of how tiny they end up. WordPress.com calls it a “blavatar” and requires images at least 512×512.

For more information on how to achieve these sizes you can read Resizing and Optimizing Images.

Return to Top

Return to Guides

Support our COVID-19 Relief Housing Fund

X