Ayushman

Jena

How to Pick a Featured Image Crop That Works on Mobile

Table of Contents

A featured image can work across the top of an article and lose its subject on a narrow blog card. Before you export, check the shapes your theme actually displays and keep the important part of the image inside the area those crops share.

Compare the places your theme uses the image

Open the blog index and a single post at desktop and mobile widths. Check whether each image keeps its original proportions or fills a fixed box. In DevTools, inspect the rendered image and its container. If the image uses object-fit: cover, the box fills and any excess is cropped. A WordPress thumbnail can also be cropped before the browser receives it, so compare the displayed file with your original.

Check the crop before exporting

Imagine a 1200 by 630 image going into a square card. A centered crop keeps the middle 630 pixels and cuts 285 pixels from each side. A face or product close to either edge can disappear. Place the subject near the shared center, or adjust the focal point if your template supports it. Keep essential words in the post title so they remain readable when the image is cropped.

Preview the result in the actual template

Upload the image and preview the post. Check the card and hero on a narrow screen and at a width where the grid changes columns. If only one template crops poorly, inspect that template before changing the image everywhere. Export the WebP at a size that keeps the subject clear and check the actual file size before uploading.

If the same crop keeps breaking across your blog cards, book a website consultation and bring links to the affected layouts.

About the Author: Ayushman Jena is a website developer and UI/UX designer who helps businesses build high-converting landing pages, fix performance issues, and grow through better design and SEO.

Search

Need a Better Website That Gets Results?

Tell us a little about your project and get a free consultation