Responsive Image Support in DirigoEdge v2.4.006/16/2015
Responsive images are supported and automatically generated in DirigoEdge v2.4.0.
Dirigo Design & Development, Inc. is a specialized agency with niche verticals (like ski-outdoor, health care and direct response marketing). On the web development side, our team specializes in responsive web design—building websites that work across all devices. One of the biggest challenges of responsive design is performance. The amount of time your website takes to load has a direct impact on the success of your website, including your ranking on Google. We have always taken performance seriously—optimizing assets, minimizing requests, and compressing files from the server—but images have always presented a major challenge. To this point we haven’t had the ability to tell the browser to load images based on the device size, so we’ve had to load images that were optimized for the desktop. This means that smaller devices like tablets and phones are downloading images that are just too large. Images typically account for the majority of a page’s weight, and serving the right assets for the device can drastically improve the performance of a website.
Responsive Images in Browsers
Over the past few months browsers have started to implement responsive images in HTML. This gives us the tools to tell the browser to load certain images based on device size. We can tell the browser to load a 320px wide version of an image on an iPhone, or a 1600px wide version on a big desktop screen. Now we’re able to load the best image for the device.
<img sizes="100vw" srcset="/images/small/uploaded/test/rocket-ship.jpg 480w, /images/medium/uploaded/test/rocket-ship.jpg 1024w, /images/large/uploaded/test/rocket-ship.jpg 1920w, /images/extreme/uploaded/test/rocket-ship.jpg 2560w, /uploaded/test/rocket-ship.jpg 3872w">
In the code we can tell the browser which images is available and how wide it is. We also can tell the browser how wide to render an image at certain breakpoints. The browser knows how wide the viewport is, and is now able to choose the best image for the current situation (if the site is coded with the above image tag).
Implementing Responsive Images in DirigoEdge
The next step is automating RWD images for our CMS user. We don’t want you to have to include complex HTML every time you want to include an image. We’ve had dynamic image resizing built into DirigoEdge since late 2013, so we leveraged that to generate responsive images and the markup. We use that and a site-specific configuration to generate the necessary HTML, which is then automatically inserted when you insert an image via FileBrowser.
If you’re using a stock version of DirigoEdge, inserting an image through Code Edit or WYSIWYG will generate a shortcode. When the webpage is rendered the shortcode is replaced with the appropriate HTML code and all of the smaller images sizes are manufactured by the server from a high resolution image (images are made and saved to the file system on-the-fly on the first load).
If your site uses Pagebuilder the HTML is generated and inserted directly onto the page and you’ll see the image you chose.
Responsive images are only natively supported in the newest browsers. To provide support in older browsers we use a plugin called Picturefill. This is a very lightweight plugin, and the added weight is minimal compared to what you’ll be saving from your now appropriately sized images. This plugin allows us to provide support to all browsers.
We expect the new image "srcset" attribute to be fully supported within a year or so.
The same technique can also be used in DirigoEdge to deliver higher resolution images to displays that have much higher pixel density (e.g. new high-end displays support up to 326 pixels per inch compared to a standard display which has around 100 per inch).