Responsive | Dynamic | Web Friendly Images, Conversion, and Generation with C#

As we all know that images are a necessary evil of modern websites, can’t imagine any modern website without images, so we’ll know how to work with images as efficiently as possible with c#

Images are also the heaviest(size-wise) element of the website, so choosing the right technique to deal with images is mandatory for any websites.

The Problem

Two main things to keep in mind while building a new website or optimizing an existing one

• Image format
• Image resolution for different devices

Problem 1: Image Format

so assume a scenario where you want an image on a website, you ask a designer to make as per your requirement you receive an image and put that between img tag like this <img src=”your-image.png” /> and voila you have an image on the website, everything is nice and dandy until client/boss comes running at you asking while the website is performing slow or giving a low score on Google PageSpeed Insights and you see google saying something like below

Here Google is asking you to use a newer image format(WebP, Pjpeg) instead of old school PNG or jpeg, and google also mentioned why and if you want to learn more.

Problem 2: Image resolution for different devices

let’s continue discussing the same scenario where you received an image from a designer and put it on a website <img src=”your-image.png” /> and again you see your friend google is trying to tell you something like

Now, this is a bit tricky to understand at first, but let me explain. Assume that the image your designer colleague gave you is of 1800px X 1200px in dimension and if you don’t know how to check the image dimension you can always go to File Explorer > Image Folder > Right Click > Properties > Details Tab (For windows) and see the dimensions.

coming to the real problem, now look at your phone and try to understand when someone opens your website with 1800px X 1200px sizedyour-image.png does your phone really needs that big image, typically your mobile browser will shrink your image and it will try to fit the image in your mobile’s viewport.

but your unnecessarily transported way too much bigger image to a tiny little phone, it’s like ordering an extra-large pizza for a 5 YO kid that was delivered by truck, sounds unnecessary right? it is. and sending a bigger image is too

Solution 1: Image Format

There are plenty of online options available like this. where you can convert your jpeg or png to WebP or Jpeg2000.

but what if you have a website where your end-user or non-tech customer is uploading a picture to your website, you can’t ask them to convert the image and then upload it. your website/web applications are supposed to minimize users' efforts and bring ease to their life not another way around.

I solved this with Asp.net MVC WebAPI 2.1 along with C# and if you’re using .Net Framework or Dotnet Core you can use the same approach

You can check out this awesome NuGet package named Magick.NET by a guy named Dirk Lemstra

And with the few line of c# code that is available on StackOverflow

Convert Any image format to PJpeg using C# | Magick.Net

you can convert your file into modern image formats.

Note On Progressive JPEG’s behavior

When Browser receive Standard Jpeg(old format), it draws image line by line as they’re available, whereas PJpeg shows the low-quality picture as soon as possible and then converts to high res as soon as all the data becomes available to the browser if you want to know more read this.

Solution 2: Image resolution for different devices

Again you can always resize your images to smaller versions with various tools available online and offline, but as a developer, I’m happy if I’m able to do stuff using c# that way I can use it however I want, and hideaway all the complexity and technical mumbo jumbo from end-users.

so again ImageMagick.Net to rescue. you can resize your images to smaller different sizes with few lines of code

Resize the image

MagickImage.Resize has various options and overloads which you can explore and play with to pick the right one for your use-case. but that’s definitely will do the trick

UnPlanned Problem (and solution)😉

We created various versions of images in progressive jpeg but how we’ll send out the smaller image to the mobile user and the larger to the desktop user?

Worry not there’s already a solution that all modern browser support srcset

and with few changes to your <img/> tag you can let the browser know you have various images and the browser will do all the heavy lifting for you.

Notice src attribute is still there in last, that’s there for backward compatibility|fallback browser which doesn’t support srcset can still use src attribute to load the image

Note: the example above with srcset is the minimum working example you can always add sizes for media query support and you can use x-descriptors to support various resolutions instead of various widths, refer to the official MDN Docs mentioned above for all available options for srcset.

Conclusion:

Having a properly sized and formatted image on the website makes it lighter in size which makes it load webpage faster, rich in user experience, SEO friendly and modern and efficient of course.

Say Hi to Author:

StackOverflow

Linkedin