{"id":2117,"date":"2018-12-03T19:58:38","date_gmt":"2018-12-03T14:28:38","guid":{"rendered":"https:\/\/www.idslogic.com\/blog\/?p=2117"},"modified":"2025-02-24T12:23:39","modified_gmt":"2025-02-24T06:53:39","slug":"how-to-create-optimized-and-responsive-images-in-umbraco","status":"publish","type":"post","link":"https:\/\/www.idslogic.com\/blog\/how-to-create-optimized-and-responsive-images-in-umbraco","title":{"rendered":"How to Create Optimized and Responsive Images in Umbraco"},"content":{"rendered":"

Every business owner is aware that they should implement responsive designs or images within their site, but very few consider it seriously. While creating an Umbraco site, it is very important to give the editors or content publishers the tools that they need to keep it in line with the constraints of the design. But this is not always very easy and if the design has to be responsive, things are even harder.<\/p>\n

Today, in this blog, I will talk about various tools that can be used with Umbraco core that will help you to simply integrate responsive images in your Umbraco.<\/p>\n

Umbraco powers the Image Cropper property edition, but it is capable of doing much more to help you create high quality and performant websites. Since web pages are getting bigger and bigger, it is very important for the developers to reduce the size of the page and images so that it has a fast loading time especially in the age of increased mobile users and responsive websites.<\/p>\n

Thankfully, we have various tools with Umbraco that can help us to keep the webpage and images well optimized.<\/em><\/span><\/p>\n

\n

Image Cropper<\/strong>:\u00a0<\/span><\/p>\n

If you have an Umbraco website<\/span><\/span><\/a> and you have not used the Image cropper property editor then, you are surely missing out on something that is really great.\u00a0 The Image Cropper uses the ImageProcessors. Web\u2019s URL API in order to generate crops of images that are cached in auto cleaning diskcache mechanism that serves the cropped image on subsequent requests.<\/p>\n

\n

Slimsy: <\/strong><\/span><\/p>\n

This is a cool Umbraco package that developers caring about optimal web page performance should always consider. Any good developer is aware of the fact that performance is important and we too know the importance of creating responsive images. But the majority of websites do not bother. Since most projects have tight deadlines, developers complain that creating responsive images takes too much time.<\/p>\n

But with Slimsy, everything is easy as after installing it, within 5 minutes you are ready to update your templates so that Umbraco handles everything for you. It is a neat package when used together with the ImageProcessor.Web and the build in Image Cropper in Umbraco. It helps to make the website images react to the viewport width and also the density of the pixel if supported by the client browser.<\/p>\n

Target Potential Customers with Umbraco<\/a><\/em><\/span><\/p>\n

\n

Presets: <\/strong><\/span><\/p>\n

ImageProcessor.web offers the facility to translate the preset instructions that pass to the URL API. Presets assist you to configure the image output to a single location and also make it easy to tweak the output for higher performance. In order to set up the presets, you have to correct the configuration files that are installed on the website. A nugget package is available \u2013 the ImageProcessor.Web.Config that enables you to install the files. You will also find extensive documentation online, that will help you to set it yourself.<\/p>\n

\n

Pre-Processing: <\/strong><\/span><\/p>\n

All the methods discussed above involve post-processing and uploading of the images in the first instance of the page loading. This is 99% perfect, but there are still chances when a client or someone will upload a big image that may hamper the performance as ImageProcessor processes and saves it for the audiences to view. But there is definitely a way to deal with this. Umbraco offers various events that help to save media and the ImageProcessor\u2019s fluent API can be used within these events to resize the images when they are saved in the media section.<\/p>\n

I am sure that the above points will help to start making the most of the ImageProcessor within Umbraco and boost the performance of your site.<\/p>\n","protected":false},"excerpt":{"rendered":"

Every business owner is aware that they should implement responsive designs or images within their site, but very few consider it seriously. While creating an Umbraco site, it is very important to give the editors or content publishers the tools…<\/p>\n","protected":false},"author":1,"featured_media":9951,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[256],"tags":[264,402,202],"class_list":["post-2117","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-cms","tag-umbraco-cms-developers","tag-umbraco-cms-solution","tag-umbraco-development-company"],"post_mailing_queue_ids":[],"_links":{"self":[{"href":"https:\/\/www.idslogic.com\/blog\/wp-json\/wp\/v2\/posts\/2117","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.idslogic.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.idslogic.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.idslogic.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.idslogic.com\/blog\/wp-json\/wp\/v2\/comments?post=2117"}],"version-history":[{"count":3,"href":"https:\/\/www.idslogic.com\/blog\/wp-json\/wp\/v2\/posts\/2117\/revisions"}],"predecessor-version":[{"id":10440,"href":"https:\/\/www.idslogic.com\/blog\/wp-json\/wp\/v2\/posts\/2117\/revisions\/10440"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.idslogic.com\/blog\/wp-json\/wp\/v2\/media\/9951"}],"wp:attachment":[{"href":"https:\/\/www.idslogic.com\/blog\/wp-json\/wp\/v2\/media?parent=2117"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.idslogic.com\/blog\/wp-json\/wp\/v2\/categories?post=2117"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.idslogic.com\/blog\/wp-json\/wp\/v2\/tags?post=2117"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}