Choose dimensions based on placement
An image that is much wider than the area where it will appear can add unnecessary bytes to a page. Resizing to a suitable maximum width can reduce file size while keeping the image proportions intact.
PixoSift offers presets for 1920 px, 1280 px, 1024 px and 640 px, plus a custom width. These are starting points rather than universal rules: choose dimensions based on the layout where the image will be displayed.
A full-width desktop banner may need a larger image than a small card or mobile placement. The best width depends on the page layout, responsive behavior and display density. For production websites, also consider responsive image markup such as srcset and sizes when serving multiple variants.
Recommended starting points by image type
These are practical starting points, not hard rules. Adjust them to the actual display size and verify the exported file.
PHOTOGRAPHSProduct photos and landscapes
Try WebP around quality 80–88. Resize to the largest width the layout genuinely needs; compare fine textures, gradients and faces.
If quality is the priority, test a higher setting and compare the file size rather than assuming a target percentage.
LOGOS / TRANSPARENCYLogos and cut-outs
Keep the original vector file if you have one. For raster exports, PNG is useful when lossless edges matter; WebP may be smaller and supports transparency.
Inspect transparent edges against both light and dark backgrounds. Avoid JPEG when transparency must be retained.
TEXT / INTERFACEScreenshots and diagrams
Start with PNG for lossless reproduction, or test high-quality WebP if size matters.
Zoom in on small lettering, icons and thin lines. Lossy artefacts can be more visible on sharp edges than in photos.
WEB LAYOUTHero, blog and mobile images
Use the target component's rendered width as a guide. The 1920, 1280, 1024 and 640 px presets are starting points, not guarantees.
For responsive sites, you may need several variants plus srcset and sizes, rather than one file for every screen.