how to image optimize for better search results

How to Image Optimize for Website – Better Search Results

If you are wondering how to image optimize for website and get better search results, then you are aware of your websites poor optimization and bad speed due to images.

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.

How to image optimize for 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.

Image optimize for website - speed

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.

reducing image size

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.

How to Image Optimize for Website - Better Search Results - enabling gzip compression

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 on;
gzip_types text/plain text/css text/javascript image/svg+xml image/x-icon application/javascript application/x-javascript;
gzip_min_length 1000;
gzip_vary on;
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 :

  # Compress HTML, CSS, JavaScript, Text, XML and fonts
  AddOutputFilterByType DEFLATE application/javascript
  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/x-javascript
  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/javascript
  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[678] 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_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file \.(html?|txt|css|js|php|pl)$
mod_gzip_item_include mime ^application/x-javascript.*
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

How to Image Optimize for Website - smush

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.

ShortPixel

How to Image Optimize for Website - Better Search Results - shortpixel

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 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.

Similar Cloudflare CDN providers are: Bunny CDNAWS (Amazon Web Services) and Akamai.

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.

Conclusion

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.

Leave a Reply

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