Understanding how images behave on your website is crucial when managing your own content. Below you will find the best practices to follow for producing images of high quality, as well as optimizing those images for mobile responsiveness.
The aspect ratio of an image represents the relationship between the width and the height of an image. It is usually represented as number:number, for example: 1:1, 2:3, 16:9. In more simple terms, these ratios can also be described as square, portrait, landscape.
It is important to know that if one of the dimensions (width or height) is altered, the other dimension must to altered to retain the aspect ratio. If the aspect ratio is not retained, the image will appear stretched or squished.
Most image tools and resizers will give you the option to lock the aspect ratio. When the aspect ratio is locked, you can alter the width or height and the other dimension will be set automatically, keeping the image from stretching or squishing.
The dimensions of an image are the width and height of that image and are usually represented in pixels (px).
When adding an image to your website, you can choose to have that image cover the section or be contained in the section.
For images that cover: The image will keep its aspect ration and fill the container. In order to ensure that your image will display correctly and not pixelated, or burry, the dimensions of your image should be the exact size or larger than the container that will hold the image. For example: a container of size 1000x720 would need an image of size 1000x720, 1020x740, 1080x720, and so forth.
*NOTE: The image will be cropped to fit the container and will focus on the center of the image. For this reason, it is recommended to have the subject as close to the center of the image as possible. Also, if your image is smaller than the container, it will be blurry due to stretching the image to fit.
For image that are contained: The image keeps its aspect ratio, but is resized to fit within the container.
Place your cursor at the bottom right corner of the image window until you see this symbol then resize the window to see how it behaves.
The quality of an image determines how clear and crisp the image will appear on your website. It is important to size an image for its intended use in order to ensure it does not display blurry. For Example: If you want to create a full width image for your homepage for a desktop screen of 1700px wide, your image should be AT LEAST 1700px wide at 100% quality with a relative height to keep the aspect ratio (see Aspect Ratio section above).
If you want to use the same image for a smaller space, the larger image can be scaled down and keep it's quality. However, large images have larger file sizes, and having too many on the page can result in slower load times. This can be easily addressed by reducing the image quality slightly for the images being used in the smaller spaces.