Optimizing Images for the Web

Owned by Amrita.Biswas
Last updated: Aug 28, 2024
2 min read

Why do we need to optimize images for the Web?

Websites with optimized images load much faster, which helps increase engagement rates, retain visitors for more extended periods, and have lower bounce rates. Beyond loading times, optimized images ensure smoother transitions between web pages and less lag when users interact with the site’s features or components. This makes for a more enjoyable and less disruptive browsing experience.

Best Practices

File Size

Best if less than 100kb.

Resolution

Some devices display more than 72 dpi. Set images between 144 dpi to180 dpi and export for web to ensure a good quality image on all devices.

Resize

Crop images before uploading (whenever needed).

Accessibility

  • Do not use important text in images.

  • Add text in WordPress

  • Decorative text can be included in images. However, responsive websites often crop images, which might cutoff some text.

File Format

Choose the appropriate file format (JPEG, PNG, or GIF).

  • JPEG/JPG
    Ideal for photographs and real-life images due to its ability to compress file sizes significantly while maintaining reasonable quality.

  • PNG
    Best suited for images requiring a transparent background. PNG files retain higher quality but often at larger file sizes compared to JPEG images.

  • GIF
    Primarily used for animated images.

Exporting as a JPEG in Photoshop

File > Export > Save For Web (Legacy). This brings up the dialogue box image compression.

JPEG will get a much lower file size than a PNG or GIF.

Select JPEG High in the Preset dropdown.

Check the Optimized checkbox.

Set Quality to 80.

Check the Convert to sRGB checkbox.

Save!

 

Exporting as a PNG in Photoshop for a transparent image

File > Export > Save For Web (Legacy). This brings up the dialogue box image compression.

Select PNG 24 in the Preset dropdown.

Check the Transparency checkbox.

Check the Convert to sRGB checkbox.

Save!