Tips on optimizing images – why the fuss and how best to approach it.

When I first started using WordPress, the focus was on creating amazing websites with little thought about optimization.  Very quickly the word “optimize” became an essential component.  While I was creating beautiful websites, they were top heavy and slow performing.  I had been loading photos and graphics full size and high resolution using the media software to resize after the fact.  This was happening to a lot of developers as cell phones became more popular and the cameras most sophisticated. It was possible to take very high level resolutions pictures in seconds. It was quick, easy and convenient to upload them, as is, to a website.

Images are the Second Heaviest item ...

Next to video, images are the next heaviest item on a web page.  Optimization is CRITICAL!

Why Optimize images

  • Enables faster website speed
  • Increases page upload speed
  • Requires less storage and bandwidth
  • Decreases the amount of storage needed
  • Improves SEO rankings which helps get you more traffic
  • Enables faster backups

TIP

Resize and optimize all images BEFORE you upload them to your web page.

Three ways to Optimize ...

  1. File Type: JPEG vs PNG vs GIF
  2. Image dimensions (height and width)
  3. Compression (the higher the compression, the smaller file size)

Choosing the right combination of these three can reduce your image by up to 80%.

When to use which file type

  • JPEG format is best for photos and images with lots of colour
  • PNG format is used when you need transparent images
  • GIF format is used for animated images only.

Image dimensions

The size of your image (height and width) should be no greater than the maximums specified by the Theme you are using to design the site.

WordPress also provides recommended settings as part of its core software, i.e.,

  • thumbnail 150 x 150 px
  • medium 300 x 300 px
  • large 1024 x 1024 px

NOTE: Your theme may support larger photos. Check it out.

Image compression

This means removing some amount of data and reducing the image size without compromising image quality.  We usually use Adobe Photoshop to optimize images for the web BEFORE I upload.  If you don’t have Photoshop you can use Paint on your computer or add a plugin to your website to do the work for you.

Resize and Compress using Adobe Photoshop

Plugins for Image Optimization

NextGEN Gallery, NextGEN Gallery Plus and NextGEN Gallery Pro –  These plugins are highly recommended by Bouzane Consulting.  We use it for all photography websites as well as for websites that use a significant number of photos.  Once installed, image optimization can be done directly through uploads to NextGEN galleries within your website. For more information go to https://imagely.com

Share