Visual content on a website is what catches a visitor’s attention at first glance. Done the right way, graphic design can be the difference between making and breaking your website. The pivotal object of any visual content is an image. Even though picking a nice image plays an important role, there is much more to it than it meets the eye.

In this article, we will present all you need to know about image optimization for SEO. This quick read will not take more than 10 minutes out of your day. However, in return, you will gain access to important information that will help you properly structure your website and solve problems you didn’t even know you had.

Why does image optimization for SEO play an important role in building a website?

The way to make a successful website is to help it stand out in the endless sea of almost 2 billion websites on the internet. That is easier said than done. If we take into consideration that all of the visual ideas have been heavily used and exploited, coming up with fresh ideas to tune-up your website seems to be an impossible task.

With that in mind, it is important to focus on the technical side. Invest your time, money, and effort into making the SEO boost your website. It is a hard truth that, even if you have a more beautiful site, someone who has better SEO features will get more visitors than you.

Understanding the importance of image optimization for SEO is crucial.

To help you with that, we will cover:

• the type and format of the image
• resizing images and aspect ratio
• image compression
• best practices for naming images and writing alt attributes
• pitfalls to avoid

1. Image type

There are two main image types to choose from – vector images and raster images.

Vector images are created with lines, polygons, and points. They are perfect for logos, flat images, shapes, or icons. Their best feature is that they work perfectly on high definition devices because there is no pixelation.

Raster images give more depth and emotion to the viewer since they are made out of pixelated colored grids. While they help make sure your site is visually appealing, the downside is that the loading speed might be heavily affected. This all depends on whether you are using raster images properly or not. The more pixels the image has, the bigger the size of it. As a result, your pages will load slower.

Vector images are the best choice if you don’t have the need for highly detailed photos on your website.

To give you a quick example, a 100×100 image that contains 10,000 pixels will be the size of 39 kb, while a 500×500 image with 250,000 pixels will have a size of 977 kb. The more bytes the picture has, the more memory your computer uses to deliver pixels.

Ideally, you should use a mix of vector and raster images, proportional to the needs of your website. The difference between using vector vs raster images should not be more than 15%-20% in favor of raster images.

2. Image format

The format of the image depends on the type of image.

If you are using vector images, SVG should be your only option. SVG provides high quality that can be scaled to any size you need.

For raster images, you can pick between PNG, JPG, and GIF.

As a rule of thumb, you should use PNG only when you want to display an image in all of its beauty. It takes up the most space, but there is no loss of quality.

Every object has a preferable format of use, so carefully pick what the best option is for your website.

On the other hand, the JPG format is the most popular one since it produces good quality without the size being too large. However, there is a permanent loss of small details when changing the size of the image.

GIF is your go-to option for animated images. It supports 256 colors on the 24-bit RGB color scale. Although, only about 25% of websites today use a GIF format.

3. Resizing images and the aspect ratio

When resizing images, always make sure to follow the aspect ratio. Otherwise, your image will look distorted and messy.

Picking the best size mostly depends on the type of device and platform that visitors use.

For social media profile photos and mobile devices, the best aspect ratio is 1:1, with an image size of 1080×1080 pixels.

For any print and photography designs, the aspect ratio of 3:2 and the image size of 1080 x 720 pixels is preferable.

TVs, digital cameras, and monitors best work with the image size of 1024 x 768 pixels, and the aspect ratio of 4:3.

Finally, for widescreen TVs and monitors, and all sorts of presentations, stick with either 1920 x 1080 or 1280 x 720 pixels in the aspect ratio of 16:9.

Caption: The image and the size of display changes over time, have that in mind when picking the aspect ratio and the size of your images.

The image and the size of display changes over time, have that in mind when picking the aspect ratio and the size of your images.

If you cannot use all the sizes, focus on the ratio of 1:1 or 4:3, as they work well with all devices and platforms. Keep in mind that the majority of users use mobile phones, so keep your images optimized for that device.

4. Image compression

There are so many design ideas that badly affect the loading speed of a website, and one of the major culprits is image size.

To compress an image, you can use plenty of free tools online. You should aim at compressing your images to below 70 kb. Depending on the size of the image, your second option would be to keep the compression below 100 kb.

5. How to properly name images and write alt attributes

Failing to properly name your images will have a serious effect on your SEO. The best practice is to name the image exactly what it shows. For example, if you have an image of a child throwing rocks in a pond, you should name it something like this:

a-child-throwing-rocks-in-a-pond

The same rule applies to the alt attribute. This attribute tells Google what’s on the image, and it is used in case the image cannot be displayed. Google uses both the name of the image and the alt attribute when ranking your website.

6. Pitfalls to avoid when importing images on your website

First of all, we must mention how important it is to beware of copyright when importing images. You could get sued for using images without the approval of the owner. As a result, you will pay a hefty fine, and that will affect the rating of your website.

Furthermore, never prioritize the image esthetics over the loading speed. We are not saying that having ugly images that load fast is a good idea, but be wary of this. Push for speed, supported with quality, not the other way around.

Beware of “traps” when building a website, there are so many pitfalls you should try to avoid.

A final piece of advice: do not import large images and fix the size by resizing. The image might be displayed in a smaller size, but the actual size of the image does not change.

Key takeaways for image optimization for SEO

We are at the end of our journey into image optimization for SEO. If there is one thing we would like for you to take out of this experience, it is to focus on making your website operational. The SEO, although invisible, plays a more crucial role than the visual side of the website. The better the SEO, the higher the rating. With that in mind, remember these 3 golden rules important for any website – optimize, optimize, and optimize!