It is well known that doing an image optimize can significantly increase your website speed and result in more user searches.
A website that is not well optimized and holds huge image sizes can make so many requests on a visit that no user would stand the time it takes for your website to fully load.
Table of Contents
How to optimize images on your website
In 2021 60% of the website visitors are using mobile devices. As you may know, it takes longer time for your website to load on a phone, because it does not hold boosted accessories like a computer.
In fact if your website’s loading times take more than 3 seconds to fully load, it is more likely for you to lose a visitor and increase your bounce rate.
Bounce rate is determined by the time and page views done by the user and how long will it take him to leave your page.
Imagine that you have a website taking anywhere between 5 and 10 seconds to load. Nobody would ever want to wait that much time.
It would be lucky if someone stays to wait that much time for your website to fully load, without leaving and destroying your hard work.
But on the other hand if your website is loading fast and you optimize your images, you may get a loading time between 1 and 1.5 seconds, which will reward you with more clicks and happy users.
Google rewards websites with high page rank and position on first page for websites who load fast and have low requests coming from images.
That is why doing image optimize and increasing your website’s speed can reduce those requests in order to help your website load faster and have less page size and get your image optimize up and running.
In order to do image optimize for website you can:
- Reduce Image size by resizing
- Enable Gzip compression
- Use the right file format such as JPG or WebP
- Install a plugin such as ShortPixel, Smush or TinyPNG
- Enable lazy loading
- Compress Images
- Use a CDN such as CloudFlare or Bunny CDN
Reducing image size
Reducing image size is a must when optimizing images for a website. You should resize your images to the width and height that your website is originally using to display them.
For example you have images that are 3000px width and 2000px height, but your website is using only 500px width and 200px height.
You do not need to keep the original dimensions of the image, since your website is not displaying it this way and leave your image optimize untouched.
It only takes more size and increases your page size significantly, but does nothing special for your users.
Resizing your images can be done by Photoshop, Paint or even a free online image resizing website.
Enabling Gzip compression
Gzip compression takes your website’s html, css, javscript, php, images and other files, without changing the way your website works or its functionality.
The purpose of the Gzip compression for image optimization is to get all your files and zip them.
When a user comes to visit your website Gzip compression will fastly load all your files, without creating many requests.
Enabling Gzip compression on your website can significantly decrease your file size by 70%.
How to Enable Gzip Compression
Enable Gzip Compression with plugin
Enabling Gzip Compression can be done through plugins or editing your htaccess file.
With WPRocket or W3 Total Cache you only need to enable your Browser Cache.
If you do not want to install more plugins or currently own a caching plugin to optimize your images and website speed, you can add Gzip manually by the methods below.
Enable Gzip Compression manually for Nginx
If your website is currently running in nginx, you will need to find your nginx.conf file in the http section and place the below code snippet:
gzip_proxied no-cache no-store private expired auth;
gzip_diable “MSIE [1-6]
After pasting the code, simply restart nginx with the following code:
sudo service nginx restart
Enable Gzip Compression manually for Apache
For an Apache hosting you will need to find your htaccess file and paste the following code :
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
AddOutputFilterByType DEFLATE application/x-font
AddOutputFilterByType DEFLATE application/x-font-opentype
AddOutputFilterByType DEFLATE application/x-font-otf
AddOutputFilterByType DEFLATE application/x-font-truetype
AddOutputFilterByType DEFLATE application/x-font-ttf
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE font/opentype
AddOutputFilterByType DEFLATE font/otf
AddOutputFilterByType DEFLATE font/ttf
AddOutputFilterByType DEFLATE image/svg+xml
AddOutputFilterByType DEFLATE image/x-icon
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/xml
# Remove browser bugs (only needed for really old browsers)
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0 no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
Header append Vary User-Agent
In order to enable mod_gzip instead, you can add the following lines, rather than the above ones:
mod_gzip_item_include file \.(html?|txt|css|js|php|pl)$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_include handler ^cgi-script$
Using the right file format
When doing image optimize for website you will need to check your image size. Large images result in larger sizes, but also different image formats bring larger file size.
For example you have a PNG and a JPG image.
The PNG image can be resized without losing quality, but has a lot more size than a JPG.
Also PNG holds more quality, but it does not matter if you will have this picture sitting on your website, without being edited.
Even if you would like to edit a picture that you have on your website, it would be better to store a PNG copy locally and upload it as PNG on your WordPress website.
The best image optimize file formats for a website are JPG and WebP and in some cases SVG.
While JPG is offering small image size and increase the image optimize on your website, WebP is specially built in for speed optimization and faster loading images.
If you want your website to load faster, you can image optimize all of your image files for webP format.
This can be done easily by any image editor like Photoshop or a plugin such as WP LiteSpeed Cache (can be used only if your web hosting offers litespeed servers and your website is on such server).
Installing a plugin for optimizing images
Plugins are often the solution when we want to image optimize our website. They not only handle all the existing images, on your website for you to optimize them, but also tends to image optimize each new image that lands on your website.
Not only they help
One of the best plugins for such work are Smush, ShortPixel or Short Pixel.
Smush is the number 1 plugin for doing image optimize by compressing, stripping image metadata, resizing images, webp image optimize format and much more.
One of the things that the people like in Smush is the bulk smush option, which lets you to optimize 50 of your images at once.
Bulk smushing your images, can save you up to 30% of your total image size and reduce your page size enormously with just 1 click and you have an image optimize.
Along with the image compressions, Smush also offers you to resize all of your images into dimensions that you would like (before doing this, check in what dimensions your images are shown and pick the biggest dimensions).
If you are into image optimize and wish to transform their format into webP they have got this covered. (PRO feature)
If you are tired of loading images from your website and get a lot of requests when visiting your website, you can always use Smush CDN.
Smush CDN can store your images and load them into your website without making unneeded requests, which can improve your website speed, generate your more visits and get you a good image optimize score.
If you had never tried any image optimize plugin then you should give a try to ShortPixel.
It is a beginner friendly and quality producer plugin.
Getting your website perfect image optimize with ShortPixel has never been easier with any other plugin.
Not to mention that ShortPixel CDN can do the same job as Smush CDN, but the difference between them is significant.
When using ShortPixel, you are having a monthly cap of image optimize requests.
If you wish to have more image optimize requests you will need to pay and receive ShortPixel credits, which are used for purchasing more image optimize requests.
Although ShortPixel image optimize features are a bit limited, they offer an overall happy user experience.
If you image optimize with them your image size will fall, but image quality will never fall.
Not only they image optimize very well, but they also offer support for JPEG, PNG, GIF, TIFF and BMP image optimize format.
Other well known plugins, which are Similar to ShortPixel or Smuch are EWWW and TinyPNG, which can get the same job done.
Loading images through CDN
Using a CDN nowadays lets your website load lightning fast and decreases your image file size 40-80%.
Why use a CDN for optimizing images?
Rather than having your website loaded up with plugins, which load a lot of code, your theme’s files, which are full with code and even images, it would be better to load them through a CDN.
If you are not familiar what CDN means, it stands for Content Delivery Network.
Easily said it holds all of your images or cached version of your site.
When a visitor comes to your website, the CDN will make a connection and serve a cached version of your website to your visitor, without making him wait for the heavy loading times.
Which Image Optimizing CDN is Free?
While most of the CDN companies are paid, but ridiculously cheap, a totally free one is Cloudflare.
Cloudflare is offered by every hosting and keeps all of your image and website data safe.
Not only they serve cached version of your website, but also offers the function to display your website when it goes offline.
Another great feature is offering optimization with railgun, which is also for free users.
Railgun speeds up your website’s loading times by using a secured and faster connection, delivering all of your content at once.
If you are scared of being DDoS attacked Cloudflare Under Attack mode can save your website and not get you kicked by your hosting provider.
These Cloudflare CDN alternatives do not charge you monthly flat. You pay as much as you spend, so there is no need for you to worry for overpaying.
Having each image optimized on your website will save you big headaches and loss of ranking.
In fact you will receive a boost in ranking if your website is well optimized.
Google has announced one of its ranking factors, which is website speed along with good, relevant title and most important in 2021 is the core web vitals.
If you are unsure how your website is performing you can always pay a visit to Page Speed Insights and analyse your website’s score.
Checking both mobile and desktop score is important and fixing critical parts will get you the high spot in rankings.