Resizing Changes Dimensions; Cropping Changes What You See
Resizing scales an image to new pixel dimensions. When the width and height change by the same proportion, the image keeps its original shape. A 2400 × 1600 photograph reduced to 1200 × 800 pixels remains a 3:2 image. Its complete composition stays visible, although some fine detail may be lost because fewer pixels remain.
Cropping selects a smaller rectangle from the original picture. It can remove distracting edges, position a subject more effectively, or change a 3:2 photograph into a 16:9 banner. Cropping does not simply shrink everything; it discards image area outside the selected rectangle. In most workflows, you crop first and then resize the selected area to its final output dimensions.
Stretching is different from both. Forcing a 3:2 photo into a 1:1 square without maintaining proportions makes circles appear oval and faces look unnaturally wide or narrow. Avoid distortion unless you are intentionally creating a special effect.
Choose Between Fit, Crop, and Stretch
When the source and destination have different proportions, you must decide what matters most: showing the entire image, filling the frame, or matching exact dimensions regardless of distortion.
Web developers encounter a related distinction in CSS: object-fit: contain displays the whole image within a box, while object-fit: cover fills the box and clips excess content. These display rules do not create a new resized image file. Export a properly sized asset when the source file itself needs to change.
A Worked Example: Turning a 3:2 Photo Into a 1200 × 630 Preview
Suppose your original photograph measures 2400 × 1600 pixels. You need a landscape preview measuring 1200 × 630 pixels. The source ratio is 1.5, while the destination ratio is approximately 1.905, so resizing proportionally alone cannot produce the new dimensions without empty space.
- Start with the source: 2400 × 1600 pixels.
- Find the crop height: at a width of 2400 pixels, a 1200:630 aspect ratio requires 1260 pixels of height.
- Choose the crop: remove 340 vertical pixels in total. A centered crop removes about 170 pixels from the top and 170 from the bottom, but you can move the crop to protect the subject.
- Resize the selected region: export the 2400 × 1260 crop at 1200 × 630 pixels.
- Review the result: check that faces, product edges, labels, and other important objects remain visible at actual display size.
The final image now matches the target shape without distortion. The calculation illustrates the geometry; place the crop to keep the important subject visible.
Keep Aspect Ratio Locked Unless You Intend to Change It
Aspect ratio describes the relationship between image width and height. A 1600 × 900 image has a 16:9 ratio; 1000 × 1000 is square; 1200 × 800 is 3:2. Keeping the aspect ratio locked means that changing one dimension automatically determines the other.
For example, halving the width of a 1600 × 900 picture to 800 pixels should also reduce the height to 450 pixels. The rule is straightforward: new height = original height × (new width ÷ original width). If you need both width and height to be exact but the ratios do not match, choose crop or fit rather than stretching.
Do not assume that a preset named after a platform is permanently correct. Platform requirements and the way previews are cropped can change. Check the destination’s current specification, then preview the finished image in the actual layout.
Which Dimensions Work for Common Website Images?
There is no universal SEO-approved pixel size. The correct export depends on the image’s actual display width, responsive behavior, and whether the layout crops it.
These are illustrative working dimensions, not promises about every content management system or social network. For high-density screens, a source image may need more pixels than its CSS display width.
Protect Faces, Text, Logos, and Product Edges
Crop placement matters as much as the final dimensions. A centered crop may be fine for a landscape but unsuitable for a person near the left edge. Review the focal point before you export.
- Portraits: leave breathing room around the head and avoid cropping at awkward facial boundaries.
- Product photography: keep the entire item visible when the listing requires a complete product view.
- Text-based graphics: keep headings, numbers, and logos away from the edges where alternate previews may clip them.
- Charts and screenshots: preserve axis labels, interface controls, and supporting context that make the information understandable.
When a crop removes necessary content, use a fit-inside layout with padding or create a different composition for that placement. Cropping cannot restore missing pixels after the final export.
Export Quality, File Size, and Image Format
Reducing pixel dimensions often reduces file size, but the result also depends on the file format, encoding settings, and image content. JPEG is commonly useful for photographs, PNG is often appropriate for graphics requiring transparency, and modern formats such as WebP can provide efficient delivery when supported by your publishing workflow.
Check small type, fine lines, gradients, and detailed textures after export. Excessive compression may introduce blockiness or blurred edges. Enlarging a small image can make it bigger in pixels but usually cannot recover detail that the original never contained.
If you need further size reduction after cropping, the Bulk Image Compressor is a complementary workflow listed in the SEOToolCheckers inventory. The Image Format Converter helps when a different output format is required.
Why Resized Images Still Matter for WordPress Performance
A browser can display a 4000-pixel-wide photo in a 600-pixel-wide space, but visual scaling alone does not guarantee an efficiently sized download. WordPress may generate intermediate image sizes and responsive srcset candidates, depending on the theme, media processing, and image insertion method. Still, supplying appropriately prepared source images helps avoid unnecessary storage and oversized originals.
Set meaningful image width and height attributes where applicable to help the browser reserve layout space. Use descriptive alt text for informative images, but do not confuse alt text with a resizing or compression setting.
Common Problems to Check Before Downloading
The image looks squashed: the dimensions may have been changed independently. Preserve the original ratio and use a crop for the required frame. The subject disappears: move the crop region or select a fit-inside approach. The output is blurry: avoid enlarging a low-resolution source; start with a sharper original. The download is larger than expected: review the dimensions, image format, and compression settings rather than assuming fewer pixels always means a smaller file.
The displayed thumbnail looks different from the exported image: your website theme or card component may apply an additional CSS crop. Inspect the rendered page and its image-container rules. A transparent background turns solid: confirm whether the export format supports transparency and whether conversion has introduced a background color.
Final Check Before You Publish
Confirm the required width and height, inspect the aspect ratio, and make sure the focal subject remains visible. Then check the exported file at its intended display size, verify that any transparency is preserved, and test the image in the actual page or preview component. For SEO, the practical goal is a clear, relevant image delivered efficiently, not simply the smallest possible file or a dimension chosen because it appears in a generic checklist.
