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:
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.
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.
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
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.
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.
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:
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.
The post The best image optimization tips for WordPress appeared first on WordPress Theme Detector.
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.
The post The best image optimization tips for WordPress appeared first on WordPress Theme Detector.