# Optimising images for your website

> Make your pages load faster by resizing and compressing images, choosing the right format and using lazy loading.

Source: https://helpcenter.ruachost.com/apps/guides/optimizing-images-for-your-website/

Optimizing images is one of the easiest and most effective ways to improve your website’s performance. Smaller, well‑compressed images load faster, reduce bandwidth usage, and improve user experience. On **ruachost.com**, you can optimize images using several methods.

## Why Optimize Images?

- Faster page load times.
- Reduced server bandwidth usage.
- Improved SEO rankings (Google favors faster sites).
- Better user experience, especially on mobile devices.

## Methods of Image Optimization

### 1. Use Your CMS or Web Application

- Many CMS platforms (like WordPress, Joomla, Drupal, PrestaShop) support plugins or modules that automatically optimize images.
- Example: **EWWW Image Optimizer** for WordPress can compress JPEG, PNG, and GIF files.
- Check your CMS documentation for available plugins/extensions.

### 2. Use Online Services

- Online tools allow you to upload and compress images without installing software.
- Examples:

  - ### Dynamic Drive Image Optimizer
  - **JPEG‑Optimizer** (specialized for JPEGs)
  - **TinyPNG** (specialized for PNGs)
- These are convenient for small batches of images but may have file size limits.

### 3. Use Client Applications

For larger projects, desktop applications are more efficient:

- ### Windows

  - **RIOT** → Free tool for JPEG, PNG, GIF optimization. Supports batch processing.
  - **PNGGauntlet** → Optimizes and converts PNG files.
- ### macOS

  - **ImageOptim** → Free, open‑source tool for JPEG, PNG, GIF optimization.
- ### Linux

  - **jpegoptim** → Command‑line tool for JPEG optimization.
  - **optipng** → Command‑line tool for PNG optimization.
  - **gifsicle** → Command‑line tool for GIF optimization.

## Best Practices

- Always keep a backup of original images before compressing.
- Use the correct format:

  - **JPEG** → photos and complex images.
  - **PNG** → graphics, logos, transparency.
  - **GIF** → simple animations.
- Resize images to the exact dimensions needed on your site.
- Consider using **WebP** format for modern browsers (smaller file sizes, better quality).