To ensure efficient server storage usage and faster page load times, it is crucial to optimise images before uploading them to your WordPress website. Here is a comprehensive guide to help you through the process.

Steps to Optimise Images for Web


1. Resize Images to 72 DPI

DPI (dots per inch) is a measurement of image resolution. For web usage, 72 DPI is sufficient and helps in reducing file size without compromising on visual quality.

2. Choose the Right Format

  • JPEG: Use for images without transparency. It provides a good balance between quality and file size.
  • PNG: Use for images with transparency. PNGs can be larger but are necessary for certain graphical elements.

3. Set Appropriate Dimensions

Ensure images are sized correctly for their specific placement on your website. Uploading oversized images can slow down your website.

  • Header Images: Typically 2116px width
  • Content Images: Typically 1200px width
  • Thumbnails: Typically 150px width

4. Compress Image File Size

Use an image optimisation tool to compress the file size while maintaining image quality. Compression reduces the amount of data the image requires, leading to faster load times.

Recommended Tools

For Mac Users

  • ImageOptim: A free tool that compresses images without losing quality. Follow the guide here.

For Windows Users

  • FileOptimizer: A versatile tool that optimises image files among other formats. Download and usage instructions can be found here.

Example Workflow for Image Optimisation

  1. Resize Image: Open your image in an editing tool (e.g., Photoshop, GIMP), set the resolution to 72 DPI, and adjust the dimensions as needed.

  2. Save in Correct Format: Save the image as JPEG or PNG based on its content.

  3. Compress Image:

    • Mac: Drag and drop the image into ImageOptim.
    • Windows: Open FileOptimizer, add the image, and optimise it.

  4. Upload to WordPress: Once optimised, upload the image to your WordPress media library and use it on your site.

Conclusion

By following these steps, you can ensure your images are optimised for the web, improving your website's performance and user experience. Proper image optimisation not only saves server storage but also enhances page load times, contributing to better SEO and visitor satisfaction.