My take on “Web design in a Retina world”

I read an interesting article on Johan Ronse’s blog about how to design (or is it “develop”?) for a Retina world (Retina being Apple’s marketing speak for high pixel density screens, but you guys knew that). I’ll be honest, I’ve not followed up on all the Retina-buzz, if only because this performance-nut isn’t particularly happy about the sudden need for higher quality images being shoved down people’s data-throat (same with webfonts actually). Because, after all, 14Mb really isn’t “nothing” Johan, given the average webpage is around 1.1Mb.

What seems to be missing in the few articles I did read up until now is this; why do we want to deliver high resolution images to high pixel density screens to users on a broadband connection (assuming we can keep others safe from these high fidelity images, but that is doable)? Because it looks better? Maybe, but what purpose does that serve? What purpose does your site serve? Do you want people to stick around and return, reading your stuff for a long as possible? Or are you in the ad displaying business? Maybe you sell products or services? The question is; how are Retina-ready images going to impact your KPI’s?

Let’s assume those nice crisp images will have a positive impact on your site’s usage and/or ad views and/or sales and let’s also assume (although it is a proven fact rather than an assumption) that the longer download time will have a negative effect on your business. Given these two assumptions; which one will have the biggest impact? My hunch would be the negative impact of longer download time, but I’m biased. The answer to that question really depends on your KPI’s, on your business and on the technical implementation.

The only sound advice anyone could give: do multi-variate testing, compare your KPI’s for your site with and without Retina. Going Retina might help your business, it might harm it. I for one am not switching to Retina any time soon, I don’t see the need for it from the safety of my ivory performance-tower. I’m biased, you know.

6 thoughts on “My take on “Web design in a Retina world”

  1. Pieter Coucke

    Maybe progressive enhancement would be nice in this case: load the “low” resolution first and then replace it with a high-res version after the page has loaded.

    <img src=”image.jpg” data-src-high=”image-high.jpg”/>
    $ = jQuery;
    $(function(){
    if (isHighRes()) {
    $(‘body’).addClass(‘highres’);
    }
    $(‘.highres img[attr=data-src-high]’).each(function(){
    $this = $(this);
    $this.src = $this.data(‘src-high’);
    };
    });

    Or put your images as backgrounds in css and target them with “.highres img”.

    And do A/B testing on this too ;-)

    Reply
    1. frank Post author

      Your full page download time (and total amount of bytes transferred) will still be -a lot- higher, so I wouldn’t be happy with this if I were on 3G (or Edge). But I do like the “do A/B testing on this too” part :-)

      Reply
  2. Niobos

    There are solutions that do both: reduce download time and increase resolution. It’s not applicable for every image, but using SVG for all vector-based images allow the target device itself to render at its native resolution, without a single additional byte over the wire. (I’m assuming retina-devices have sufficiently more CPU/GPU power to compensate for the additional pixels to calculate).

    PS: from my single datapoint, a gzip-ed SVG is 3% smaller that the rendered PNG, but YMMV.

    Reply
    1. frank Post author

      SVG, absolutely! But I would expect that to only apply to … let’s say 20% of all use cases, the other 80% being bulky pictures?

      Reply
  3. Wolf

    Good post!

    Yes, I make the same performance point in my article.

    Do note that I also don’t use webfonts on my website for the reasons you’re giving.

    14Mb is nothing if you are on broadband and the site progressively loads (i.e. while reading the article, the screenshots load, you can start reading once the first 300kb [the site] have loaded). Straight up downloading 14Mb on EDGE is of course a terrible idea.

    If we can detect that a user is on broadband (whether it’s user iniated like clicking 720p on a youtube video, or automatic through detection), why not deliver a better experience?

    What is the value of retina images? It’s the same as going from VHS to video to DVD to bluray. The value is higher image quality.

    If the content you are displaying not image based (i.e. a photography website, a video or a designer portfolio) then the value is going to be less.

    The issue is clear that it’s hard to detect at this point and serving retina to a low-bandwidth client is not helping anyone – point being, if you serve retina at this point in time it’s likely that you’re actually losing customers/visitors/ over that.

    I think we agree :).

    Reply
    1. frank Post author

      I think we agree largely, but not entirely; my p.o.v. is that even on broadband retina might be detrimental to your conversion (whatever your conversion goals are) as retina will always impact performance (full page load time & bytes downloaded, even when doing progressive enhancement). Hence: multi variate testing to see what the net effect of retina is on the KPI of a site.

      Reply

Leave a Reply

Your email address will not be published. Required fields are marked *