Taking your WordPress website’s speed up a notch with better image optimization

Blog No Comments

WordPress is one of the most widely used platforms for website development. From small blogs and e-commerce stores to multi-instance deployments handling millions of users, almost 30% of all websites are built using WordPress.

On any modern website, images are a critical component. They are used for blogs, product images, infographics and at times just for aesthetic value. While images make our website look great, they are the most significant contributor to page weight. Almost 60% of the page size is made up of images.

To ensure that our websites load fast for our users and that we get great SEO rankings, optimizing images is critical. We need to make them smaller, load the correct dimensions and use a good image delivery network to reduce the loading time for our users. Not just our users, even Google places a lot of importance on optimizing images for a fast page load time.

While, there are a lot of ways to resize the images correctly for our WordPress website and this post does an excellent job of covering the basics of it, resizing alone is inadequate to ensure a super-fast loading experience.

And this is where ImageKit.io, a complete, automatic image optimization, and delivery tool, can help take our WordPress website’s speed up a notch. It comes with a ready-to-use WordPress plugin and can speed up the website by an extra 30%.

How can ImageKit.io speed up your website by another 30%?

You can load all your existing images via ImageKit just by installing the ImageKit plugin and that’s it. The integration is straightforward, takes only 5 minutes and doesn’t require any code change or transfer of images. Here is the complete integration guide for WordPress and ImageKit.

Let’s take a look at how ImageKit can help us.

1. Loading the correct format – WebP support and a lot more

Given multiple image formats to choose from, it often becomes difficult for us to make sure that images on our website are in the correct format.

ImageKit takes into account multiple factors – browser support, image content, original image quality and image dimensions – to find out the ideal format for every image in real-time. Just by delivering the image through ImageKit, your images will automatically get converted from JPG/PNG to WebP or from PNG to JPG/WebP where ever possible.

Therefore, with ImageKit, we get more than just a simple WebP conversion that is offered by many other plugins. We get perfect format optimization.

2. Compressing the images

Once the image has been converted to the right format, we also need to ensure that it is compressed to a smaller size. As compression comes at the cost of visual quality, it needs to be controlled to a desired level.

ImageKit allows for quality control right from the dashboard. Just set the default quality level and other visual quality related settings from the dashboard. And without any other change in the URL, all our images delivered through ImageKit are compressed to the right levels. You can increase or decrease the default quality level from the dashboard depending upon your preferences.

Example of image compression and format conversion with ImageKit

3. Using a global content delivery network

All our efforts around image resizing, compression and format conversion, would fall flat on their face, if the images do not load quickly on our user’s device. To ensure that they load quickly with minimum latency, all the leading websites in the world use something called a Content Delivery Network or a CDN.

Simply put, a CDN is a globally distributed network of servers that help cut down the geographical distance and hence the time taken to deliver the image to a user’s device.

ImageKit comes integrated with one of the best CDNs currently available – Amazon CloudFront with over 150 delivery nodes across the globe. All the images and files delivered via ImageKit are delivered through this CDN that ensures that images will be loaded in milliseconds on every device. Additionally, ImageKit processes our images in 4 locations across the globe (and keeps adding more with time) to ensure quick processing.

ImageKit for advanced WordPress users

ImageKit also allows for real-time image transformations, directly from the image URL. We get features like image resize, crop (and smart crop), blur, rotate, image watermarking and many more, just by changing the image URL slightly.

For example, we can resize an image to width 400px and height 300px with ImageKit like this
https://ik.imagekit.io/demo/img/default-image.jpg?tr=w-400,h-300

Advanced WordPress users who are comfortable in making changes to the theme template, can use these real-time transformation features for different use cases.

  1. Processing all the images in the cloud and saving our server’s processing capacity (it takes just a few milliseconds to transform the image on ImageKit’s server network)
  2. Lazy loading images with great visual effects
  3. Watermarking your images with your brand’s logo without getting your Photoshop guy involved

 

How much does ImageKit cost? Nothing.

Yes, that’s right. ImageKit starts completely free. We get all the features mentioned above, a global content delivery network and all of the image transformation features with ImageKit’s Forever Free Plan. The only restriction is that our output bandwidth (total size of images delivered via ImageKit) is restricted to 20GB per month. On average, this should be more than enough for a website that does about 20-40K page views in a month.

If the bandwidth requirement exceeds 20GB, or if we want premium features like using our domain name with ImageKit, priority support and multiple user accounts, then there is a premium plan that starts at just $39 a month.

Will I need other image optimization plugins along with ImageKit?

No. ImageKit comes with best-in-class image optimization and is used by several companies across the globe to deliver more than a few billion images every month. It works better, or at least at par, with any other image optimization plugin out there. And it is better to have a single plugin do all the optimizations on your images to ensure a good visual quality of the output image.

Will it really help?

On average, websites see a 30% improvement in page load time just by installing the ImageKit plugin on their website. And moreover, it is free to and you can start using it in just 5 minutes.

Just give it a try, and I am sure you will never look elsewhere for any image optimization requirements.

We really appreciate you for visiting PremiumCoding and reading this article! Now you might also want to check out our Themes here.