New Dimensions
--
File Size
--
Scale
--
Resize images to exact dimensions with aspect ratio lock and common presets. All processing happens in your browser -- nothing is uploaded to any server.
Properly sized images are critical for page speed and Core Web Vitals. OneStepToRank monitors your rankings, tracks competitors, and optimizes your local SEO strategy automatically.
Get StartedEvery platform has specific image dimension requirements. Using the wrong size means your carefully designed visuals get cropped, stretched, or downsampled in ways that undermine your brand. Facebook recommends 1200x630 for link previews and 1080x1080 for feed posts. Instagram uses 1080x1080 for square posts, 1080x1350 for portrait, and 1080x608 for landscape. Twitter/X images display best at 1200x675 pixels. Getting these dimensions right is not optional -- it is the difference between a professional presence and an amateurish one.
For websites, the key principle is to serve images at exactly the size they will be displayed. An image displayed at 600px wide in CSS should not be a 3000px wide original -- the browser still downloads the full file before scaling it down, wasting bandwidth and slowing page load. The exception is retina displays, where you should serve images at 2x the CSS display size (so 1200px for a 600px display slot) to maintain sharpness on high-density screens.
Modern web development requires serving different image sizes to different devices. A desktop user on a 1920px wide monitor needs a different image than a mobile user on a 375px screen. The HTML srcset attribute and sizes attribute let you define multiple image versions for the browser to choose from based on viewport width and device pixel ratio. This means creating several versions of each image -- typically at 400px, 800px, 1200px, and 1600px widths.
Retina displays (2x and 3x pixel density) pack two or three times as many physical pixels into the same screen area. Without retina-ready images, photographs look soft and blurry on iPhones, iPads, MacBooks, and most modern Android devices. The solution is straightforward: resize your images to 2x the display size and let CSS constrain them. A 600x400 image slot needs a 1200x800 source image. Use this tool to create each size variant, then compress them with our Image Compressor to keep file sizes manageable.
The fastest image is the smallest image that still looks good. For hero sections, aim for images under 200KB compressed. For inline content images, keep them under 100KB. Thumbnails should be under 30KB. These targets assume you are using modern formats like WebP -- if you are stuck with JPEG, the sizes will be 25-35% larger for equivalent quality. Always resize images to their display size before compressing. A 4000x3000 photograph compressed to 150KB will look worse than a properly resized 1200x900 version compressed to the same size, because the compression has to work much harder to fit more pixels into the same file size budget.
Scaling down preserves quality well since you are consolidating pixels. Scaling up (enlarging) reduces quality because the browser must interpolate new pixels that did not exist in the original, causing blurriness. For best results, always start with the highest resolution source and scale down. Never upscale a small image and expect sharp results.
Aspect ratio is the proportional relationship between width and height. Common ratios include 16:9 (widescreen), 4:3 (standard), and 1:1 (square). Locking aspect ratio ensures that changing one dimension automatically adjusts the other to maintain proportions, preventing stretching or squishing. Unlock it only when you intentionally want non-proportional scaling.
Facebook posts: 1200x630. Instagram feed: 1080x1080 (square) or 1080x1350 (portrait). Twitter/X: 1200x675. LinkedIn: 1200x627. Pinterest: 1000x1500. Profile photos across platforms are typically 400x400 or larger. Using the correct dimensions ensures your images display without unexpected cropping or quality degradation.
Retina and HiDPI displays have 2-3x pixel density compared to standard screens. An image shown at 300x200 CSS pixels on a 2x retina display actually uses 600x400 physical pixels. If your image is only 300x200, it appears blurry on these screens. The fix is providing images at 2x the intended display size and using CSS width/height to constrain them.