Image compression or resize is the method of reducing the image file size as much as possible that aims to keep the quality of the image still almost the same in order to improve the website page load or decrease loading times.
So in this article, we’re going to cover the best practices of your image compression and resizing – that make your website load much faster than ever.
Why Is It Matter?
Image compress and resize also know as “Image optimization” is the goal to improve page loading speed that keeps visitors stay on a website – the site that is loading from 1 to 5 seconds user more likely to leave.
This means the site speed really impacts our customers and sales, Back in 2006 Amazon found that every 100ms page load delay they will lose 1% of revenue. A 1% loss of annual revenue back in 2006 would be around $107 million that is the big money.
Anyway, we’re not that big of the company but I just want to make sure with you that page speed really impacts your site sales and revenues.
On other hand, search engines love the fast loading site that gives a good user experience for their users, so if we want our website to rank higher on SERPs…
…Or want the free organic traffic from a search engine then we need to optimize our site for a better speed and UX because they use this factor as the ranking algorithm to rank a website.
Best Practices for Image Compression & Resize
Now you had known the importance of page speed and why is it matter for our business website – Next we’ll learn how to do image compression and resize with the best practices to boost our page load speed.
Let’s getting started!
1 Understand the types of Image format
There are several types of image format we’re using on our website nowadays those included:
- JPG: This format we actually use the most on our website to add a photos and images.
- PNG: Use for the transparent background image such as a logos, background images, or screenshots.
- GIFs: It uses for the aminate image, it can use for many reasons and purpose you may want to add the animate image on your site.
- SVG: Use for adding icons for a website, It is the most popular format beyond font awesome when it comes to adding custom icons.
Pro Tips:
WebP: is an image format employing both lossy and lossless compression in order to improve the page load speed. WebP design to create files smaller and keep the quality the same.
Google was announced the WebP format back in September, 2010 to webmaster to consider using this image format on their site.
2 Know Your Image Size & Compression Target
First we need to have the image to getting started with image compression and resize, so you need to pick high-quality image for example the image that has more that 3MB or 2500 pixels by 4000 pixels.
- Use your own photos or from stock images.
- To find out your image size go and right click on your image then click the “Get info” for Mac or “Property” for Windows then you will the image size listed..
Image Compression guidelines:
- Hero (larger top image) or background images must be your biggest file sizes: less than 1MB
- Medium images: ~ 300Kb
- Small images: < 300Kb
- Other than that 60% and 80% compression is a good general guideline
Image Sizing guidelines:
- Use the pixels instead of file size
- Pixels are a unit for measurement image size. For example, my feature image 750px by 1360px
- Consider how big your image will appear on the webpage, and resize accordingly.
3 How to Image Compression & Resize
There are three ways we can do the image compression and resizing you can use to compress and resize your image for your website online on offline.
Using Editing Software
There are lots of photo editing software on the market that helps you edit your image for your demand those also include the image compression and resize features that we’re focusing on.
You can use photo editing software like Adobe Photoshop, GIMP, Affinity Photo, and On1Photo. All of this software will allow you to do image compression and resizing.
The Advantage & Disadvantage of Using Editing Software⭐
- Pros
- Let’s you control everything on your local computer and do it offline.
- You can do both things (compressing & resizing) at once.
- Good opportunity if you always want to learn something new.
- Cons
- It take time consuming to learn how to use.
- Most of these of software are charge (some free).
Use Web Tools
There are lots of web tools that allow you to edit your image, compress, resize, and covert online but their are advantage and disadvantage of using the web tools for editing your image for your website you’ll find in the below section.
The Advantage & Disadvantage of Using Web Tools
- Pros
- Quick and Easier to use than photo editing software.
- You’ll to compress more than one image in 1 time (depending the web tool you’re using).
- Most of them are free to use.
- Cons
- You need to have internet connection.
- Resizing features require pro version.
Use Plugin (WordPress)
If you’re using WordPress, there’re tons of image optimization WordPress plugins you can use to compress and resize the image that helps you speed up your website loading.
Here are the most popular image compression and optimization plugins for WordPress sites you can use to optimize your image and improve your website performance:
The Advantage & Disadvantage of using Plugin
- Pros
- Everything was done on your WordPress site.
- You can do the compress more than one image with a single click.
- Some plugins included compression and resizing features.
- Well optimized (lossy, losses, and glossy).
- Some of them are included the WebP format conversion feature.
- Cons
- Can slow down your server make sure find the plugin that uses its own servers to compress your images.
Pro Tips:
The best practices of using the image optimization plugin is to find the plugin that give you WebP conversion features because it will boost your site performance through WebP image optimization.
How to Optimize Your Image for SEO
During we doing content creation almost all time we add the images to our content which make it look more professional in order to get visitors engagement.
Image can help your website more than just engaging with your reader and make your content look more professional but it also can helps your site rank higher on search engines if you optimize them well and make it SEO friendly for search engines.
So in this section we’ll share with the image optimization techniques your can use to improve your page rank on search engine.
Let’s get started!
1 Image Title Optimization for SEO
The title of image is really important for your image SEO then you need to optimize it really well to make it more likely for search engine to rank that image.
Let’s imagine we had a “cat image” then you properly title your image as “cat” or “cute cat” by optimizing your image title search engine can understand what your image all about and it easy show up when people searching for a “cat” the result page.
2 Image Alt Text Optimization
Optimize your image alternative text (Alt text) can give more meaning to your image apart from your image title for search engines to understand more details about your image.
So back to our “cat image” (the above example), We just name it a “cat” right then you give your image more meaningful for search engines then you need to optimize your image alt text.
As the image about cat then on my alternative text, I could add something that makes it specific for that cat image.
Here is what I could add to my image alt text, I should say “funny cat” or “my best cat”. which tells the search engines that this cat in the image is the funny cat or it is the best cat.
Wrapping Up
Now you had know everything about the best practices of image compression, resizing, optimization, and the important of it – that will improve your website performance and user experience.
There are three different ways you can use to compress and resizing your image for your website that will boost the speed of a page loading that you known and those are the options for you to use for compress and resize your image.
We love to hear from our readers to improve our content quality if you have any question or suggest about this article or let us know which one of the methods work best for your image compression and resize then feel to leave a comment below and we’ll be response ASAP.
