Size Matters. The X Image Guide

Roy AngerUpdated:

Tags:

The super short version:
 

  • Understand the width of various areas on your site, so you can size images correctly.
  • Use images that have the correct dimensions for the space they are being used in.
  • Optimize your images to they are take up less space and download quicker.
  • Use CSS to change background images for different devices.

The low down on this article: It has about 3400 words and will take 16-20 minutes to read. You probably want a coffee to go with it.

Table of Contents

Before we talk responsive images, we’re going to talk optimizing images. There are two parts to this, and we’re going to start with image dimensions. If you have no clue how big your image should be, then this section is for you.

Image Size
Image size can refer to two things and it is important to understand the difference and the correlation. It can also be the course of much confusion.

Image Dimensions: This is the width and height of the image. IE, 1000px wide x 600px tall.

Physical Size: This is the size of the file. IE, 800KB.
These two parts are connected. An image that is 300x300px will have a small physical size (typically) compared to an image that is 1500x1500px, which will have a larger physical size.

We’re going to start by figuring out the dimensions of various parts of your site, The bad news? Every site can be different. The good news? We can sort this stuff out.

CSS Customizations
For the sake of this article, I’m going to assume that there is minimal to no custom CSS added to override some of the default settings. If you’re adding custom CSS then some of this might be different.

Lets start in the Customizer (Dashboard -> Appearance -> Customize -> Layout and Design). We’re concerned mostly with Site Max Width. In the case of X Theme Tips we have that set to 1400px. This means that the widest the content can be is 1400px.

Note: It you use a ‘no container’ template then the widest the site can be is the width of the monitor. This is covered more below.

What does this mean for your site? If you are using a layout with no sidebar then the content area will be, in this example, 1400px or close to it (there can be some default margins and paddings depending on the stack and area of the page/post)

If you are using a sidebar and Renew, Integrity or Ethos then the content area will be somewhere around 70% of 1400px (usually 68-72%). If you are using Icon then the sidebar will be flush to the side of the screen and the setting above will apply to the content area, meaning that the sidebar does not cut into the content space.

Doesn’t Responsiveness Change That?

Yes, it does! As the screen size of the viewed becomes smaller, those numbers will change. For example, if the screen is small enough the sidebar will move below the content and the content will become the full width of the screen.

However, we’re working on calculating the maximum size of areas (and thus potentially images) so for now we’re not going to worry about this.

Section Sizes – Under the Hood

Let’s dig into the sizes of various sections a little more:

We’re looking at a screen shot of part of the X Theme Tips home page, with coloured blocks overlayed to show the areas. Each is labeled with the size of that area.

The Page

The blue area shows the whole page. This screen shot was taken on a monitor with a resolution of 1920×1200. The page is just shy of that, because of the browser controls (scroll bar and in some cases the edges of the browser window). This resolution is very popular with desktop users, and quite common.

I would suggest that you need to design full page images or backgrounds to be at least this wide. Complicating matters are the newer ultra wide monitors. If someone owns and is viewing your site on an ultra wide monitor this could be viewing the site with a screen resolution of 3440×1440 or even 3840×1600 (LG’s 38 inch Ultra Wide, for example) and possibly higher (I admit I didn’t try to figure out what the biggest ultra wide on the market was)

You can see a sample of X Theme Tips as seen on a 2560×1080 monitor here.

The Container

This area contains the content. You can turn off the container if you are using a No Container template. If so, then you are dealing with the sizes/widths covered in The Page section above. Otherwise your container size is set in Customizer. As you can see with X Theme Tips, the container is a maximum of 1400px wide. Even if viewed on that monstrous 38inch Ultra Wide, this area would remain 1400px wide.

The Content

If you are using a layout with no sidebar, then you are more or less following the sizes listed in above in The Container. Otherwise, we are calculating around the sidebar. With X Theme Tips our content area is a maximum of about 936px.

The Sidebar

The sidebar width depends on the Stack, and the leftover space are the content area and its margins and padding. Usually for Ethos, Renew and Integrity it is between 25% and 30%. For Icon, where it is flush with the edge of the screen it is 250px. In the case of X Theme Tips the sidebar is 376px wide.

Confirming Section Sizes

If you really want to be sure of the size of your sections, then you will want to inspect the page with your Dev Tools and check the width of the sections. I’m not going to get into that in this article as its too big of a topic.

Okay, But Why Does This Matter?

Once you have an idea of how big each area of your site is, you now have some guidelines for image creation. If I was creating an image for the sidebar of X Theme Tips then I know that the widest it would display is 376px. There is no need to make it 1000px wide.

By creating images that are the correct width and not too wide, we can save tons of bandwidth for our users. Let’s take a look at a real image as an example. I grabbed a pic off of Unsplash. It was a high quality pic and started at almost 9MB in size.

I started by making it 1500×1000 and saved it as a high quality JPG. It was 796KB in size.

I resized it to 1000×667 and again saved it as a high quality JPG. The size dropped to 435KB.

I resized it even smaller, to 400×267, and saved it. (I was assuming I would use this in a 3 column layout). The size dropped to just 108KB.

As you can see, sizing your image correctly can save you tons of bandwidth. Imagine you were creating a 3 column layout and used the 1500px wide image? 800KB x 3 images equals 2.4MB! However, size a little more correctly (but not quite, as we will see shortly!) at 400px wide x 3 images is just 325KB instead of 2.4MB.

(If you are saying ‘but what about optimization!’ don’t worry, that’s coming soon)

Wait, You Said There Was More?

Just when you were thinking you’d wrapped your head around this, I need to throw you a curve ball. On smaller screens the maximum wide for columns and the sidebar might be wider than on desktop. If I set up a 3 column layout for desktop, with a side bar, the columns might be only 30% or 225px wide. However on a narrow tablet or a phone X will change that 3 column layout to 1 column (and wrap the columns below each other). Suddenly that 30% wide column becomes 100% and might be 550px-600px wide. The sidebar will also become the width of the phone (it usually doesn’t wrap for tablets).

Thankfully the answer is pretty simple here. I would keep images for columns to at least 600px wide, ensuring they are wide enough for various devices.

If I go back to the image example above and make it 600x400px it is just 196KB. Multiple that by 3 and we’re looking at just under 600KB for all 3. That’s still way better than the 2.4MB you might have for incorrectly sized images!

The Basics – Quality/Compression

Image optimization is the other part of the image mystery. There are two ways to approach optimizaion. One is when editing/creating the image, and the other is with WordPress.

First, when working in Photoshop you want to work at 75dpi and in RGB. When you save a JPG you can choose the quality. In most cases a 7 or 8 will suffice. Enough quality will remain for the image to look great on the screen, but it will reduce the size. If we revisit the 600×400 image from the end of the last section we can recall it was 196KB when saved with image quality at 12 in Photoshop. When changing the quality to 7, the size plummets to 54KB! But what about the quality of the image? You be the judge. Click on the thumbnail below and see the two compared. This was created in Photoshop, saved at quality 12 (to preserve the quality of the left image) and uploaded via FTP (not WordPress) to the site. It will also open in a new tab so you can view the image directly, outside of any WordPress resizing, etc.

Obviously image compression or quality reduction is a good thing. The image still looks great, but is much smaller. I recommend a quality image optimization plugin. I usually use the tinypng plugin. It optimizes on upload, and works very well. If you go over the allocated optimizations/month you will probably only pay a few dollars. Other popular options include Imagify (Michael’s choice and what we use on X Theme Tips), Kraken and EWWW.

These plugins will perform compression and optimization on upload, reducing file size while maintaining (or mostly maintaining) viewing quality. If I take that 600x400px image, saved at quality 12, which is almost 200KB is size and upload it so that Imagify (what we use on X Theme Tips) optimizes it the image size is reduced to 63KB.

Who thought the basics would take up pages of info? Hopefully if you didn’t understand dimensions and image size before, you have a better understanding now.

If you want your site to perform, you need to be completing these steps first and foremost. These really are the basics, and mastering them will help to keep pages loading faster even before we get into the interesting stuff below!

Responsive design is page design that responds to various devices. It doesn’t try to make the site look the same on all devices, but instead makes adjustments based on the device (or, really, screen size) that the page is being viewed on. Nice wide monitor? We can show 3 columns no problem! Narrow phone screen? Lets turn those columns into sections to keep them readable.

So how does this apply to images? An image file can’t change based on the screen size. If the file is 1500×1000 and 1MB, then it can be displayed at a different dimension but the file itself remains the same. You might put this image into a column where it displays at 300-400px wide, but it will still be a large file that is 1MB in size.

Since we can’t change the properties of the file, we can change the file being served to the user. If the viewed is using a 1920px wide screen we can serve them the big, wide image. But what if they are using a phone? Lets serve them something much smaller and appropriate to their device and screen.

And now we get into the good stuff! We’re going to talk srcset and CSS media queiries, and how we can use them to improve our site performance.

We have a newer tool for image selection, called srcset. Before we explain it too much, let us look at a sample:

<img src="small.jpg"
     srcset="xl.jpg 1000px,
             large.jpg 750px,
             medium.jpg 500px,
             small.jpg 250px"
     sizes="(max-width: 480px) 100vw,
            (min-width: 900px) 33vw,
            50vw"
     alt="A sample image" />

Wait, what?!?

Don’t worry, this isn’t so scary as it might seem. Let’s break it down into parts. (And I’m not going to spend much time on it as WordPress handles this.)

We know what the <img> tag is. The src attribute is familiar too. It acts as a default fallback for browsers that don’t understand srcset.

The srcset attribute is new. It lists the various sizes of the image that are available for the browser to use, along with their size/width. For example, medium.jpg 500px means that if the screen or area (as defined by sizes below) is 500px wide or a little smaller, use medium.jpg.

The sizes attribute is pretty cool. It is essentially a media query. In this example, the first option in sizes is ‘(max-width: 480px) 100vw’. This means if the viewport is 480 pixels wide or smaller, the image will be 100% of the viewport. Thus the srcset can choose an image based on the 480px width. The second option is ‘(min-width: 900px) 33vw’ which means if the viewport is 900px wide or wider, then the image will only be 33vw (vw is a CSS attirbute where 1vw = 1% of the screen. So 33vw would be 33% of the screen). To translate this, if the viewport was around 1920px wide (24 inch monitor, perhaps) then the srcset would choose an image for a width of 634px (33% of the viewport). The last option is just ’50vw’ which means if the viewport is not 480px wide or narrower, and also not 900px wide or wider then the image will be 50vw, or 50% of the screen width.

So, How Do I Use It?

Here’s the bad news. You can’t use it with Cornerstone’s Image Element. You also can’t use it with the Image Shortcode. You can, however, use it with the WordPress Add Media button and by hand writing your img HTML.

Step 1: Enable It

First, we need to turn the srcset functionality back on. This will not affect the Cornerstone Image Elements, so you can still use those if you want. You will need to have your X-Chilld child theme installed, so if you don’t stop and install that and then come back and pick up on these directions. Edit the functions.php inside your child theme and add this line:

function x_disable_wp_image_srcset( $source ) {
  return true;
}

Step 2: Configure sizes

WordPress will handle the srcset and sizes attributes automatically, so we need to give it some information to work with. Again, edit your functions.php file and add something like this:

function adjust_image_sizes_attr( $sizes, $size ) {
   $sizes = '(max-width: 767px) 95vw, (max-width: 979px) 80vw, 1200px';
   return $sizes;
}
add_filter( 'wp_calculate_image_sizes', 'adjust_image_sizes_attr', 10 , 2 );

You will want to edit the $sizes line and add your own settings. The rest can be left as is. Without this, the sizes attribute will have no options and the page will serve the largest image.

Here’s the important bit: This setting will apply to all images you add with the Add Media (as discussed below). As such, we want to keep this more general. The sample includes two breakpoints that match X, one at 767px (for phones) and one at 979px (for tablets) and then a catch all for anything larger.

This assumes that on phones the images will be almost full screen, while on tablet it assumes that the images will be about 75% the width of the screen. On all larger screens, it is set to match the width in the Customizer of 1200px (a default X site, not X Theme TIps). Please make sure that you consider the settings and adjust for your site.

Step 3: Have Fun!

Now that srcset is enabled, you can use it easily. If you want to add an image, instead of adding an Image Element you would add a Text or Raw Element and then click the Add Media button. Select your image and you’re ready.

You can also write your own HTML for the image. You would have two choices — write out the srcset and sizes info, or let WordPress handle it. To do the latter you need to add a class. The class pertains to the image. You need to go into Media Library and load the picture. Look up into the address bar and you will see something like upload.php?item=18 at the end of the URL. The number will change, but it is the number you need. If it was item=365, then the class is class=”wp-image-365″.

More Reading
If you want to read more on srcset, then check out

Bonus Step: Handle Images Like A Boss!

So you’ve installed the php code and gotten srcset installed and working. How do you use it? I think mix and matching with the image element would be the best base scenario. When you can select an image of a certain size and know that it will display at that size or close to it on various screen sizes use the Image Element. However, when the image width will change more dramatically and you want to serve different sized images use the Add Media option and let srcset work its magic.

One place that images are used frequently is for backgrounds. These are set using CSS. However, when we set a background image there is no change to it for various screen sizes unless we use @media queries. We can use CSS to override the background image selected and load other options for different screens. This means we could load an image that is only 500px wide for smaller phones.

The first step in this is to be able to identify the section, row, column or element you want to target. If you know how to inspect the page, you can identity the section (which has a unique ID) and then you can select based off of that. If you are not so comfortable with inspector, then select the element (IE, section or row) in Cornerstone and give it a unique ID (it must be unique).

From there we can create some @media queries to load other options. With @media you can specify whatever width you want, but I am going to use an example based off of the X Theme breakpoints for mobile and tablet.

/* Change background image based on viewport size */

/* Create rule for phones */
@media screen and (max-width: 767px) {
   #x-section-1 {
      background-image: url('/wp-content/uploads/2017/03/bg1-phone.jpg');
   }
}

/* Create rule for tablets */
@media screen and (max-width: 979px) {
   #x-section-1 {
      background-image: url('/wp-content/uploads/2017/03/bg1-tablet.jpg');
   }
}

/* Since the background was selected in Cornerstone then use it for 
screens that are larger than 979px */

I have added comments to the field, so I’m not going to go over the above in detail. The key is that the page will only load one image, based off of the CSS. If I accessed this page on my phone, the image downloaded would be the smallest option.

I hope that this material created a good overview for how images work, how to size them and how to keep the page size down. There are many moving parts, so it is important to understand the big picture in order to fine tune your site. If I missed something or you have a question, shoot me a message below.

Shout out to Michael for the title! I couldn’t find something I liked and he suggested the one I used (I think it was a joke, but I still used it)!

He also wants me to give him props for sharing the info that let us play with srcset. However, considering I ended up writing a 10 page article maybe I desire those thanks? Hmmm.

Have a question or a comment about this article? Click here!
About the Author

Roy Anger

Hey everyone. I made my first website way back in about 95, before PHP, Wordpress, CSS and even tables. I love the flexibility and framework available in X, and love working with X on client sites. Aside from Wordpress, I love spending time with my two girls (girlfriend and chocolate Lab), trying to be a decent photographer and generally relaxing.

Share this Tip!

There are 8 comments

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