Image Optimization 101

Image Optimization 101: Step-by-Step #

Step 1: Choose the Right Image Format #

• JPEG/JPG: Best for photos; smaller file sizes with good quality.

• PNG: Best for images with transparency or simple graphics (logos, icons).

• WebP: Modern format; smaller files with excellent quality. Supported by most browsers.

Tip: Use JPEG for photos and WebP for both photos and graphics if your site supports it.

Step 2: Resize the Image #

1. Determine the maximum display size on your website.

   • Example: If your site displays images at 1200px width on desktop, don’t upload anything larger than that.

2. Resize using a tool:

   • Free online: TinyPNG, Pixlr, Canva

   • Software: Photoshop, GIMP, Affinity Photo

3. Steps in Photoshop (example):

   • Open image → Image > Image Size

   • Set Width (in pixels) according to your website’s needs

   • Ensure Constrain Proportions is checked to avoid stretching

Tip: Always keep the image’s aspect ratio to prevent distortion.

Step 3: Compress the Image #

• Goal: Reduce file size without noticeable quality loss.

• Compression Tools:

  • Online: TinyPNG, Squoosh, ImageOptim (Mac), RIOT (Windows)

  • Photoshop: File > Export > Save for Web (Legacy) → adjust Quality slider

• Recommended File Sizes:

  • Hero banners: ~200–400 KB

  • Standard images: 50–150 KB

  • Thumbnails: 20–50 KB

Tip: Compare before/after to ensure the image doesn’t look blurry or pixelated.

Step 4: Name Your Images Properly #

• Use descriptive, keyword-rich file names for SEO.

  • Example: red-modern-sofa.jpg instead of IMG_1234.jpg

• Use hyphens to separate words, not underscores.

Step 5: Optional – Use Lazy Loading #

• Implement lazy loading so images load only when visible on the screen.

• This improves page speed and user experience.

• WordPress: Many themes/plugins support lazy loading automatically.

Step 6: Test Your Images #

1. Upload the optimized image to a test page.

2. Check:

   • Loading speed

   • Image clarity

   • Mobile responsiveness

3. Tools to test page speed:

   • Google PageSpeed Insights

   • GTMetrix

Extra Tips #

• Keep originals: Always keep a high-res copy before resizing.

• Automate: Plugins like Smush, ShortPixel, or Imagify can automatically optimize images on WordPress.

• Consistency: Use the same width/height ratios across your site for a uniform look.