All articles/Image Processing
Image Processing#crop images#convert image format#JPG PNG WebP

Crop and Convert Image Formats Online (JPG, PNG, WebP, SVG Export)

Crop and convert between JPG, PNG, WebP, and SVG export. Assets ready for web, print, and apps.

PI
Picnie
Picnie
Aug 1, 20264 min read

Know the destination before you crop

Cropping and converting are easy to do badly and only slightly harder to do well - the difference is deciding the destination first. A square social crop, a wide banner, and a tall story frame all need different treatment from the same source photo, and converting to the wrong format afterward can undo whatever the crop achieved.


Step 1: Choose the crop that fits the destination

Open your source image in Resize Images and decide whether you need a fixed aspect ratio (square, 4:5, 16:9) or a focal-point crop that keeps the subject centered regardless of ratio. Marketing assets usually need the former for consistency across a channel; editorial or hero images often look better with a focal crop that adapts per photo.


Step 2: Convert to the format the destination actually needs

Once the crop is set, match the export format to where the file is going:

  • WebP for most modern web placements, where file size matters and the platform supports it
  • JPG for photos going into email, legacy systems, or any pipeline you cannot fully verify supports WebP
  • PNG when the cropped result needs a transparent background or sharp, flat graphics
  • SVG for logos or icon-style assets where a vector export is available and appropriate

Step 3: Check the crop against real content, not the sample

A crop that looks fine on a demo image can clip a logo, cut off a face, or crowd a product against the frame edge on the next real photo. Preview the result at actual size before exporting a whole batch, especially for fixed-ratio crops applied across photos with different subject placement.


Step 4: Export and verify file size

A crop reduces dimensions but does not automatically produce a small file - a tightly cropped but uncompressed export can still be unnecessarily heavy. Check the resulting size after conversion, and route through Compress Images if the format conversion alone did not bring the file down far enough for the destination.


Batch converting a folder of mixed sources

Product photography, especially from multiple vendors or shoots, often arrives in a mix of formats and dimensions. Rather than converting file by file, apply the same crop rule and target format across the whole folder, then spot-check a sample for the inconsistencies mixed sources tend to introduce - different orientations, different subject placement, occasional oddly colored backgrounds.


Common conversion mistakes worth avoiding

  • Converting a photo to PNG when it does not need transparency, bloating the file for no visual benefit
  • Cropping before deciding the destination, then discovering the ratio does not fit
  • Exporting SVG for a photographic image, which SVG cannot represent efficiently
  • Skipping a final size check after conversion, assuming the new format automatically solved file weight

Get the crop and format decisions in the right order - destination first, then crop, then format - and converting a batch of images stops being a source of inconsistency across a site or campaign.


Logos and icons deserve a separate pass from photography

Mixing photographic crops and vector-style graphics into the same batch job usually produces a worse result for both. A logo forced through the same crop and compression settings tuned for photos can lose the crispness it needs at small sizes, while a photo run through settings tuned for flat graphics can end up unnecessarily large. Separate the two categories - photography through one crop-and-convert pass, logos and icons through their own, ideally SVG-preserving, pass - even when both are part of the same overall asset refresh.


Keeping originals safe while you experiment with crops

Because cropping is destructive - once cropped and exported, the trimmed edges of the source are gone from that file - always work from a copy and keep the original uncropped source somewhere safe. This matters most for ratios you might need to revisit later: a square crop optimized for one channel today can turn out to be wrong for a new placement next quarter, and having the original still available saves a full reshoot or a search for the source file.


Building a repeatable crop-and-convert routine

Once you have settled on a destination, a crop rule, and a target format for a given use case, write it down as a short standard rather than re-deciding it each time - "product thumbnails: 4:5 focal crop, WebP, under 150KB" takes seconds to reference and removes the inconsistency that creeps in when the same decision gets made slightly differently by different people, or by the same person on different days.

#crop images#convert image format#JPG PNG WebP#SVG export
PI
Written by Picnie

Picnie at Picnie. Writes about image automation, developer experience, and shipping product faster.