How to Resize Images for Your Website

How Image Size Affects Website Performance

Images are among the largest resources on web pages, typically accounting for 60-70% of total page load data. An unoptimized high-resolution photo can reach 5-10MB, but with proper resizing it can be reduced to 100-300KB with almost no visible difference — a 10-30× speed improvement.

Google PageSpeed Insights lists image optimization as one of the highest-impact performance improvements. Page load speed directly affects user retention: research shows each 1-second increase in load time reduces conversion rates by about 7% and increases bounce rates by 32%.

Recommended Image Sizes for Different Website Positions

• Full-width hero banner: 1920×1080 px, keep file size under 300KB
• Article cover image: 1200×630 px (also works for social share previews)
• Product display image: 800×800 px (1:1), supports user zoom
• Thumbnails / card images: 400×300 px, under 50KB
• In-article images: 800-1200px wide; height per content ratio
• Site logo: SVG format preferred; for bitmaps, 200×60 px or less
• Avatars / author photos: 200×200 px (1:1)

Optimizing for Retina Screens: The 2x Image Strategy

Apple Retina screens and high-DPI Android devices have twice the pixel density of standard screens — standard-resolution images appear blurry on them. The solution is to provide 2x resolution images: if an image displays at 400px wide on the page, the actual image file should be 800px wide.

HTML5's srcset attribute lets browsers automatically select the appropriate resolution image based on screen density, achieving optimal visual quality and performance: <img src="img.jpg" srcset="[email protected] 2x">.

Choosing the Right Image Format

• WebP: Google's modern format, 25-34% smaller than JPG and 26% smaller than PNG. Supports transparency. Fully supported by modern browsers — the top choice for web images.
• JPG: Best for photos and complex color images. No transparency support. Lossy compression; recommended quality 80-85%.
• PNG: Best for icons, screenshots, and images needing transparent backgrounds. Lossless compression but larger files.
• AVIF: Next-gen format with the highest compression, but browser compatibility is still improving. Can complement WebP.
• SVG: Vector format ideal for icons, logos, and illustrations. Scales infinitely without quality loss — strongly recommended.

Practical Workflow: Website Image Optimization

1. Determine display dimensions: Check your page CSS to confirm the pixel display size at maximum screen width, accounting for the 2x factor.
2. Resize the image: Use an online tool to resize to the target dimensions. Don't upload originals far larger than the display size.
3. Choose format and compression: WebP (quality 80-85%) for photos; PNG or SVG for graphics.
4. Verify file size: Above-the-fold images should ideally be under 200KB; below-the-fold can be relaxed to 500KB.
5. Add alt attributes: Give every image descriptive alt text for SEO and accessibility.

Lazy Loading and Responsive Images Best Practices

Beyond proper resizing, two additional techniques further improve website image performance. Lazy loading makes images load only when the user is about to scroll to them, preventing the browser from loading all images at once. HTML5 natively supports it: <img loading="lazy">.

Responsive images use srcset and sizes attributes to let the browser automatically select the appropriately-sized image version based on screen width, avoiding mobile devices downloading large desktop images. Combining both techniques can reduce image-related page load time by an additional 30-50%.

SEO Perspective: Why Image Optimization Matters

Google's Core Web Vitals include LCP (Largest Contentful Paint) and CLS (Cumulative Layout Shift) — both closely tied to images. Setting correct width and height attributes prevents layout shifts, while optimizing file size directly improves LCP scores.

Additionally, high-quality, meaningful images paired with correct alt text and descriptive filenames (using keywords rather than IMG_1234.jpg) help images appear in Google Image Search results, driving additional organic traffic to your site.