Retina images and normal images serving up with Umbraco. Best way?
With all this hoopla about Retina or HD displays and serving up 2x images for websites to accomodate said devices with Retina displays, what would be the best course in Umbraco to do this?
It seems like a waste of time to have to make 2 images, BUT it also is a waste to try to make an image that is supposed to be 800px wide 1600px than try to save the image down in DPI. I am not sure if ImageGen can do this or a different way that would serve up the separate images (if going that route). It seems like more work thatn it nees to be. Javascript seems like it would just slow the process down and the way Umbraco makes it's file paths based off of the Database vs a folder structure does not make it an easy process to serve up a large image say "/images/myImage.jpg" and "/images/myImage-2x.jpg". Would be easy if I could just append "-2x" to the file path in Umbraco and be done with it.
Is there even a way serve up one of two images serving based on screen size in Umbraco? Is there best practices in Umbraco to do this? Code examples?
Have spent more than a few hours deliberating this subject. What I don't get is - you have to serve up to a device with "small" memory, an image that is twice the size, yet serve an image half the size to a desktop device with more memory than you can shake a stick at, so where is the issue? (mobile devices with small memory and non-retina displays)
Having said that, serving images depends upon your site structure, if you use a separate mobile site, then it is very simple to create crops (personally I use DAMP), ie upload image at 1600, create a crop at 800 and call the 800 for anything other than I-phone or Ipad. Personally I don't like the re-direct to mobile for a whole bunch of reasons and just call a mobile layout using the same view with another css file, specifically for mobile - so the issue you raise is valid here.
Unless you want to pinpoint each device, it's not just an umbraco issue, I'm using 51 degrees mobile detection and am happy with the results, but knowing and keeping up to date with what mobile device has what display and serving images accordingly is beyond thinking about. The Sony Xperia Z is out shortly, what will you need to serve for that?
The long and short of it, on a personal note, is just to serve the best quality images possible (say 1600) and be done with it. However, let's throw another element into the mix. If you serve an image at 1600 on your desktop site, at 50% of screen width, chances are you have some real estate left to add some content, if you start serving images to Ipad in portrait or landscape at 50% screen width, your content and flow is generally hampered. In truth I have found that all of my image widths have become smaller for tablets as the content generally needs additional real estate (hence the separate css to adjust widths as necessary).
OK, that is probably enough to deduce that I don't have an answer for you. I guess it depends upon the number of images that you are looking to serve to the site, but I have not experienced any problems in terms of loading times to mobile devices. (I have taken to using crops with DAMP because it is so easy, if you keep the aspect, you can serve a "full" image with reduced pixels.) So, the concern left is the amount of download that the consumer has to pay for if the images are larger then necessary, hmmm, for all that additional code to detect their device?????
Right now we are just using our basic images and resizing them down with CSS. Not really a fast way of doing it, but we are not seving up "retina" quality either. So most of our desktop images are at 600 x 350 or so. We know we could use an image that is 1200px then size it down for desktop to 600 and then use the same image for mobile and size that down to 300,but the file size issue always comes into play. Even if you crunch the heck out of the dpi. We used to use a redirect using a alt template for mobile instead of a completely separate sub URL but we opted to go Responsive now, because it was too much of a hassle to deal with 2 template structures. Separate CSS files are easier for us to maintain on our site. Are site is a bit too large and it was just too cumbersome.
Jeroen's idea of using CropUp or serving it up server side has been a concensus for a lot of people, but that just seems like the biggest pain to manage more code to server up sized images server side. So for now, we may forgo the extreme high rez stuff. I think Apple products are the only ones using them anyways and even then, from our analytics, it has been a very small amount using our site with retina displays. We're due for a site redesign in about a year or so anyways, so maybe instead of retro-fitting a solution, we would take this into account. CropUp seems like a nice idea but it still doesn't quite solve our issue.
I have also seen a solution, using 1 image a "retina" size, so, a 1600px image saved as a low dpi (say 30%) but not so low the quality is lost. And when it was saved if you saved an image a 800px at 60% dpi they are roughly the same file size. I might start trying to encourage our content admins to do that instead. I will have to do some testing thought to make sure file size works and doesn't compromise load times.
So far it has not been too much of an issue just using 1 image and resizing it because I am kind of a stickler on file sizing with the admins.
Until it becomes an issue, which it only seems to be a concern in the web development world, I will not worry about it too much.
I was wondering about points of views of people and if they had any suggestions. Thanks for the response.
My thought is that we are currently in a transition period (aren't we always?), there is so much just around the corner in terms of Html5, things like flexbox and flow, basically removing the "boxes" of <div>s. One thing that is really interesting is the fluid layout in InDesgn CS6, ok, this is at present for e-books, but does give an indication of where things might be heading. I have been playing with flow in Chrome 24 and it is so different, creating magazine type layout pages on the web is very interesting, but, as it is not supported in any other browser right now is kinda useless. The best thing I have found that is supported, is to use the <figure> class in CSS3 with images to keep the aspect, which was a bit of a learning curve, but now find I'm using it more and more to cover the "distance" between media queries by maintaining the aspect over the div, the width to height ratio allows text to "float" and not get cut off etc.
You raise the question of dpi/pixels on file size, and I will admit that I have not had a look at this, but certainly will now, just another thing on the list to get around to.
There is another alternative and that is to serve images as background images, this would allow you to target devices via css, so a separate media query for Iphone and Ipad can call the "retina" image, but again, it's on the list to work this into Umbraco (along with a quick glance at the return on investment). With the new releases of Umbraco it has taken time to learn and adjust, but the movement is definitely in the right direction and positive, so let's see what tomorrow brings.
Thanks again for your input and raising the topic, interesting.
We've been doing this on a couple of sites already — we're using CropUp to handle the cropping, and we just double the sizes in its .config, so all crops are created at retina resolution, which works fantastic — the client just get a minimum width/height for the images they upload and the rest is taken care of. We don't use the responsive client-side stuff in CropUp; we serve the images as we've always done.
We don't really have any traffic-heavy sites, so the actual image sizes (kilobytes, that is) have not been a problem yet, but the only thing that prevents us from doing this on a traffic-heavy site would be that we'd need a way to adjust the output quality from CropUp, so we can lower that to keep the images at roughly the same "weight" as they would be at normal resolution.
Another thing to remember is that sometimes you only need to retinafy the logo and some key images — all dependant on the design etc. If you use webfonts instead of images for headlines and CSS for gradients, borders etc., your sites already look great on retina displays.
That's great - many thanks, will certainly look into that.
The issue is easier if there are no clients involved, but you seem to have found something that overcomes that.
I have overcome the logo situation by serving .svg files, the beauty is that they are already responsive, scalable, lightweight and so sharp at any size.
As they are now supported and you can use them locally without any configuration (IIS7.5) it has become much easier (still don't think they show on some emulators, but if you use Safari browser - develop - user agent - iPad, shows as would in the real world). As they are code, any size adjustments can be made in the file itself, no need to re-make outside. This is particularly useful in positioning background images, or trimming gradients to fit, or look right against the edge of the div. It is also more flexible in gradients as you can apply pretty much anything from Illustrator in one file so mixed gradients ie left to right and up and down. (an example to demonstrate rather than something you may actually want to do, but this is not achievable in css gradients alone).
Here's a thing I did for the "24 Days In Umbraco" website:
Created a Figure Media Type as a copy of the standard Image type - and then added a custom retinafy property, using the uComponents ToggleBox render control, like this:
(ToggleBox is just a fancy BOOL - but you can set the text, color and (most importantly) if it's ON by default)
In the XSLT, I just checked the flag to see if I needed to adjust the width, e.g.:
Apologies just got around to reading this - so the "retinafy" test is within crop-up? So serve the higher resolution to retina devices? If so, that could be adapted to serve all images that way? Apologies if I am not getting this 100%.
Just a quick note on <figure>, it can also overcome the problem of vertical centre on unknown height div for text. If you set the width to 100%, the padding-top is proportinate to the width, therefore, if you add a property containing text, and text-align centre, it vertically and centrally aligns the text.
figure.bb { padding-top: 15%; width: 100%; text-align: center; } it is also responsive and keeps it aligned!
Not sure how far you can go with this, but for the simple things I have tried it has been successful.
Retina images and normal images serving up with Umbraco. Best way?
With all this hoopla about Retina or HD displays and serving up 2x images for websites to accomodate said devices with Retina displays, what would be the best course in Umbraco to do this?
It seems like a waste of time to have to make 2 images, BUT it also is a waste to try to make an image that is supposed to be 800px wide 1600px than try to save the image down in DPI. I am not sure if ImageGen can do this or a different way that would serve up the separate images (if going that route). It seems like more work thatn it nees to be. Javascript seems like it would just slow the process down and the way Umbraco makes it's file paths based off of the Database vs a folder structure does not make it an easy process to serve up a large image say "/images/myImage.jpg" and "/images/myImage-2x.jpg". Would be easy if I could just append "-2x" to the file path in Umbraco and be done with it.
Is there even a way serve up one of two images serving based on screen size in Umbraco? Is there best practices in Umbraco to do this? Code examples?
Thanks in advance.
Hi Carlos
Have spent more than a few hours deliberating this subject. What I don't get is - you have to serve up to a device with "small" memory, an image that is twice the size, yet serve an image half the size to a desktop device with more memory than you can shake a stick at, so where is the issue? (mobile devices with small memory and non-retina displays)
Having said that, serving images depends upon your site structure, if you use a separate mobile site, then it is very simple to create crops (personally I use DAMP), ie upload image at 1600, create a crop at 800 and call the 800 for anything other than I-phone or Ipad. Personally I don't like the re-direct to mobile for a whole bunch of reasons and just call a mobile layout using the same view with another css file, specifically for mobile - so the issue you raise is valid here.
Unless you want to pinpoint each device, it's not just an umbraco issue, I'm using 51 degrees mobile detection and am happy with the results, but knowing and keeping up to date with what mobile device has what display and serving images accordingly is beyond thinking about. The Sony Xperia Z is out shortly, what will you need to serve for that?
The long and short of it, on a personal note, is just to serve the best quality images possible (say 1600) and be done with it. However, let's throw another element into the mix. If you serve an image at 1600 on your desktop site, at 50% of screen width, chances are you have some real estate left to add some content, if you start serving images to Ipad in portrait or landscape at 50% screen width, your content and flow is generally hampered. In truth I have found that all of my image widths have become smaller for tablets as the content generally needs additional real estate (hence the separate css to adjust widths as necessary).
OK, that is probably enough to deduce that I don't have an answer for you. I guess it depends upon the number of images that you are looking to serve to the site, but I have not experienced any problems in terms of loading times to mobile devices. (I have taken to using crops with DAMP because it is so easy, if you keep the aspect, you can serve a "full" image with reduced pixels.) So, the concern left is the amount of download that the consumer has to pay for if the images are larger then necessary, hmmm, for all that additional code to detect their device?????
If you know of a better way - please let me know.
Regards G
Maybe have a look at the responsive options of the CropUp package: http://our.umbraco.org/projects/website-utilities/eksponent-cropup
You might be able to do something server side.
Jeroen
@gary,
Right now we are just using our basic images and resizing them down with CSS. Not really a fast way of doing it, but we are not seving up "retina" quality either. So most of our desktop images are at 600 x 350 or so. We know we could use an image that is 1200px then size it down for desktop to 600 and then use the same image for mobile and size that down to 300,but the file size issue always comes into play. Even if you crunch the heck out of the dpi. We used to use a redirect using a alt template for mobile instead of a completely separate sub URL but we opted to go Responsive now, because it was too much of a hassle to deal with 2 template structures. Separate CSS files are easier for us to maintain on our site. Are site is a bit too large and it was just too cumbersome.
Jeroen's idea of using CropUp or serving it up server side has been a concensus for a lot of people, but that just seems like the biggest pain to manage more code to server up sized images server side. So for now, we may forgo the extreme high rez stuff. I think Apple products are the only ones using them anyways and even then, from our analytics, it has been a very small amount using our site with retina displays. We're due for a site redesign in about a year or so anyways, so maybe instead of retro-fitting a solution, we would take this into account. CropUp seems like a nice idea but it still doesn't quite solve our issue.
I have also seen a solution, using 1 image a "retina" size, so, a 1600px image saved as a low dpi (say 30%) but not so low the quality is lost. And when it was saved if you saved an image a 800px at 60% dpi they are roughly the same file size. I might start trying to encourage our content admins to do that instead. I will have to do some testing thought to make sure file size works and doesn't compromise load times.
So far it has not been too much of an issue just using 1 image and resizing it because I am kind of a stickler on file sizing with the admins.
Until it becomes an issue, which it only seems to be a concern in the web development world, I will not worry about it too much.
I was wondering about points of views of people and if they had any suggestions. Thanks for the response.
Carlos
Hi Carlos
Interesting to see another point of view.
My thought is that we are currently in a transition period (aren't we always?), there is so much just around the corner in terms of Html5, things like flexbox and flow, basically removing the "boxes" of <div>s. One thing that is really interesting is the fluid layout in InDesgn CS6, ok, this is at present for e-books, but does give an indication of where things might be heading. I have been playing with flow in Chrome 24 and it is so different, creating magazine type layout pages on the web is very interesting, but, as it is not supported in any other browser right now is kinda useless. The best thing I have found that is supported, is to use the <figure> class in CSS3 with images to keep the aspect, which was a bit of a learning curve, but now find I'm using it more and more to cover the "distance" between media queries by maintaining the aspect over the div, the width to height ratio allows text to "float" and not get cut off etc.
You raise the question of dpi/pixels on file size, and I will admit that I have not had a look at this, but certainly will now, just another thing on the list to get around to.
There is another alternative and that is to serve images as background images, this would allow you to target devices via css, so a separate media query for Iphone and Ipad can call the "retina" image, but again, it's on the list to work this into Umbraco (along with a quick glance at the return on investment). With the new releases of Umbraco it has taken time to learn and adjust, but the movement is definitely in the right direction and positive, so let's see what tomorrow brings.
Thanks again for your input and raising the topic, interesting.
Regards g
Hi all,
We've been doing this on a couple of sites already — we're using CropUp to handle the cropping, and we just double the sizes in its .config, so all crops are created at retina resolution, which works fantastic — the client just get a minimum width/height for the images they upload and the rest is taken care of. We don't use the responsive client-side stuff in CropUp; we serve the images as we've always done.
We don't really have any traffic-heavy sites, so the actual image sizes (kilobytes, that is) have not been a problem yet, but the only thing that prevents us from doing this on a traffic-heavy site would be that we'd need a way to adjust the output quality from CropUp, so we can lower that to keep the images at roughly the same "weight" as they would be at normal resolution.
Another thing to remember is that sometimes you only need to retinafy the logo and some key images — all dependant on the design etc. If you use webfonts instead of images for headlines and CSS for gradients, borders etc., your sites already look great on retina displays.
Here's a link to the technique of lowering the "quality" for JPGs: http://filamentgroup.com/lab/rwd_img_compression/
/Chriztian
Hi Chriztian
That's great - many thanks, will certainly look into that.
The issue is easier if there are no clients involved, but you seem to have found something that overcomes that.
I have overcome the logo situation by serving .svg files, the beauty is that they are already responsive, scalable, lightweight and so sharp at any size.
As they are now supported and you can use them locally without any configuration (IIS7.5) it has become much easier (still don't think they show on some emulators, but if you use Safari browser - develop - user agent - iPad, shows as would in the real world). As they are code, any size adjustments can be made in the file itself, no need to re-make outside. This is particularly useful in positioning background images, or trimming gradients to fit, or look right against the edge of the div. It is also more flexible in gradients as you can apply pretty much anything from Illustrator in one file so mixed gradients ie left to right and up and down. (an example to demonstrate rather than something you may actually want to do, but this is not achievable in css gradients alone).
So, CropUp added to the list, thanks again
Regards G
Here's a thing I did for the "24 Days In Umbraco" website:
Created a Figure Media Type as a copy of the standard Image type - and then added a custom retinafy property, using the uComponents ToggleBox render control, like this:
(ToggleBox is just a fancy BOOL - but you can set the text, color and (most importantly) if it's ON by default)
In the XSLT, I just checked the flag to see if I needed to adjust the width, e.g.:
<xsl:template match="Figure"> <figure> <a href="{umbracoFile}"> <img src="{umbracoFile}" width="{floor(umbracoWidth div 2)}" alt="{caption}"> <xsl:if test="retinafy = 0"> <!-- Reset if asset isn't retina-rez --> <xsl:attribute name="width"><xsl:value-of select="umbracoWidth" /></xsl:attribute> </xsl:if> </img> </a> </figure> </xsl:template>/Chriztian
Hi Chriztian
Apologies just got around to reading this - so the "retinafy" test is within crop-up? So serve the higher resolution to retina devices? If so, that could be adapted to serve all images that way? Apologies if I am not getting this 100%.
Just a quick note on <figure>, it can also overcome the problem of vertical centre on unknown height div for text. If you set the width to 100%, the padding-top is proportinate to the width, therefore, if you add a property containing text, and text-align centre, it vertically and centrally aligns the text.
figure.bb { padding-top: 15%; width: 100%; text-align: center; } it is also responsive and keeps it aligned!
Not sure how far you can go with this, but for the simple things I have tried it has been successful.
Regards G
is working on a reply...