Image SEO
Hello everyone, I am Vikram from viksolve.com and this is our new start on digital marketing to make detailed and technical explanation articles. Amit Tiwari uploaded a video yesterday and late at night he had some thoughts and also talked about the new format of videos. So what is this new format? Usually in our videos, we pick a topic of digital marketing and on that, we discover some new processes, updates, tutorials, and some new things. But that topic is not covered in detail. Practical problems can come, but how to solve them, small details that matter a lot in day-to-day activities are left out. So we are changing this way. From now on, in every month’s first article, we will start a topic and throughout the month, we will learn different things related to that topic. We will see steps, tools, processes.
Throughout the month, there will be only one topic. 12 articles, 14 articles, and 15 articles We will cover as many topics as possible and finish that topic. There will be no doubt, no problem. With this, you will get complete command on that topic, and at the end of the month, I can give you some assignments related to that topic which you will complete and check your knowledge and all this will be here on YouTube for free. So throughout the month, we will focus on image SEO. There will be some 12-14 articles in which image optimization techniques will be seen, dimension, size, optimization, etc. WebP images and other different low-size formats will be understood. Their conversion and serving methods will be seen. Lazy loading, CSS, images, hotlinking, and caching all will be understood in different articles. Some scripts and tools for image optimization will also be seen. We will understand the image CDN.
60% weight of an average web page is of its images. So if you understand image SEO, then 60% speed you will be able to cover the landing pages of your website on your own. And this will help you in SEO and also in PPC. So today is the first article of the image SEO series and in today’s articles, we will talk about the compression of the resolution of the ideal size of the image. And this should be the first step of your image SEO strategy. Because if you understand it like this, you have to train two people to race. You are a trainer, you have to train two people. One is a healthy person of 60-70 kg and the other is a person of 200 kg. Who will be easier to train? Who has a higher chance of winning? I guess you already know the answer. Similarly, if the images you are uploading are already fit, light, and of good size, then you will get better results from the rest of the optimization. Your website will be very fast. The size of the image depends on three things.
When I say size again and again, then you understand the size of a megabyte or kilobyte. There is a little confusion about images. So the size of the image in megabytes or kilobytes depends on three things. By the way, you should not upload images on your website in a megabyte. I am talking in generic. Number one, what is the resolution of the image? That is its length and width. Resolution means the length and width of any image. This length and width are measured in pixels. It happens that if a person is tall, even if he is thin, his weight increases because his height increases. Resolution means its length and width affect the size of the image in megabytes or kilobytes the most.
Now, it is important to keep in mind that there should be a pattern for selecting the resolution of the image. You should use as big an image as necessary. If you use a very small image, then the image will be blurred. If you use a very large image, then you will have to watch optimization articles. Let’s say, for example, you have designed a 2,000 by 2,000 pixel long and wide logo. Now, if you upload it exactly on your website, then it is wrong. Because where will a 2,000-pixel logo be shown on the website? The website already shows the logo in a very small size. So, why not make it smaller in size and upload it? In a while, I will explain the size of the image. Number two is the detail of the image.
The more the color and pattern, the more the size will increase. After all, an image is a kind of file. If there is more data in that file, that is, more colors, more details, and more patterns, then its size will also increase. Now, this does not mean that if you are taking an image, or a photo for your business, and then start putting it in black and white, its size will decrease. You can remember that when you make an infographic, you can pay attention to controlling the color selection so that the size of the image does not increase unnecessarily.
Number three, the format of the image greatly impacts its size. What is its extension? .jpg, .png or .webp? There are many different extensions. These are just some examples. Images come in different formats and all formats have their own advantages and disadvantages. That is why different formats have been made. But you cannot get a transparent background in .png. In .png, you get a transparent background, but its size increases a lot. And in .webp, both of these happen. That is, the size is also reduced, and the background can also be transparent, but not all browsers support this format, so you cannot use it everywhere. So you will have to decide for yourself which format you want to use and in which format you want to save the images. We will talk about the format of images and their conversion in the next articles.
In the coming articles, we will talk about .webp in detail. But these are the three main reasons that affect the size of an image, its MB or kilobyte size. So now let’s see what should be the ideal resolution of the image used in different places on a website. If there is a favicon, which is visible at the top of the website, its size should be 16×16 pixels. You have to save it as 16×16 pixels on your website. Then there is the logo, you can take the size of 250×100 pixels. 250 pixels is its width and 100 pixels is its height, that is, its length.
Now, your website may have a logo in a smaller size, but a bigger logo than 250 pixels by 100 pixels is probably used by very few websites. If more than this size of the logo is being used on your website, then you can use your logo in a larger size and save it, that is, save your logo in the size of 250×100 pixels and then upload it on your website. Then there are background images. Background images are 1920×1080 pixels, that is, 1920×1080 pixels. Full HD size images can be saved. Background images mostly cover the entire viewport. The full HD size looks best in this format. Images are being used in the background.
The larger the element, the better. Then there are Twitter Oji images. Twitter Oji images are 1024×512 pixels, that is, its aspect ratio, the ratio between its width and length is 2×1. Similarly, Facebook Oji images should have a size of 1200×630 pixels. This is the size that will be used. Then there are slider images. Slider images will always be kept in the size of 1000×500 pixels. It will look good in the slider and the size will not be too much. You can save an image of 1000×500 pixels on your website and use it in the slider. Make a bigger slider than this. Already everyone knows that I hate sliders, I don’t like them. Unless a client is very stubborn and I can’t make him understand, then we use sliders. But if you want to use it, you should always use an image in your sliders.
Then there is the number of sidebar images. In the sidebar, you will put images with a height of 400 pixels. You can decide how much width you want to keep. But the height will be above 400 pixels. It will look a little weird. Then comes the number of featured images. Featured images are a little tricky. If you want to take your website to Google Discover, then the size of your featured images should be above 1200 pixels. The width should be more than 1200 pixels. But if you don’t care about Google Discover at all, then you have to keep your featured images 250×250 pixels. It’s a small size.
You don’t need more than this. Whenever there is a blog part on your website, your featured images will be 250×250 pixels. It will work. There will be no blur. Then comes the number of full-width blog posts. The size of full-width blog posts should be 780 pixels. You can decide the height. This table is in front of you. You can see this table as a reference point and crop the images on your website. This is a hint. If your website is well-designed and your client has customized the images, then you can change it. But in most of the websites, this size guide will be accurate for you. If you have to scale up your image by 10-12%, then it will work. We have adjusted the size of the image. You can also select the format. The web is technically the best format in which you get a transparent background.
The size is also reduced. You can reduce the size by up to 1 third in comparison with JPEG. It saves a lot of data. It boosts the speed. because it doesn’t support replication yet. That’s why we can save the images in JPG. And when you upload it on your website, you can use a plugin or service to dynamically set it. Where the browser supports WebP, WebP will be displayed. Where WebP doesn’t support it, JPG will be used in the fallback option or saved in the PNG fallback option. If there is such an image, for example, a logo, the background should not be visible behind the logo. In most of the websites, you need a transparent background image. This means you have to save the image in PNG format. Otherwise, you can save the images in JPG format everywhere.
When saving a file in JPG, if you set your images between 1 to 100 and set the quality between 45 to 50%, then you will get the best size and the best quality. There will not be more than the necessary size and the quality will be enough. You won’t know the difference between 100% and 45% or 50%. There won’t be any noticeable difference. Now, if you are thinking about how to set this 45% or 50% meter, you can set it in the application. When you save the image in Photoshop, you get the option to save it for the web. But if you don’t use Photoshop, you can use a website called Photopea.
There you can open your image like this. It is an online tool. You don’t have to download or install anything. It is on your screen. Go to Photopea and open your image. After this, you just have to click on Save As. While saving, you have to set the quality between 45% and 50%. You can set it as you wish. After this, save the image. Your JPG image will be saved at 50% less than the original JPG image. More than 50% will be saved. You didn’t make any sacrifice. The image was downloaded before converting to WebP. Now, when you upload this compressed image and base your WebP on it, the size of your WebP will be reduced. And your image will look in better quality and your website will not suffer. There will be no lag on the website. So these were some things. Image format and their size guide. Using this guide, you can upload your images in a better size.
In the next articles, we will see the caching of images and image CDN. Image CDN can also show images through CDN on your website. Image caching can also show images of your website in a better format without putting a lot of load on your server. But which one to use out of the two? What is the difference between the two? Which method is better? And in both these methods, which plugin or CDN service should you use? We will talk about this in the next article, which will come to you in a few days. It won’t take more than 2 or 3 days. So see you in the next article. And we will talk about image caching and image CDN. After this, in the next article, we will talk about preloading, lazy loading, and background images.
How does preloading work? How does lazy loading work? And how to lazy load or preload background images? We will talk about all this in the next article. So this was the schedule for the next two articles. You got to know the topic. Until then, read this article. Study it. Change your website accordingly. And also share this article. We will share it with all the community members. And we will also show our screenshot to the group. Those who want to be a part of the group, and those who want to grow this community, can share this article. And after that, email us at the community at viksolve.com for your screenshot. And we will add it to the WhatsApp group. So practice it. And help the community move forward. Thank you so much for reading this article. My name is Vikram for viksolve.com And I will see you next time. Take care.
