Recommended Image Sizes for Websites Best Practices 2026

Hero Image (large top image on homepage)

Set width to 1920 pixels. Set height to 1080 pixels. Keep file size under 10 MB, but aim for under 600 KB.

Source: Shopify recommends hero images between 1280 and 2500 pixels wide with 16:9 aspect ratio and file size up to 10 MB . Jezweb advises 2560 x 1440 at 16:9 ratio with file size under 600 KB for faster loading . Arizona State University confirms 1920px width as optimal for hero images .

Background Image

Set width to 2560 pixels. Set height to 1400 to 1600 pixels. Keep file size under 650 KB.

Source: Shopify recommends 2560 x 1400 pixels for background images . Jezweb confirms 2560 x 1600 at 16:10 ratio with file size under 650 KB .

Blog Featured Image

Set width to 1200 pixels. Set height to 630 to 800 pixels. Keep file size under 250 to 350 KB.

Source: Jezweb advises 1200 x 630 pixels (1.91:1 ratio) at under 250 KB for blog featured images . Shopify recommends 1200 x 800 pixels with 3:2 ratio at under 3 MB . Cornell University suggests 840px width for story images and 2000px if the image also serves as a hero .

Product Image (for online stores)

Set width to 2000 to 2048 pixels. Set height to 2000 to 2048 pixels. Keep file size under 500 KB to 1 MB.

Source: Shopify recommends 2048 x 2048 pixels for square product images to enable zoom functionality . Amazon requires minimum 1000 pixels on the longest side for zoom, with 1600+ pixels being optimal, and max file size 10 MB . The Amazon main image must have pure white background (RGB 255,255,255) with product filling 85 to 100 percent of the frame .

Logo Image

Use SVG format whenever possible. For PNG, set width to 320 pixels. Keep file size under 80 KB.

Source: Jezweb recommends SVG format for logos, or 320 x 120 pixels for PNG with file size under 80 KB . Axios HQ advises 800 x 200 pixels for wide logos (4:1 ratio) at under 1 MB .

Thumbnail Image

Set width to 600 pixels. Set height to 400 to 600 pixels. Keep file size under 100 to 150 KB.

Source: Jezweb recommends 600 x 400 pixels for blog thumbnails at under 100 KB, and 800 x 800 pixels for product category tiles at under 200 KB .

Favicon (browser tab icon)

Create multiple sizes: 16x16, 32x32, 48x48, and 180x180 for Apple devices. Keep each under 50 KB. Use ICO or PNG format.

Source: Bluehost confirms favicon sizes needed for cross browser compatibility: 16x16 for browser tabs, 32x32 for desktop shortcuts, 48x48 for Windows taskbar, and 180x180 for Apple touch icons on mobile devices .

Quick File Size Rules

Keep full width hero images under 600 KB. Keep blog images under 250 KB. Keep thumbnails under 100 KB. Keep total page image weight under 2.5 MB.

Source: Cornell University advises total page size between 1.5 and 2.5 MB for optimal loading speed . Jezweb provides the specific file size targets listed above .

Best Image Formats to Use

Use JPEG for photographs. Use PNG when you need transparency. Use SVG for logos and icons. Use WebP for everything else to get 30 percent smaller files.

Source: Shopify confirms WebP reduces file size by more than 30 percent compared to JPEG or PNG, though not all older browsers support it . JPEG is best for photos with many colors. PNG is best for images requiring transparent backgrounds . SVG is ideal for logos because it scales to any size without quality loss . University of the Incarnate Word recommends PNG as preferred format for web images .

The One Tool You Must Use

Run every image through TinyPNG, Squoosh, or Photoshop before uploading. Set JPEG quality to 75 or 85 for best balance of quality and size.

Source: Cornell University recommends JPEG quality of 75 for optimal web performance . Amazon advises JPEG quality of 85 for product images . Shopify notes that image compression tools can dramatically reduce file size without visible quality loss .

Resolution Rule

Set resolution to 72 DPI for all web images. Higher resolution only increases file size without improving how the image appears on screens.

Source: Multiple university and platform sources confirm 72 DPI is the standard for web images . Arizona State University notes that higher resolutions just add load time and do not improve visible quality .

The One Line Summary

Make your images 1920x1080 or smaller. Keep each file under 500 KB. Use 72 DPI. Set JPEG quality to 75. Compress everything before uploading. Use WebP for best performance.

Follow these numbers and your website will load fast, look sharp, and rank better on Google.

‍