The release of TYPO3 CMS 6.2 LTS is around the corner (December 10). One kick-ass feature that will make it into the core is responsive rendering for images. Sven Wolfermann writes about how to use this feature in an article translated by Roland Schenke and proofread by Den Denyer.
Along with the release of the <link http: typo3.org news article typo3-cms-62-lts-beta1-released>first beta version of TYPO3 CMS 6.2 a useful feature, assisting in the implementation of responsive webdesign, made its way into the core - responsive rendering for images. Starting at this year's T3DD (TYPO3 Developer Days) in Hamburg (Forge issues <link http: forge.typo3.org issues>#49723, <link http: forge.typo3.org issues>#50075), this feature enables, next to the current Working-Draft of the "<link http: responsiveimages.org>Responsive Image Community Group", another option for using different source images depending on the currently available screen real estate. You can find a general overview of responsive images and the problems that may arise in these <link http: maddesigns.de responsive-images>slides.
If you would like to use this feature in a TYPO3 CMS 6.2 project you first have to activate it, either by using the Constant Editor, ticking the option "Responsive rendering for images" and choosing a value for "Rendering-type for responsive image..." or by assigning appropriate values directly in your Typoscript constants section.
You can choose between four different rendering types, the Default-Rendering, the srcset-Rendering, the picture-Rendering and the rendering of additional Data-Attributes inside the <img>-tag. Besides, the Markup-Rendering is totally configurable via Typoscript with the ability of adding subsequent, i.e. your own, Rendering-Layouts. This concept also covers the usage of high-resolution images (aka Retina) which can be activated by additional Typoscript parameters.
Let's get down to business! Below you will find a code example for the srcset-Rendering containing adaptations for two different viewports.
The various configurations possible with Typoscript are well documented inside of <link http: docs.typo3.org typo3cms typoscriptreference latest contentobjects image index.html>TSRef (Typoscript Reference).
<link http: typo3-6.2beta.maddesigns.de>Here is a Demo using the srcset Responsive Image Rendering in TYPO3 CMS 6.2.
So far, so good. Given that this is just a Working-Draft and currently not a single browser supports Responsive-Image-Rendering, let alone a unified way of doing so, we'll add some JavaScript to help us display the right image. When using the srcset-Attribute variant we can use Boris Smus' <link https: github.com borismus srcset-polyfill>srcset-Polyfill. Just add it to the <head> and the matching image is loaded (only during JavaScript's onload Event). An unattractive side-effect of this approach is that the larger image is loaded as well and will not be replaced by the smaller image until it has loaded. This means more requests, more traffic and therefore more time (depending on the device's power and network link). It would be nice if the smallest image could be returned as a "default-src" if the browsers can't handle it themselves.
A temporary solution, much like a workaround, would be to omit the src-attribute which, although highly discouraged, works in modern browsers without any problems. Still, the image would be loaded a bit later since the Javascript has to be loaded, parsed and interpreted. Some modern browsers start loading images through the preparser in advance which results in only loading one image.
Unfortunately there is no fallback if there's any error in the Javascript.
Until a cross-Browser solution has been established, Picture-Element-Rendering is considered a better approach during this transition period. Currently it seems (Author's speculation as of 10/2013) that this will be discarded, but as the saying goes there's still life in the old dog yet. Time will tell. Scott Jehl provides a Polyfill called <link https: github.com scottjehl picturefill>Picturefill to implement Picture-Markup-Rendering which focuses on a slightly different markup of the <span>-tag. Again you add the JavaScript library to the <head> (including matchMedia Polyfill) and adjust the respective portions of Typoscript as you can see in the code below.
<link http: typo3-6.2beta.maddesigns.de>Here is a Demo using the picturefill Responsive Image Rendering in TYPO3 6.2.
You are now left with the agony of choice in choosing the right Rendering or Polyfill variant for your project. I'd like to see if the "mobile first" approach would also be chosen for images, that is the smallest image is linked as "default-src" and the backend would provide cropping options.
Originally on typo3blogger: <link http: typo3blogger.de responsive-images-typo3-6-2>typo3blogger.de/responsive-images-typo3-6-2/
