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.
Orientation
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
Round - photos can be cropped to be round, or masked in WordPress to appear round. If masking is desired, the original image should be square for best results.
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.
If you need help editing your images for orientation or layout, please let your PM know and we will be happy to add this service for you!
Size
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 use a 200x200 (small, square) image in a large header image area will be a disaster!
We recommend 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.
Image file size is also an important consideration. In order for your website to load quickly and perform well, image file sizes should be optimized so they are as small as possible without losing quality.
This optimization can be done automatically within your website by using a plugin like Imagify. If your website is not using a plugin to optimize images, you may need to optimize them before uploading them to your Google Drive folder. There are several online services that can help you do this quickly, such as https://tinypng.com/ and https://squoosh.app/. We highly recommend using one of these services to optimize an image before uploading to your website. If you have questions about optimizing image sizes, or whether we will be using a plugin on your website, please contact your Project Manager.
Image Content
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.
Remember that an image that is almost square, or oriented portrait style, will not usually display correctly in a narrow header photo space. Instead, choose rectangular photos with landscape orientation.
Focal Points
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 setting a custom focal point on an image, WordPress has built functionality into its Gutenberg editor for Cover Blocks 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 there is a need for your site to have more control over how images are cropped.
We will assign a focal point for each photo as we add content to your pages, based on what we feel is the most obvious choice. Please specify in your content documents or the notes section of your content migration sheet if you would like to assign specific focal points to images.