Image Resizing & Aspect Ratio

This article will help you explain to clients what best image sizing will work for our websites.

DL Do's and Don'ts

✅ Images at least 1920 pixels wide and 1080 pixels tall work perfectly with all DLs

✅ Images are less than or equal to 500 kilobytes are usable for DLs

❌ Images that are less than 200 kilobytes in file size may not work

❌ Images that are greater than 500 kilobytes are too large and will slow down page load speeds

❌ Portrait images are not recommended (will require modifications to make into a DL image)

❌ Shutterstock "huge" images work with DLs, however they are too large in file size and will require a designer to modify it to the correct size

Portrait vs Landscape

What are portrait and landscape images?

A portrait image is taller than it is wider and focuses on capturing up close and personal features on an image. Typically it is a picture of a person, pet, product, menu, or document.

A landscape image is wider than it is taller and focuses on capturing wide angles. It is ideal for outdoor photos, landmarks, group photos, events, art, and design.

Portrait Images as DL's

✅❌ Not recommended, but this is an example of how we can make a portrait image work in a DL

1.0 Site DL Sizes

✅ Photo Gallery DLs: 1060px by 440px

✅ Non-Responsive DLs (with text): 630px by 374px

✅ Non-Responsive DLs (without text): 960px by 374px

✅ Mobile Non-Responsive DLs (with text): 300px by 225px

✅ Mobile Non-Responsive DLs (without text): 300px by 375px

Common Issues

Images are uploading blank

File names cannot have special characters (#,&,etc) - will cause photos to not appear or appear as broken.

Images are not showing as set aspect ratio

Check for images that are excessively large. That will void the aspect ratio setting of your photo gallery and photos will show all their actual ratios.

Normal oriented photos upload sideways

If all your photos are turned sideways on upload, it is usually because the photos are not sized properly (too big).

Aspect Ratios

Image aspect ratio refers to the proportion between the width and height of an image. It is expressed as a ratio, like 4:3 or 16:9. Different aspect ratios can affect how an image appears on different devices or platforms. It's important to consider the aspect ratio for specific uses.