wpthemedetector-logo
WordPress Theme Detector Blog

The best image optimization tips for WordPress

There are several ways you could optimize your images for better performance and usability. WordPress is not a champ regarding image manipulation; although you can tweak images once uploaded you can’t control the process, and there are several automated things that are not ideal and should be modified.

Today I’m going to explore the most important aspects of image optimization for WordPress:

  • How to optimize image sizes,
  • How to create your own resizes,
  • How to optimize the standard WordPress gallery for better presentation, and
  • How to apply a CDN.

These techniques will speed up your image loading, and they will also improve the quality of your blog by putting the control of the process back in your hands.

Use an Image Compression Plugin

Images uploaded to your site will not be optimized. WordPress has a standard mechanism for image compression that repacks the image to a default compression, but it will not strip away useless data usually inside each JPG/PNG file. There are several cloud services that offer such functionality, but they are all paid solutions that could increase the cost of your site.

There is still a plugin that is free and that offers such functionality by striping away useless data, not charging for it as it’s done in your own hosting with your CPU. This plugin is EWWW Image Optimizer (not to be confused with Image Optimizer Cloud which is the paid service).

ewww2

EWWW Image Optimizer works by using standard linux tools to strip content from JPG and PNG images without affecting their quality, hence saving you space in the process. The plugin doesn’t need any further tweaking and the default options are a best fit for almost everyone, but you need to take into consideration that this software will use your hosting CPU. If your hosting is not demanding in your CPU cycles, this plugin is your best bet for optimizing your image sizes.

Improve the looks of your galleries

What good could image optimization be for, if the presentation of your galleries is horrible. Although there are almost a thousand plugins that deal with galleries, few come close to the usability and presentation of this one: Tiled Gallery Carousel Without JetPack. It is by far the best looking gallery plugin customization there is, simply because it doesn’t require custom galleries nor it requires the use of any tags as it overwrites the standard WordPress gallery functionality with the one that comes with JetPack.

The good thing about this plugin is that it implements galleries from JetPack while effectively freeing you from installing such a heavy plugin just for the galleries.

tiled-gallery-carousel-without-jetpack2

The presentation is just perfect as the tiled galleries will mutate according to the sizes of your pictures, making for an excellent presentation without having to mess with code or adding custom galleries to your site. It´ll just keep on using the default WordPress galleries, only with better presentation.

galleries

You can check how this looks in realtime on my magazine here

Use a CDN with CDN Enabler Plugin

Having to host your own images, specially if your site is a magazine, can be a burden for your hosting and your monthly bandwith.

But using a CDN is no longer a problem, since there are already enough good and cheap CDN services that you won’t have to spent too much to be able to enjoy. Besides, you can even use Cloudflare CDN for free in conjunction with the nice CDN Enabler plugin.

cdn-enabler2

KeyCDN is a CDN company in itself, but they have also proven to be very good coders. The CDN Enabler plugin is a fine addition to your WordPress installation and, in conjunction with CloudFlare, can give you instant CDN acceleration for free. You only need to create your own custom domain for your CDN Account. You can see I have mine set as cdn.tecnogaming.com:

cdn-enabler

The trick here is to only instruct CDN Enabler plugin to replace the image path, saving local javascript and css to be loaded from your server. This is by far one of the best optimizations as CDN services tend to lag sometimes, specially if they are loading the content for the first time. Having to load your CSS/JS files from a CDN can slow down your site even more than without a CDN if the cache is empty.

Setting the image path as the only CDN path forces the rest of the content to be loaded from your hosting. This has proven to be the best way to instantly optimize the load time and performance of your site. Readers who are far away from your server will still be able to get your site loaded fast, since images are still the single most important factor in performance and they will be loaded from the nearest location to the reader.

Create your own image sizes

Sometimes standard image sizes are not enough and you need to create custom presentations which require extra dimensions. Forcing a bigger version of an image instead of the actual size it takes is not an ideal approach, as the image being loaded would be heavier than it should be.

Easy Image Sizes is a plugin that lets you customize the image sizes to your liking.

easy-image-sizes

This handy plugin will let you create custom sizes that will be used every time you insert a new picture into your site:

easy-image-sizes2

The plugin will let you create a custom image, instruct WordPress whether it is cropped or not, and even add a tag/style to it for easy customization.

Create your own plugin for image uploads

Another good method of improving your image manipulation is to create your own plugin and to instruct WordPress to link the image URL to its media file instead of to its page attachment. You can also instruct WordPress to create thumbnails only when necessary. This will save you tons of space. You can check my tutorial How to Improve WordPress Image Functionality on how to do this:

How to Improve WordPress Image Functionality

Wrapping Up

Today you’ve learned several ways to implement image optimization on your site, not just for boosting its loading speed but also its appearance.

Coming with better ways to handle your image content is a never ending journey, as WordPress keeps on evolving and older methods are no longer valid. These tips, combined with a good hosting and with a well mantained WordPress install, will make your site able to give the best experience to your readers.

Don’t forget to use good images too, as that part can’t be optimized with any plugin or tweak.

Alex Vojacek

Alex Vojacek is a full-time sysadmin for ESH, his own hosting company, a veteran in WordPress Design and a speed freak. He is also the founder of TecnoGaming, a Gaming & Tech magazine in Latin America. When he is not managing or designing something, he loves to write about technology.

Latest posts by Alex Vojacek (see all)

Liked this post? Please share it!

27 Comments

  1. Thank you!!
    Tiled Gallery plugin is great.

    Have trasformed my old galleries where not used NextGEN

  2. this is impressive.
    But then, what of someone who is unto musical blog. Since songs consume disk space what can you do to save space and promote speed of the site?
    thanks in advance.

  3. thank you, sir, for providing me the plugin

  4. thanks for the great information and i will setup cdn after seeing this post.

  5. Interested to try the CDN Enabler plugin it seems very nice to optimize images especially for tutorial articles.

  6. How do you feel about simply limiting the file size of the image in something like Lightroom before you export it and upload it to your site? I’ve been doing this lately because plugins weren’t compressing the file size enough for me.

  7. I am optimizing images myself. Uploading low size photos.

  8. thank you
    but I use another plugin so good

  9. Excellent resource and appealing presentation you have here. I have got very good knowledge of image optimization techniques over here.

  10. Hi

    Do cloud services like cloudflare or keycdn automatically do the optimization or we need plugin with that.

  11. WordPress is my evengreen favorite with its plug-ins and features. Right now, I am manually optimising images. I doubt, optimization tricks are common for even featured images.

  12. Great Blog. Such a nice post. It’s very helpful information for me. Thanks for share.

  13. I can use these tips to optimize my own blog images. Really this helps my website to load faster. Thank you for sharing 🙂

  14. Can anyone tell me what is the size of a thumbnail or featured image of wp ocean theme? So that I can make a perfect thumbnail.

  15. Image optimization has become the key mandatory point for us now & this read is a helpful guide though!
    Thanks for sharing with us.

  16. I am using Image optimize plugin but when i checked to website in google page speed checker then the warning still showed Image Optimization to reduce image loading time. plz tell me other method to do image optimization without plugin.

  17. Image optimization is one of a tricky part of the blog Because it takes too much of time to make the right kind of optimizations. I was trying more than five plugins test image optimizations, and I don’t find what was best for my blog. This article was relive total stress about image optimizations and I was follow all these tips and I got huge improvement in my site loading time

  18. Thanks Alex for this article. Image optimization is needed for every WP Blog.

  19. Nice article on WordPress image optimizer finally, found a helpful article on this topic. keep writing.

  20. Nice article thanks for this. Every WP blog need Image optimization.

  21. Thanks for your article keep posting i love you tools.

  22. I am utilizing Image streamline module yet when I checked to site in google page speed checker then the notice still demonstrated Image Optimization to diminish picture stacking time. please advise me other strategy to do picture advancement without module.

  23. Hi Alex thank you provide helpful knowledge we will optimization my images

  24. Thanks for sharing the several relevant ways using which can be used to increase the performance and usability of our wordpress by optimizing the images. I am using these tips and they are very useful.

Submit a Comment

Your email address will not be published. Required fields are marked *