Nothing Will Speed Up Your Site Faster Than Optimizing Images

Using a tool like GTMetrix.com will point out some obvious issues with your website. More often than not image size, compression and resolutions will be at the top of the list to fix. 

On our first #WPWednesday episode of the BeBizzy Break Podcast we talk about why and how you should be optimizing your images for better site load times. 

Subscribe to the BeBizzy Break Podcast on iTunes and Stitcher Radio. 

What Can Be Managed In An Image File?

Format

• JPG – most common. Compressed using “lossy” compression, which means you lose some quality when you save the compressed file.
• PNG – A “lossless” compression type but can be a larger file size. Works best of images using less than 16 colors (icons, logos, etc).
• GIF – Used for small images and short animations. Images will lose quality due to this format’s limitations.
• WebP – a fairly new image format for the web. It promises 26% smaller in size to PNG, and approximately 30% smaller than comparable JPEG images. However, WebP is not supported on all servers and browsers so your website could be displayed oddly to most users.
• TIF – Highest quality image best used for commercial images and not used very often on the web

 Compression

• JPG and PNG can both be compressed using various softwares. However, when you compress an image you will lose quality, so keep an eye on how that photos looks at various sizes that may appear in a responsive site before you implement.
• Compression is a great way to decrease the file size of an image. For example :
  • 2000×1500 image recently used as a background on a website – 9MB uncompressed – 7 seconds to download on 10Mbit/s line
  • 2000×1500 at 30% compression – .20MB – close to ZERO seconds to download
  • That same 30% compression at 1000×750 size – .07MB and very little time to download

Responsive Websites

• Sites that display differently based on the type of device and resolution automatically will sometimes need different sized images to display correctly. Unless you manually tell it what image to use the program (the WordPress theme) will determine this on its own. Keep in mind the sizes can range from a vertical smartphone screen all the way to a 50″ television.
• For best results use a variety of image sizes, use WPMU’s Smush Pro, or look at your Google Analytics to see what types of devices are more likely to view the page.

How Can You Change File Size?

• Photoshop – industry “standard” but can be expensive.
• PaintShop Pro – I’ve used this software for many years. Many Photoshop features but much less expensive.
• GIMP – GNU Image Manipulation Program – FREE open source Photoshop clone has many of the same features and it’s the best price.
• TinyPNG – WordPress plugin that automatically compresses files on upload.
• WPMU Smush & Smush Pro – very versatile program that compresses images and creates multiple sizes that get automatically used where needed.
• reSmush.it – Regarded as the best image compression WordPress plugin. Limits optimization to uploads lower than 5MB in size.
• Optimizilla – free online image compressor. You can upload up to 20 images and it will create downloads of the compressed files.
• JPEG Optimizer – another free online app that lets you select compression values.

Make Sure Your New Images Are Displayed

• Upload and replace the current images. I suggest deleting the originals AFTER you make sure the compressed images are quality and are working correct just to save space on your site or server. It’s always a good idea of backing them up first just in case.
• Clear your server and browser cache to remove any memory of the old file paths.
• Check the site at GTMetrix again and see if anything else needs to be compressed.

What Else Can I Do To Affect Image Load Times?

• Use a CDN. Content delivery networks are servers dedicated to sending cached media to your website. They are optimized to send this data quicker than your standard web server.
• Use a host that has SSD hard drives. I was amazed on how much quicker my website loaded when I moved to an SSD from a standard hard drive.
• Speaking of hosts, move from a shared environment to a VPS or dedicated server. That removes you from the pool of sites on one box that are running who-knows-what and sucking up all the server’s resources.

WordPress News

• 5.2.2 was released yesterday. Fix 13 bugs and had some other updates. 
• WordCamp Europe in Berlin, Germany June 21-22, 2019 
• WordCamp Kansas City in Overland Park, KS – June 28-29, 2019 
• WordCamp Jacksonville in Jacksonville, FL – June 28-29, 2019

Have any questions or suggestions on editing your images to make your WordPress website load faster? Leave them below, or send them to me @BeBizzy on Twitter!

Subscribe to the BeBizzy Break Podcast on iTunes and Stitcher Radio.