TL;DR
- Images get cut off when the spot on your page has a set shape and your photo is a different shape. The theme or block crops it to fit.
- Images look too small when the layout shrinks them, like in narrow columns, or when the original file is small.
- Phones change the layout. Columns stack, so the same image can show at a different size or crop.
- The fix is usually the layout or the image setting, not stretching the photo.
Why Are Images Cut Off on My Website?
Many image spots have a fixed shape, called an aspect ratio (the width compared to the height). Square, wide, and tall are all common aspect ratio settings. When your photo is a different shape than the spot, the theme or block trims the edges so it fits.
Mixed photo shapes in one layout cause it most. As Beth told one client, “I can’t keep a consistent width or height without cropping, and I don’t want to chop off body parts.”
Why Are Images Too Small on My Website?
- The layout is shrinking them. A photo in a three-column grid shows at a third of the width. On one portfolio site, Beth’s answer was, “The only way to fix the smaller images on the individual portfolio pages is to go single column.”
- The file is small. A small photo can’t be stretched without losing detail. When one client’s enlarged photo came out blurry, Beth’s advice was, “Try scanning the original to see if it looks better.”
How Do I Fix an Image That’s Cut Off or Too Small?
In the WordPress editor, click the image to select it, then open the settings in the sidebar:
- Aspect ratio: choose Original to show the photo’s full shape.
- Scale: if the spot needs a set shape, choose Contain to show the whole image. Cover fills the spot but may crop the edges.
- Focal point: with Cover, drag the point to the part of the photo that must stay in view, like a face.
- Resolution: choose Large or Full Size if the image looks small or soft.
- In a gallery, turn off “Crop images to fit,” or use fewer columns.
- Save, then check the page on a computer and a phone.
See WordPress’s guide to the Image block settings. These settings change how the image shows on the page. They don’t change the original file.
Some image spots are set by your theme or page builder (a drag-and-drop design tool), like portfolio thumbnails and blog images. Those crop sizes live in the theme’s settings, so changing them affects every image in that spot. Check with your webmaster before you change them.
Why Do My Images Look Different on Phones?
Layouts fold on small screens. Columns stack one on top of the other, and image spots change shape. As Beth told one client, “It’s typical for the left column to show before the right column when folding for smaller screens.” Changing that order means changing the layout setting depending on your builder or theme.
What If Text in the Image Is Cut Off?
Text inside a graphic gets cropped like the rest of the image. The fix is a full, uncropped version of the graphic. On one site, the client sent full versions of the cut-off graphics, and Beth swapped them in. If the graphic itself needs changes, the designer’s original file makes that possible.
Rather Have Us Fix It?
Send us the page and a note or screenshot of which images look wrong. If you have bigger or uncropped versions, send those too. See How to Send Large Photos, Videos, and Files to Your Webmaster. We’ll fix it on your Webmaster Retainer. Changing how a layout stacks on phones is bigger work, so we’ll quote that first.
What Webmaster For Hire Recommends
- Match the photo’s shape to the spot before you upload. See What Size and Format Should Photos Be for My Website?
- Keep important parts away from the edges, like faces and text.
- When photos come in mixed shapes, change the layout instead of cropping into people.
- Check every change on a phone.
:: Common Questions ::
Can You Make a Small Photo Bigger Without It Getting Blurry?
Not well. Find the original, larger file, or scan the printed photo again at a higher setting.
Why Is Only One Image in My Gallery Cut Off?
It’s likely a different shape than the others. Galleries often crop every photo to match. Use a photo with the same shape, or turn off cropping for that gallery.
Images Not Looking Right?
See our Webmaster Retainer, or request a consultation.
