#Optimize images on website code

WeвЂ™ll then share three easy ways to fine-tune your website images for SEO. In this post, weвЂ™ll explore the role that visuals play in your rankings. That means they present a huge opportunity to optimize your site forВ search engines. However, images typically make up around 17% of a webpageвЂ™s weight. We donвЂ™t claim to hold all the secrets to search engine optimization (SEO) success.

However, if you donвЂ™t optimize your graphics forВ search engines, you may hurt your rankings. My personal preference is to use the Image Optimizer extension for Visual Studio to optimize the known images and combine that with the Azure.ImageOptimizer NuGet package to handle any dynamically added images at runtime.ДЇor more information about image optimization techniques check out Addy OsmaniвЂ™s very comprehensive eBook Essential Image Optimization.A striking image can stop website visitors in their tracks and drive conversions. The important part is that you optimize them. There are many more options for image optimizations that I didnвЂ™t cover, but it doesnвЂ™t really matter how you chose to optimize the images. Spoiler alert вЂ“ it is an Azure Webjob running next to your web application. To understand how the Azure Image Optimizer works, check out the documentation on GitHub. This is the only solution that optimize images dynamically added at runtime such as a user uploaded profile pictures. If you donвЂ™t already have one you can get started for free. To try out the Azure Image Optimizer youвЂ™ll need an Azure subscription. It uses the same algorithms as the Image Optimizer extension for Visual Studio.

#Optimize images on website code

Installing the Azure.ImageOptimizer NuGet package into any ASP.NET application will automatically optimize images once the app is deployed to Azure App Services with zero code changes to the web application.

Remarkably simple to use вЂ“ no configuration.

The Image Optimizer extension for Visual Studio is one of the most popular extensions due to its simplicity of use and strong optimization algorithms.

DoesnвЂ™t optimize dynamically added images.

Increases the build time sometimes by a lot.

Supports both lossy and lossless optimization.

Uses industry standard optimization algorithms.

When configured it will automatically optimize the images as part of your build. If you are already using Gulp, then using the gulp-imagemin package is a good option. So, letвЂ™s look at a couple of options that are simple to use.ДЄll these options use great optimization algorithms that are capable of reducing the file size of images by up to 75% without any noticeable quality loss. To optimize images is always better for the user and therefore for you too, but itвЂ™s something that is easy to forget to do and a bit cumbersome.

Less data needed to load your page on mobile devices (mobile data can be expensive).

Faster websites have higher conversion rates.

Less bandwidth needed = cheaper hosting.

This is important for various reasons, including: If we can reduce the file size of the images then we can significantly reduce the weight of the website. One of the steps to achieve that is to make sure the images we use are as optimized as possible. We all want our web applications to load as fast as possible to give the best possible experience to the users.