Savvy Tips to Impeccably Optimize Images

A quality website is a website that loads quickly but it is also a pretty website with lots of very good quality images. Woocommerce custom price or woocommerce smart coupons guide us to optimize images for the web which is a thorn in the side of every developer.

The visitor to a website does not like to wait especially with the mobile phone. It is no longer a secret that page loading time plays a very important role in how Google ranks your site (or any other search engine) and when it comes to page loading time, image size and weight play a very important role. Here are the tips on how to optimize images for the web and some other techniques to get the most out of them.

 

Use the right image format

The 3 most common file formats for images on the web are.jpg,.png and.gif. Here is a brief summary of each image format and when you should use it.

Ø  gif: a format that can be animated which makes it the first choice for smileys or short videos but its palette of only 256 colors limits its quality. Use this format for very small images or an animated image (which is no longer fashionable).

 

Ø  jpg: or.jpeg is a format that uses destructive compression, which means that the weight of the image is reduced by removing data that is not visible to the naked eye. Use this format to display photos, illustration images, etc.

 

Ø  png: This is the best compromise of image format because it allows lossless compression. The images are a little heavier than a.jpg but remain faithful which makes them an ideal format. Use this format if the image contains text in it, or if you need a transparent background.

 

 

Use the right format and the “Save for the Web” tool in Photoshop

We have just understood and seen the formats that can be used for images, so we must now apply and choose the right format and size to optimize the size of the image to be used on our website.

If you often develop websites you need to have image processing software such as Photoshop or any other editor.

Photoshop has a magical function: “Save for the Web”. This feature allows Photoshop to provide users with presets to save an image so that it can be optimized and displayed on a website. Feel free to use this feature to save your images (at the appropriate size of course).

 

Use thumbnails instead of Html resizing

HTML and CSS offer you the possibility to resize images by specifying the desired width and height. Although this is a useful feature, the image is not really resized; it is only displayed at a smaller size.

Do you want to display an image with a width of 500 px? So there is no need to have an image with a width of 2000 pixels and to use HTML and CSS to resize it.

If you use WordPress, the download tool automatically resizes any downloaded image to different sizes so that you can always choose the appropriate size.

Simple software like “Paint” that is available on each Windows PC allows you to resize the image to the appropriate size for a minimal display. But be careful, “Paint” can considerably reduce the quality of the image and especially does not allow png format images to keep a transparent background.

 

Use CSS effects instead of images

Even if the time has passed when you display a lot of animated images and sparkling text, you may still need to display text with gradient color or any other fantasy. No need to release your favorite image management software but use text and CSS instead.

Consider this as a rule: you should avoid using images as much as possible, so if you can do a few things with CSS, do it without using images.

 

Give your images a good name

We always stay in the same subject: optimizing images, but this is not about having a good quality/weight ratio of an image, but optimizing the image so that it brings us back traffic to our site. The optimization of our images will automatically optimize our SEO.

It is important to use keywords to help Google reference your web page. The idea is to use keywords in the image title to describe the image and for the search engine robot to understand what it is about and to display your image in the search list, among other things.

Search engines not only analyze the text on your web page, but they also search for keywords in your image file names.

 

Optimize the alt tag (description) of the image

Let’s always stay within the framework of image optimization to have more visitors on your site.

The “alt” tag is a textual alternative to images when a browser cannot display them correctly (even if this happens less and less). And even if the image is displayed, if you move the mouse pointer over the image and stay a few seconds, you can see the text of the “alt” case created for this image.

Adding an appropriate alt tag to your website images can help Google (still) understand your images and display them when searching. In fact, using “alt” tags is probably the best way for your e-commerce products to appear in Google’s image search results.

 

Use web fonts instead of an image with text

Today there are web fonts that can reproduce more or less everything you wanted to do before with Photoshop or any other image processing software.

 

Use an image compression plugin (WordPress users)

If you use WordPress (25% of sites worldwide), you can save a lot of time by simply installing a plugin that optimizes your images.

WPSmush is the best-known plugin of all. More than 700,000 active installations and frequent updates to get the most out of the expansion.

Using this extension is very simple: install the plugin, activate it and then use your images normally. When adding an image, WP Smush will take this image and optimize its size without compromising on quality. Images can be reduced by up to 80%.

 

Use online image compression

There are many sites that allow you to reduce the size of an image online by compressing it. The advantage of this tip is that you can quickly and simply optimize your image without having to install software on your PC or add a plugin to the various plugins on your site.

The disadvantage (it has to be) is that online compression reduces image quality, especially if the image is large.

Use a site that compresses your image and has a compression level bar that allows you to choose the compression level. 20% is normally a good compression ratio that combines size and quality.

 

Use caching to display your images faster

Although it is not really an image optimization technique in itself, caching your images in a browser is a good practice and helps us achieve our goal: to improve the loading speed of your site.