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).
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.
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.
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.
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:
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.
This handy plugin will let you create custom sizes that will be used every time you insert a new picture into your site:
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:
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.
- Easy Caching for WordPress with 2 plugins - 14 May, 2018
- Gutenberg Editor Revisited - 29 March, 2018
- The best image optimization tips for WordPress - 22 November, 2017
Thank you!!
Tiled Gallery plugin is great.
Have trasformed my old galleries where not used NextGEN
Thanks for post. What I want to say is that we optimized also our website using image compression tool. But we used Cheetaho https://wordpress.org/plugins/cheetaho-image-optimizer/ I liked it more than ewww plugin
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.
thank you, sir, for providing me the plugin
thanks for the great information and i will setup cdn after seeing this post.
Interested to try the CDN Enabler plugin it seems very nice to optimize images especially for tutorial articles.
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.
I am optimizing images myself. Uploading low size photos.
thank you
but I use another plugin so good
Excellent resource and appealing presentation you have here. I have got very good knowledge of image optimization techniques over here.
Hi
Do cloud services like cloudflare or keycdn automatically do the optimization or we need plugin with that.
I am optimizing images myself. Uploading low size photos.
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.
Nice blog, keep it up.
Great Blog. Such a nice post. It’s very helpful information for me. Thanks for share.
I can use these tips to optimize my own blog images. Really this helps my website to load faster. Thank you for sharing 🙂
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.
Image optimization has become the key mandatory point for us now & this read is a helpful guide though!
Thanks for sharing with us.
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.
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
Thanks Alex for this article. Image optimization is needed for every WP Blog.
Nice article on WordPress image optimizer finally, found a helpful article on this topic. keep writing.
Nice article thanks for this. Every WP blog need Image optimization.
Thanks for your article keep posting i love you tools.
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.
Hi Alex thank you provide helpful knowledge we will optimization my images
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.
The most effective way to grab the attention of the online visitors is by putting high-quality images in the websites with long pieces contents. Image the most useful tool to generate high traffic of your websites from the image based search engines.
Many times, the heavy images can slow down the loading page of your websites and take more time to download from the server to visitor’s computer. You need to optimize the images for WordPress in different ways.
Here in the given blog you also find some best ways to perform the image optimization of your website effectively.
We sure going to use these optimization tips for our clients and websites. Web Crayons Biz Team, will get a new way to optimize the images.
Thanks for sharing.
Can you please explain the sufficient amount of contents that can be used in images?
Thanks for this helpful Blog.
I used a WordPress plugin that I found interesting. So I would like to recommend it.
The plugin helps me quickly create and customize images before inserting them in my blog post.
Check at: https://getpikiz.com/wordpress-plugin/
It’s free.
Thanks for sharing such a beautiful article about Image Optimization. I loved it. Keep Posting. Now I am also going to utilize these image optimization tips for our WordPress blog
thanks for sharing best wordpress plugin for image optimization.
Thanks for this helpful Blog.
I used a WordPress plugin that I found interesting. So I would like to recommend it.
The plugin helps me quickly create and customize images before inserting them in my blog post.
Check at: https://getpikiz.com/wordpress-plugin/
It’s free.
Wow, that’s quite a lot of information. Thanks for the post and the tools. I always rely on Photoshop, I did have to download all images and compress them “manually” in PS. Thank you for the list of these image compression plugins but consistent with me, ShortPixel seems to be the first. Presently, I’m using a unfastened tool called tinypng as well. It’s not a plugin but it enables a lot to compress snapshots without dropping their quality. Having a good picture compression plugin will save a lot of our time. I’m without a doubt going to attempt many compression tools that you listed and will share my experience…!!!
As i said, I have personally used ShortPixels, Tinying and recently Optimus too, but now I have found permanent solution for image compression without any Subscription. I’m also planning to use Optimizilla website for online image compression. Its pretty cool and easy. I think everyone should try it atleast once. Also for newbie blogger, I would recommand WP Smush to start with. Then they can try other tools as they progress in blogging.
Anyways, thanks for taking the time to write such an extensive review on this subject, it should be very helpful for many bloggers. Please keep sharing and good luck.
I will use EWWW image optimizer for the image optimization now. All the information shared is beneficial to me and helped me a lot in learning image optimization. Thanks, Alex for publishing this article.
I am also using EWWW for image optimization and it works amazing. Thanks for your suggestion.
Hi Alex,
I am Rajesh Kumar & read your informative blog. Really good blog. I am using easy image size plugin in my website.
Thanks for sharing this blog.
Thanks for sharing this informative and useful article. I have been using WordPress and facing this issue for a long time but finally I got the solution through this article. Now I can resize my own images and can have my own plug-ins.
Image optimization process is most helpful after posting it can not be control so keep in the mind before posting of any Image will do resize according to their requirement . This is very helpful blog for Image optimization .
I working on a website which provides images. Wow, that’s quite a lot of information. Thanks for the post and the tools. I always rely on Photoshop, I did have to download all images and compress them “manually” in PS. Thank you for the list of these image compression plugins but consistent with me, ShortPixel seems to be the first. Presently, I’m using a unfastened tool called tinypng as well. It’s not a plugin but it enables a lot to compress snapshots without dropping their quality. Having a good picture compression plugin will save a lot of our time. I’m without a doubt going to attempt many compression tools that you listed and will share my experience…!!!
Finally i got it. Thanks Alex. Really, from last few days i’m actually looking for how i can optimize my WordPress website images. So thank you Alex again for this helpful post.
HI…..
I am optimizing images myself. Uploading low size photos.
this article is very useful for optimizing images on wordpress. thank for sharing this to all.
I started optimizing the images on WordPress after reading this blog.
Thank you so much for sharing this informative and useful article. I have been using WordPress and facing this issue for a long time but finally I got the solution through this article. Now I can resize my own images and can have my own plug-ins.
I have been using CDN enabler long for now. It feels good to know that its one among the best.
Thank you so much for sharing this informative and useful article. I have been using Smush Image Compression and Optimization for WordPress.I wanted to know which one is better EWWW Image Optimizer or mine one. Please reply!!
Hi, thanks……
I checked to the website in google page speed checker than the warning still showed Image Optimization to reduce image loading time. when I am using Image optimize plugin then solve my problem.
Yes the image optimization can boost your rankings in Google now
Thanks for the great information and i will setup cdn after seeing this post