TABLE OF CONTENTS
About Responsive Images
Your site uses a wide variety of images in different sizes. To make sure that images display well on a variety of different devices, including phones and tablets, images are set to be responsive. This means that there is no one standard size used for a single image on the site, as it is set to change size depending on the device that the site is being viewed on.
The width, height, and focus of the image changes dramatically depending on screen size.
Because images are responsive, there’s no one exact size recommendation for any particular image. However, there are things you want to consider as you select and change images throughout the site.
Image areas are styled to display images in a certain orientation as needed for that page/location. Images can be:
- Horizontal (landscape)
- Vertical (portrait)
- More square - the image should be as tall as it is wide
- More rectangular - the image should be wider than it is tall or taller than it is wide
Using an image that doesn’t match the orientation of the image area leads to sizing issues.
In cases where a particular image does not fit an area well, you can either:
- Choose a different image that is a better fit for the image area, or
- Crop the image so that it better fits the image area. WordPress has built-in functionality that allows you to resize and crop images. Read the official WordPress documentation on editing images.
Images change sizes on different devices, but by default, some images are set to be smaller than others. For example, a header image on a page will always be larger than smaller images throughout a page.
Attempting to use a small image in a large image area often makes images look blurry and low-quality. This is because your website is “blowing up” the image to make it fit in the larger image area.
Because of this, you should always keep the general size of images in mind as you plan to use them in certain image areas. For example, trying to using a 200x200 (small, square) image in a large header image area will be a disaster! We recommending using images that are a minimum of approximately 1300 pixels wide to guarantee they will never need to be enlarged. But there's no need to upload massive images — WordPress will automatically downscale any uploaded image to be no more than about 2600 pixels wide.
It’s always good to consider the content of your image in relation to the image area that you’re planning to use it for. For one example from avodah.net:
This panel has a large, dark text area overlapping the right side, so you wouldn’t want to use an image that has a face on the right side.
By the same token, images that have faces or other focal points near their “top” can be problematic because faces will be cut off or removed on some screen sizes.
A focal point is the part of the image that you should focus on. In web design, setting a focal point allows WordPress to understand how to dynamically crop the image so you end up with someone's face and not blurry shelves when the page is shrunk down to mobile.
While not every site and situation allows for custom focal point setting, WordPress has built functionality into its Gutenberg editor for cover blocks (documentation here) and there are a variety of content editors that provide similar functionality. Also, there are some plugins that you can discuss with your project manager if this is a need for your site to have more control over how images are cropped.