A generated image that looks sharp in an editor can be too large, too small, or badly framed for the page where you want to use it. Prepare each output for its actual placement: decide whether it needs a crop, a proportional resize, or both, then inspect the exported file. This guide explains pixel dimensions, aspect ratio, image quality, and the checks that catch common web and social-image problems.
Start with the destination, not the source file
List each place the image will appear: a wide website hero, a product card, a square social tile, a vertical post, or a presentation. Check the current requirements for that placement, including pixel width and height, aspect ratio, file format, file-size limit, and any interface safe area. Platform specifications can change, and a design system may use its own dimensions, so do not rely on a generic “best size” list without checking the actual destination.
An image can satisfy a pixel minimum and still have the wrong shape. It can match the shape but be too small in pixels. It can meet both requirements and still exceed the upload's byte limit. Write these requirements down separately so you know which operation you need.
If the image appears in multiple contexts, create a set of derivatives rather than forcing one file to serve every placement. A website may crop to fill a responsive container while a social tile may show the entire canvas. The intended focal point can change, too: a face or product may need to be centered in a square image and shifted to one side in a banner to leave room for a headline.
Understand pixels, aspect ratio, and display size
Pixel dimensions describe the image grid: width by height. Aspect ratio describes the relationship between those dimensions. A 1600 × 900 image is 16:9; a 1200 × 1200 image is square. A 16:9 source placed into a square frame must be cropped, padded, or distorted. Proportional resizing alone does not change its shape.
For web display, the image is often rendered at a CSS size that differs from its source pixels. A 1200-pixel-wide image can be displayed at 600 CSS pixels wide, but the visible sharpness also depends on screen density, browser scaling, compression, and source detail. High-density screens may use more than one source pixel per CSS pixel. Follow the site's responsive image setup where possible, rather than exporting one enormous image and relying on the browser to do all the work.
If the site uses responsive image variants, a developer may provide several source widths and let the browser choose among them. In that workflow, create clean source exports at sensible sizes and verify that the page selects an appropriate file; do not assume every layout downloads the largest original.
Do not confuse the density metadata used for print with pixel dimensions. Changing a DPI/PPI field alone does not create more image detail. For a web placement, confirm the encoded pixel width and height and inspect the actual rendered size.
Decide whether to crop or resize
Cropping and resizing solve different problems:
- Crop removes parts of the image to create the needed framing or ratio.
- Resize changes the pixel dimensions of the whole selected image or crop.
- Pad or extend the canvas preserves the complete source while adding space around it.
- Stretching changes the shape of objects and people and should usually be avoided.
If the ratio matches and only the dimensions are wrong, resize proportionally. If the ratio differs, first decide what content can be removed. For an image that must show the full subject, use a destination that accepts margins or create a new composition with more space. Do not crop a face, product label, or important generated detail simply to fill a frame when a padded composition would serve better.
The Toolsnix Image Resizer combines a crop preview with output width and height controls. It supports free crop and common ratios including square, 4:3, widescreen, and vertical story. Review the crop and output dimensions before downloading; if the crop's ratio and requested output ratio differ, they can stretch the result. Maintain-aspect behavior currently follows the source image ratio rather than necessarily the selected crop ratio, so match output dimensions to the selected crop or use a crop workflow that preserves the intended proportions. The tool exports JPEG, so verify the saved format and background when transparency matters.
Example: a generated illustration for a page and a post
Suppose a generated illustration is 2048 × 1024 pixels, with a character near the left edge and open space on the right. A wide page hero may use most of the image, keeping the open space for HTML text. A square social post will remove substantial width; a centered crop might cut off the character, so move the crop toward the left and place any caption outside the image. A vertical story may need a closer crop or a new source because the original is very wide.
These are not simply different export sizes. They are different compositions. Save each one with a placement name and inspect it in its actual layout.
Preserve generated image quality
Resizing down discards pixels. Resizing up creates interpolated pixels but cannot recover details that were not in the source. An AI image can have fine texture or inconsistent details that become less convincing after aggressive downscaling. Review the result at its actual display size and look for lost edges, unreadable text, or a focal point that becomes too small.
If a file will be edited repeatedly, keep a high-quality master and create final exports from it. Avoid opening and saving a lossy JPEG many times, because each lossy export may alter detail. Use a suitable working format when you need transparency or further compositing, then export to the destination's accepted format once.
Generated images may have a fixed background even if the subject appears isolated. If you need transparent output, check the alpha channel in the source and exported files. A file with a PNG extension is not automatically transparent; a resizer that exports JPEG cannot preserve alpha. Put a solid background behind the subject intentionally or use a tool that supports the required transparency.
Keep file size within the destination limit
Pixel dimensions influence file size, but they do not determine it alone. Format, image content, compression settings, and metadata all matter. A detailed texture may compress differently from a flat illustration with the same dimensions. If the upload fails for file size, confirm the byte limit and compare the actual saved file before reducing resolution unnecessarily.
The Image Compressor can help reduce file weight after the composition and dimensions are right. Reopen the compressed output and check quality. Do not let a target size override a destination's minimum dimensions or make important details unreadable.
Use JPEG for photographic images when the destination supports it and transparency is not required. PNG may be appropriate for sharp graphics or transparency but can be larger. WebP can be useful where accepted. Always check the receiving service's format list; renaming a file extension does not convert its encoded format.
Check safe areas and text overlays
If the image carries a headline or label, leave space for it in the composition or add editable text in the layout. Text baked into the image cannot reflow or be translated, and resizing can make it soft. If it is part of the generated pixels, inspect spelling and edge quality before using it.
Social apps may place profile names, controls, captions, or buttons over parts of an image. Website layouts may crop responsively or place text over a hero. Check current safe-area guidance and preview the image inside the destination component. A file can have correct dimensions while the subject is hidden by interface chrome.
For web heroes with HTML text, test the text contrast against the image at desktop and mobile crops. A crop can move a light patch under dark text or a busy texture under a white heading. Change the focal position, use a controlled overlay, or adjust text placement if needed.
A repeatable export workflow
- List each placement and its current pixel, ratio, format, file-size, and safe-area requirements.
- Keep an untouched high-quality source.
- Create a separate crop for each aspect ratio and move the focal subject for that composition.
- Resize proportionally to the required output dimensions; do not stretch to fit.
- Export in a supported format, preserving transparency only when the output format supports it.
- Reopen the saved files and confirm pixel dimensions, format, file size, and visual quality.
- Preview each derivative in its real component or platform placement.
- Keep names clear, such as
hero-wide.webp,social-square.jpg, andstory-vertical.jpg.
Common mistakes
- Applying one crop to every placement: Different aspect ratios need different framing.
- Upscaling a low-resolution source to satisfy a number: The output dimensions grow, but the missing detail does not return.
- Reducing pixels to solve every size problem: A more suitable format or compression setting may keep needed detail.
- Using JPEG for an image that needs transparency: JPEG does not preserve alpha.
- Ignoring crop ratio and output ratio: A mismatch can stretch the selected image.
- Forgetting responsive crops: A website may display a different focal area on a phone.
- Checking only the editor preview: Confirm the saved file and its actual placement.
Frequently asked questions
What size should I export an image for a website?
Use the dimensions and responsive image behavior of the actual page or component. Check the site's requirements and expected display size; there is no single pixel size that fits every website placement.
Should I resize an image before uploading it to social media?
Check the current requirements for the specific placement and preview the crop. Resize or crop when needed, but keep a master and verify the platform's current format and size limits.
Does resizing reduce image quality?
Downscaling discards pixels, while upscaling estimates additional pixels from existing data. Quality depends on the source, resize method, compression, and how the result is displayed. Inspect the saved output at its intended size.
Can I resize an image without changing its aspect ratio?
Yes. Keep the width and height proportional to the source or selected crop. If the destination requires a different ratio, crop or add canvas space instead of stretching the image.
Why did the exported image lose transparency?
The selected output format may not support transparency, or the source may not contain an alpha channel. JPEG does not preserve alpha. Check the actual exported file rather than relying on its filename.
Next step
Choose one placement and verify its current requirements. Create a crop that preserves the focal subject, resize without distortion, and reopen the exported file to confirm its dimensions, format, and appearance in context. Repeat separately for every other placement instead of reusing a crop that was designed for a different frame.