resize images for web

For web use, image resizing usually means:

1. Reduce dimensions to the maximum size you actually need.
2. Compress/optimize for smaller file size.
3. Keep aspect ratio so images don’t look stretched.
4. Use the right format:
   • JPEG for photos
   • PNG for transparency
   • WebP for smaller modern web images
   • SVG for logos/icons

Common target sizes

• Full-width hero image: 1600–1920 px wide
• Blog/content image: 800–1200 px wide
• Thumbnails: 200–400 px wide
• Icons/logos: as needed, often SVG preferred

Simple rules

• Don’t upload a 4000 px image if it only displays at 1200 px.
• Aim for file sizes under:
  • ~200 KB for general images
  • ~100 KB or less for thumbnails
• Use lazy loading for images below the fold.

Quick ways to resize

• Photoshop / GIMP / Preview
• Online tools like TinyPNG, Squoosh, or ImageResizer
• Command line:
  • ImageMagick:

    magick input.jpg -resize 1200x1200\> output.jpg
    

  • This keeps aspect ratio and only shrinks if larger than 1200 px.

Best practice for responsive web

Provide multiple sizes and let the browser choose:

<img 
  src="image-800.jpg"
  srcset="image-400.jpg 400w, image-800.jpg 800w, image-1200.jpg 1200w"
  sizes="(max-width: 600px) 100vw, 800px"
  alt="Description">

If you want, I can give you:

• a batch resize script
• exact recommended dimensions for your website
• or steps for Photoshop / Mac / Windows / Linux