Why should you optimize images for the web?
As all you know that optimized website makes it easy for search engines to index their content correctly. Optimized images reduce the loading time of website. Sometime website load at fast speed but non-optimized images takes long time to display. If images are not optimized, a crawler can not read or interpret any image.
There are some techniques of image optimization that you can use on your website. Let us discuss one by one:
There are some techniques of image optimization that you can use on your website. Let us discuss one by one:
Yes, you can see what is shown in the picture. And yes, we still need a title that reflects exactly that. This is primarily not a plus point on your SEO, but an advantage for your visitor. If the mouse pointer moves over the image, this description becomes visible.
By the way, you can still include keywords in this description, which are important for your SEO.
2. Give an alt attribute tag to your image
The alt attribute is an absolutely indispensable service to your followers with visual impairment. Browsers read this description so that it is clear what is on the picture.
So if your website works as barrier-free, you do not get around this point. If this is not absolutely necessary, be a nice person and make it easy not to discriminate against anyone. It helps the visitor to know what the picture is about, if the image is not loaded.
3. Put a meaningful caption
Since images should support your article, it is good if your readers understand it. For most images this should not be a problem. For example, if an article is used to grind doors, the reference to the image of a ground door can be easily made. It is different when a person is presented with pictures that are not immediately recognizable to everyone. It is also possible to present a complex situation requiring explanation.
Since images should support your article, it is good if your readers understand it. For most images this should not be a problem. For example, if an article is used to grind doors, the reference to the image of a ground door can be easily made. It is different when a person is presented with pictures that are not immediately recognizable to everyone. It is also possible to present a complex situation requiring explanation.
A caption explaining what is happening in the picture helps here. And since you do not know what is easy for the one and for the other difficult to understand, you should basically put a caption.
With most CMS it is quite easy to do that. Here in the example: WordPress. You can easily add title, caption, and alt attribute:
The image file itself should have a file name that contains keywords that are relevant to your article. So if your image is called 20150510-DSC1316.jpg, change the name to something that represents the content. Always think about what keywords you would use to find the image. Why? If search queries and file names match, the chance is higher that your image appears in the Google Image Search.
5. Pay attention to the file size
This point is very important. If you use image files, which are very large, pass two things:
First, loading the page on which the image is located will be much slower than with a smaller file. Visitors to your site will often not have the patience to wait. It has a negative impact on your technical SEO.
5. Pay attention to the file size
This point is very important. If you use image files, which are very large, pass two things:
First, loading the page on which the image is located will be much slower than with a smaller file. Visitors to your site will often not have the patience to wait. It has a negative impact on your technical SEO.
Measure your image by size not by the dimensions of the image, but the file size, measured in kilobytes. The dimensions of an image may not exceed the maximum size in which they are used on the website. Thus, if an image is displayed on the desktop version of a site with 1,000 x 1,000 pixels, but with 320 x 320 pixels on a smartphone, it must be in the maximum size of 1,000 x 1,000 pixels. If it is larger, it wastes storage space and extends the charging time. If it is smaller, the maximum display results in unsightly quality losses.
This method always has a hook. Each image is loaded in full size, even with a smaller image. Responsive design, or not. With tools like imgix you can take help. This will allow your images to be hosted on a server and used as needed by the View port size. This saves space and makes your website faster.
6. Use the correct file format
There are only a small number of relevant formats for displaying images on websites: .gif, .jpg and .png. And so you use it optimally:
6. Use the correct file format
There are only a small number of relevant formats for displaying images on websites: .gif, .jpg and .png. And so you use it optimally:
- .jpg for background graphics and photos
- .png or .gif for layout graphics
7. Reduce the quality
This sounds antithetical, but helps. Of course, it is not made so that it strikes. I'm talking about a reduction to 80%. This is standard for .jpg files in any reasonable image processing tool and is usually queried when saving. This saves space and ensures shorter loading times. A fact, which Google also appreciates.
This sounds antithetical, but helps. Of course, it is not made so that it strikes. I'm talking about a reduction to 80%. This is standard for .jpg files in any reasonable image processing tool and is usually queried when saving. This saves space and ensures shorter loading times. A fact, which Google also appreciates.
Tools that do this work for you are e.g. PNGGauntlet.
8. EXIF and meta tags
Photos are usually provided with additional information like EXIF and meta tags. This information occupies space and does not provide any benefit when used on your site. What to do? Quite simply: away with it. You can use tinypng for this.
9. Use icons as fonts and not as graphics
Icons – used in the right place – contribute to the better usability of a website and to better understand their content. Unfortunately, they are still used as graphics in most cases. These graphics want to be loaded on the one hand and scaled on the other. The latter is not possible without loss of quality. How nice that there are Web fonts. They are vector-veiled so on the one hand require little memory and are, on the other hand, freely scalable.
So whenever you use icons, do it as a web font. It is also possible to use ready-made sets like Font-awesome or Icon-Font generators like Fontello.
10. Use the picture element wisely
The HTML5 picture element is not supported by all browsers. Older versions of Firefox, Chrome and Safari are as problematic as Internet Explorer. It should therefore be carefully considered whether it makes sense. Otherwise, you may block important visitors / customers.
Would you like to use the picture element today, as we do on this website? Then the JavaScript plugin picturefill is your solution to allow older browsers to exchange image files.
My personal opinion:
For photos and graphics, a fire-and-forget mentality is counterproductive. The above example show that there is a lot of potential for optimizations. As with all rules, however, the standards should also quickly pass into flesh and blood. So do not be afraid and fresh to the work!
8. EXIF and meta tags
Photos are usually provided with additional information like EXIF and meta tags. This information occupies space and does not provide any benefit when used on your site. What to do? Quite simply: away with it. You can use tinypng for this.
9. Use icons as fonts and not as graphics
Icons – used in the right place – contribute to the better usability of a website and to better understand their content. Unfortunately, they are still used as graphics in most cases. These graphics want to be loaded on the one hand and scaled on the other. The latter is not possible without loss of quality. How nice that there are Web fonts. They are vector-veiled so on the one hand require little memory and are, on the other hand, freely scalable.
So whenever you use icons, do it as a web font. It is also possible to use ready-made sets like Font-awesome or Icon-Font generators like Fontello.
10. Use the picture element wisely
The HTML5 picture element is not supported by all browsers. Older versions of Firefox, Chrome and Safari are as problematic as Internet Explorer. It should therefore be carefully considered whether it makes sense. Otherwise, you may block important visitors / customers.
Would you like to use the picture element today, as we do on this website? Then the JavaScript plugin picturefill is your solution to allow older browsers to exchange image files.
My personal opinion:
For photos and graphics, a fire-and-forget mentality is counterproductive. The above example show that there is a lot of potential for optimizations. As with all rules, however, the standards should also quickly pass into flesh and blood. So do not be afraid and fresh to the work!
No comments:
Post a Comment