If you have been implementing websites with Umbraco, you have certainly dealt with image sizes and how to best get and cut your images to fit the available space in your pages. This is, unless you get your images from your designers exactly the way you need them (like I sometimes do)!But even so, you might also have concerns about the size of your website and load time. It is known that average website size has been increasing since the beginning of the web. It has now surpassed the 2MB mark (mostly due to image content!). But you know that the communication infrastructure has improved as well and increasing connection speeds allow your website to load faster than before.
It is a fact that the most used digital platform is not the desktop computer anymore but instead mobile devices. More users are going mobile and this is the trend for the future. Browsing the internet on mobile means that your user might experience slow connection speeds depending on where he’s at or your user’s device might be a bit outdated and struggles to load your website.
It is therefore in your best interest to keep your users happy and for this you need to craft your website to be as responsive and as fast as possible (while also saving on bandwidth costs!).
Umbraco makes this easy on you. If your website version is 7.1+, it comes already bundled with ImageProcessor. You can install it even if you’re running a previous version of Umbraco. The best thing about ImageProcessor is that it allows you to crop your images. This means that you no longer have to resize them when uploading to your website. You can just append e.g. ?width=300 to the url and you’re done, it will resize your image to be 300 pixels in width!
The second best thing is that it allows you to set the quality of the images by just appending ?quality=”number from 1 to 100” to your image url. Check out an array of other functions you can apply to your images here.
The third best thing is that it caches all your images thus saving massive amounts of processing power and bandwidth. If you have a lot of images and you don’t want your users to wait for image processing on the very first page load, check the last part of this article.
As an added bonus use image cropper for your images instead of media picker. This will allow you to create your own crops in the backoffice complete with focal point.
But what if you could resize your images according to your user’s viewport size? Worry not, Slimsy to the rescue! I believe this is the single most important change you can make to your website to make it smaller and hopefully faster. Slimsy makes use of Slimmage.js and SlimResponse to find out the optimal size of your image and fetch it (well.. more or less 160px which is the default step width)!
It’s easy to get Slimsy up and running. Just install the Slimsy package, Add slimmage.js to your markup (needs to be the first script to be executed!) and make use of one of the many methods like:
<img src=”@featureImage.GetResponsiveImageUrl(600, 400)” alt=”My responsive image” />
This will output a responsive image with a ratio of 600 x 400 px that will be the optimal size for your user’s viewport. As as bonus, Slimsy also supports devices with retina screens so your images will look even better on these high dpi devices! If you have time, check out this video.