Gzip Compression is used to minimize the load time by compressing data before delivering it to the user. It can be used to compress images, JS, HTML, Texts, CSS, fonts etc.
Using Gzip Compression is useful where bandwidth uses matters. Almost all web servers are friendly with Gzip Compression.
It is worth knowing that most Images, videos, and pdf are already compressed and you need not to do it again.
You may use online image compression tools for reducing image size before uploading it to the server without losing image quality.
These are the best online available tools for doing so-
If you use photoshop for editing/creating images you should save images in 'save for web' mode. This will reduce the image size.
How do we use Gzip Compression?
Generally, Gzip Compression is used in .htaccess file but if you have CPanel provided by your Hosting Service Provider then you need to find 'website optimization icon' and select proper MIME type to compress them.
Let's focus on .htacces syntax first which is used for compression.
Mod_deflate: is responsible for compressing data before sending it to the user.
How to setup Gzip Compression?
Open your .htacces file in any text editor and put this code.
# BEGIN GZIP
mod_gzip_item_include file \.(html?|xml|txt|css|js)$
mod_gzip_item_include handler ^cgi-script$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
# END GZIP
Save your .htacces and you are done.!
As you notice the code, we have excluded the images from compression. Since Fonts do not have MIME Type so we need to create,
to do so,
<ifmodule mod_mime.c> #Checks if your server supports Addtype
Addtype font/opentype .otf
Addtype font/eot .eot
Addtype font/truetype .ttf
AddOutputFilterByType DEFLATE font/opentype font/truetype font/eot
So, by compressing our data we can reduce the file size by 70% (almost.)
You can check GZIP Compression Here :
Do let us know how much GZIP Compression helped you.