Now that you have a grasp of the different page layouts in Agility, I want to talk about images in the Agility Skin. Images play a really big role in the appearance of Agility and there are lots of different potential image sizes that you might use.
Default Image Sizes
- WordPress Default Image Sizes
- Large – 647×1032
- Medium – 320×1032
- Thumbnail – 200×200
- Agility Custom Image Sizes
- Featured Page – 320×200
- Tiny Thumbnail – 75×75
Agility comes with the three default WordPress image sizes, that’s the large, medium and thumbnail image and then it provides two custom image sizes. It provides the featured page image size which is what this is here and it provides the tiny thumbnail image size which is what these are here.
By default the featured page image is 320 pixels x 200 pixels and it is cropped so it will crop out stuff. The tiny thumbnail is 75 x 75 pixels and it is also cropped and thus will drop out stuff as well. So those are the default built-in automatically generated image sizes that you get when you load an image into the media library.
As you probably know, when you go down to settings and media you can actually set these sizes. So you are going to want to adjust these sizes for Agility and then make sure you upload images that are large enough so that they can hit the Agility image size range.
Recommended Image Sizes
What makes that a little bit more interesting is the fact that Agility has several different potential widths. You’ve got a desktop width of 960 pixels,1032, 1140 and of 1280.
I’m not making a recommendation for full width. Full width is kind of a special beast and I’m going to let you experiment to decide what you want that to be. There are a lot of other things that go into deciding how big images should be in that one where it’s essentially browser window to browser window. Because of that I’m not making any recommendations for it but for the fixed dimensions 960, 1032, 1140 and 1280 I am making recommendations.
Sizes Affected by Desktop Size and Width of Content Area
The recommendations are not only affected by the size of the desktop width but they’re also affected by the width of the content area. You have a choice of your content being two-thirds wide and your sidebar being one-third which is the default. However, you can also choose to have it three quarters wide and the sidebar be one-quarter wide which would then change your image sizes.
The same thing is true if you are using half the content width or if you’re using a three-column layout. If you’ve got the content width half wide and the two sidebars are quarter wide then you would use half content width.
This is the Agility 3 Recommended Image Size Based on Width pdf that you see on the screen here. This cheat sheet has my recommendations for each of those conditions including a full width image and then a full width background image. You can find the cheat sheet on the main Agility 3 page.
Full Width Template Example
Let’s just say you are using a full width template. That’s this one here. Well, this has images intermixed inside the text but maybe you want a great big image across there. If that’s the case and you want an image that spans the width of the page then you’re going to choose the size of the desktop width, so full width image is 960.
Since background images typically are going to span the entire browser window width, I recommend that all of your big background images be at 1920 x 1080. I’ll show you an example of that on BYOBWebsite’s home page. That’s what this image is 1920 x 1080.
Desktop and Typical Content Width Critical in Sizing
So when you’re deciding how that your images should be you need to decide how wide is my desktop width going to be? What’s my typical content with going to be? And then you will have what my recommendations are for the large image, the medium image, the thumbnail image.
I also make some recommendations for adjusting the Agility custom image sizes because while these are set 320 x 200 and 75 x 75, you can actually change them yourself. You can reset them to a different size especially if you’re looking at the 1280 wide. In that case, you may want to but you’re definitely going to want the featured page widget to get bigger and you may want that tiny thumbnail to get bigger.
If you use smaller images then you’re not really taking full advantage of the full width of the content areas. What will then happen is things will not line up correctly. This skin intends for you too have content and images that actually lines up as it goes all the way across the content area. That’s why we have these images set up that way.