If you run a blog, online store, or business website, image optimization is an art that you must master.
Image optimization is an essential part of building a successful website, helping attract customers, and reducing load time. Image optimization is all about delivering the right size for the right device and reducing its file size as much as possible without degrading the quality. It can not only improve your customer experience, but it can help your SEO as well.
Here’s how you can optimize your images for the web.
4 Simple Tips for Optimizing Images
1. Deliver the Right Image for the Correct Screen Size.
The responsive image spec is fantastic and covers a lot of use cases, but in most cases, you will need to understand that you should serve different images for different viewports widths. This is resolution switching and can be accomplished via srcset and sizes.
Most of the content management systems already implemented this feature, including WordPress. If you do not have it enabled, contact your developer and see what options are available to you.
2. Reduce the File Size of Your Images
When a customer arrives on your website, it will take a while to load everything, depending on your website. The larger the files you deliver, the longer it will take to load the page.
- Nearly 50% of consumers won’t even wait 3 seconds for an e-commerce site to load. …and, globally, the average page load time is actually increasing.
- Amazon found that if their pages were to slow down by just one second, they would lose $1.6 billion a year.
- Google uses page load time as a ranking factor in its algorithm.
So, what can you do?
Reduce the image size is to actually resize the image. Instead of delivering a 5000px x 3000px consider delivering 750px x 450px. You can use tools like PhotoShop or Shopify’s free online image resizer.
Reduce the quality of the image by compressing it. We all want high-quality images on our website, but we can always reduce the quality just enough where we hit a delicate balance between a blurry and a crisp image. Many tools can help you with this if you are on a mac, I have a great experience with ImageOptim. If you are looking for an online solution, TinyPNG is a great alternative.
3. Name Your Images Descriptively and Use Simple Language
It is easy to download images and upload them to your website and keep the same file name. When it comes to image SEO, it’s essential to use relevant keywords to help your images rank and help your customers with disabilities understand what the image is about.
Take this image, for example:
You could use the same name of the image that the image provider assigned it (alexander-boon-ESRbqlyot24-unsplash.jpg) or rename it with a description of the image 2012-Mclaren-MPr-12c-orange.jpg
This description helps your customer who uses assistive technology, and it can also help you rank your image higher.
Naming the images correctly will also help your content authors create a better alt attribute. Instead of guessing the year or the car model in our example, an author can get that from the image name.
4. Choose the Right File Type
There are three common file types that are used to post images on the web: JPEG, PNG, and GIF.
JPEG is the de facto standard image of the internet. JPEG images can be compressed considerably, which results in smaller images size. JPEG images have only one downside; they don’t support transparency.
If you need transparency in your use case, we should take a look at PNG or GIF format.
GIF images are excellent if you are looking for a lower quality image and are usually used in simplistic images such as icons, images, or sometimes decorative images.
I’m sure you are aware, GIFs also support animations. If you are looking for a small animation to add to your website, GIF’s will not disappoint you.
If you are looking for a higher quality of an image with transparency, PNG is the way to go. When you export your image from your favorite tool, you should always switch between PNG-8, a lower quality PNG, and PNG-24, a higher quality. In some cases, using PNG-8 will reduce the image size considerably without losing its quality.
Keep Your Images Beautiful and Your Website Functional
The entire point of optimizing your images is to increase customer retention. Now that we’ve learned ways to optimize them let’s get started.