Image Resizer
Resize images by pixels, percentage, or social media preset sizes.
Upload an image (JPG, PNG, WebP, GIF)
Why Image Dimensions Matter for Web Performance
Serving images at the correct dimensions is critical for web performance. An image that's 4000×3000 pixels displayed in a 400×300 container wastes bandwidth downloading 100× more pixel data than needed. This directly impacts Core Web Vitals scores and user experience, particularly on mobile devices with limited bandwidth and processing power.
Modern responsive design requires serving different image sizes for different screen widths and pixel densities. A hero image might need to be 1920px wide on desktop but only 768px on tablet and 375px on mobile. Serving the desktop-sized image to mobile users wastes data and slows page rendering.
Social Media Image Size Guide
Every social media platform has recommended image dimensions that change periodically. Instagram posts work best at 1080×1080 pixels (square), while Stories require 1080×1920 (9:16). Twitter recommends 1200×675 for in-feed images. LinkedIn cover photos should be 1584×396, and Facebook covers need 820×312. YouTube thumbnails perform best at 1280×720. Using the wrong dimensions results in cropping, letterboxing, or blurry upscaling that reduces engagement.
Understanding Aspect Ratios
An aspect ratio describes the proportional relationship between an image's width and height. Common ratios include 16:9 (widescreen, used for YouTube and presentations), 4:3 (traditional photos and displays), 1:1 (square, popular on Instagram), and 9:16 (vertical, used for Stories and TikTok). When resizing images, maintaining the original aspect ratio prevents distortion — this is why the "lock ratio" feature is essential.
Resolution, DPI, and Retina Screens
DPI (dots per inch) matters primarily for print. Web images don't have an inherent DPI — what matters is the pixel dimensions relative to the display area. For standard displays, a 1:1 pixel ratio works fine. For Retina/HiDPI screens (2x or 3x pixel density), you may need to serve images at 2× the display size to appear sharp. A 400×300 image slot on a Retina screen ideally receives an 800×600 image.
Responsive Images in HTML
HTML provides the srcset and sizes attributes for serving appropriately sized images. The srcset attribute lists multiple image files at different widths, while sizes tells the browser which size to select based on viewport width. The picture element offers even more control with media queries for art direction. These techniques ensure visitors download only the pixels they need.
Batch Resizing for E-Commerce
E-commerce product listings typically need multiple image sizes: a full-resolution zoom view, a standard product page image, a category listing thumbnail, and a cart icon. Automating this process ensures consistency across thousands of products. Design tools like Figma, Photoshop, and Canva offer batch export features, while command-line tools like ImageMagick enable scripted resizing workflows.