Home – New Forums Tech talk Responsive images (one for the techies)

  • This topic is empty.
Viewing 15 posts - 1 through 15 (of 27 total)
  • Author
    Posts
  • #989224
    Zava Design
    Participant
    • Total posts: 1,463
    Up
    0
    ::

    Came across this little tool today: http://wurfl.io/#wit

    Need to do some fairly comprehensive speed testing before I use for production but am liking how it works and how simple it is to implement. Potentially a good stop gap until the element is fully supported.

    Anyone got any other similar solutions they use?

    #1171012
    Greg_M
    Member
    • Total posts: 1,691
    Up
    0
    ::

    A timely post, I’ll have a closer look.

    I haven’t been using a specific solution apart from CSS max-width, and/or whatever magic Bootsrap weaves making images respond to container sizes.

    Neither of those solutions does anything to optimise the image weight though.

    Hasn’t been an issue for me up till now (very few images to deal with, and usually small anyway), but a current project idea has made it more important.

    Did come across this article though at Smashing Magazine, it’s got a pretty good background article to the issues involved and links to some handy solutions/options including
    pollyfills for the “picture” element.

    #1171013
    Zava Design
    Participant
    • Total posts: 1,463
    Up
    0
    ::

    What I like about this one v the pollyfill is that it’s so simple, but as I said I do need to speed test it fully first.

    I actually like the idea of having an image specific server, possibly optimised for the delivery of images since it is the thing that will slow down a site the most usually. Might have to do some more investigation into this, some sort of image delivery CDN network or similar…

    #1171014
    Greg_M
    Member
    • Total posts: 1,691
    Up
    0
    ::
    Zava Design, post: 198516 wrote:
    What I like about this one v the pollyfill is that it’s so simple, but as I said I do need to speed test it fully first.

    I actually like the idea of having an image specific server, possibly optimised for the delivery of images since it is the thing that will slow down a site the most usually. Might have to do some more investigation into this, some sort of image delivery CDN network or similar…

    I looked into this as well, the option that seemed the most flexible was an Amazon S3 bucket, also looked at the API’s for Dropbox and Box … neither of these is probably a great option for client sites though (unless they’re big clients maybe).

    I did find a couple of upload services that do the optimising (not just images) … but you still need to store somewhere.

    Slightly off topic, but I have been surprised by how much of a performance gain can be achieved by pulling static assets from a CDN.

    I’m not talking about putting the whole site behind Cloudflare etc. That’s now a pretty common first option … but for a few tech reasons doesn’t suit what I’ve been doing.

    How big the difference is, I discovered by accident.

    Partly to save some time while prototyping I started using CDN’s to pull in quite a few basic assets ….typically;

    A themed version of Bootstrap (which was pulling in Googlefonts)
    Bootsrap JS
    JQuery
    FontAwesome Icons
    Various other JS libraries, some with associated CSS CDN’s.

    I also use some browser caching code and middleware compression. The sites aren’t aren’t that big, but tested at Pingdom they typically loaded between 250 and 300 milliseconds.

    Point is, smarty here figured that there was a fair bit of stuff in Bootsrap in particular that wasn’t really needed, so I got the lightest CSS grid I could find, added Normalise, Google fonts and about 4 lines of custom CSS. I also deleted FontAwesome and most of the JS stuff. Framework, server etc. identical.

    Bottom line was, the so called “cut down version” took on average 1.1 seconds to load … a huge percentage increase.

    One uncompressed (but small) CSS file more than doubled the load time.

    If a few lines of whitespace can do this, no wonder images are a challenge on a larger site … especially ecommerce where you’re possibly looking for a heap of high quality product images.

    Good luck with the quest.

    #1171015
    Zava Design
    Participant
    • Total posts: 1,463
    Up
    0
    ::

    I decided that this week I’m going to do some speed testing on these three responsive/adaptive image solutions:
    1) http://wurfl.io/#wit (as we’ve been discussing)
    2) http://adaptive-images.com
    3) http://squeezr.it

    I’ll post the results here once I’m done.

    Your CDN comments are also interesting. I’ve been using CDNs more and more (http://cdnjs.com is a great resource if you’re using one of the scripts they have), but from your comments I might have to test CDN hosting non-minified scripts v minified ones now too. So many things to look at, it never ends… ;)

    #1171016
    Zava Design
    Participant
    • Total posts: 1,463
    Up
    0
    ::

    Oh, and question (for you or anyone else reading this): Have you used Cloudflare’s free CDN service at all? Am wondering how good/reliable/fast their free service is for a CDN?

    #1171017
    JohnTranter
    Member
    • Total posts: 842
    Up
    0
    ::

    My one issue with the Wurfl offering is that it appears to use a 3rd party service, which means you’re reliant upon them. Might be a bit of a nightmare if the service drops or their servers are overloaded.
    (Also, how on earth are they supporting that, the bandwidth costs must be huge!)

    With regards to adaptive images, I haven’t much opportunity to investigate but I have heard that small devices with ‘retina’ screens can be hard to cater for.

    Let us know your results, I’d be interested to hear them.

    #1171018
    Zava Design
    Participant
    • Total posts: 1,463
    Up
    0
    ::

    The third party thing is my concern too (and hence why I want to test it with these self-hosted options), but then we do use third party apps all the time nowadays of course (Google anyone…) so it would be about assessing their reliability. Cloudflare is also a third party service that many use now, including their free service.

    And free versions are all about promoting their enterprise level paid upgrades of course…

    Though if I was going to use any third party hosted service I’d make sure there was a fallback in my code. I do the same with Google hosted scripts.

    Retina screens are an interesting question, will see if I can arrange some testing in that area (though don’t have a device myself).

    #1171019
    Greg_M
    Member
    • Total posts: 1,691
    Up
    0
    ::

    I did have a pretty good look at Cloudflare, it seems to have a good reputation, but the free version didn’t quite do it for me.

    There were some tech issues too for me, can’t recall exactly what they were, but were related to the fact I use PaaS Cloud platforms like Heroku and Openshift .

    There’s no IP address as such on PaaS, and I use DNSimple DNS because they use “anycast” DNS, and allow for AAA records which read as A records coming off the Cloud … apart from making it more confusing I couldn’t see a lot of advantage in putting Cloudflare on top of it (especially as the sites are small and fast anyway).

    Another reason for a CDN promoted heavily by Google, especially in their push to promote AngularJS, is … there’s a fair chance your site user will have already visited a site using a CDN (given their increasing usage) which means they’ll possibly have a lot of the code already cached in their browser and won’t need to download anything in the way of JScript … the site will just run like lightning.

    Given the current thirst for Single Page App,s and the rise of Angular et al, as frontend frameworks, it seems a reasonable argument to me.

    I’m sold.

    As you say, it never ends … always something new and shiny to digest, evaluate and possibly have to learn to keep up.

    #1171020
    Greg_M
    Member
    • Total posts: 1,691
    Up
    0
    ::

    Off topic (yet again), but it has entered my head reading this thread that it is becoming increasingly difficult to satisfactorily produce a DIY website using an Open source CMS … seems that’s just a bare starting point. Probably always was, but the lure of plugins seems to have everyone mesmerised that it’s easy to do without consequences.

    And finding someone (developer/designer) that actually knows what they need to know is even harder.

    The later comment hit home when I noticed a recent intro post from a proclaimed “expert” … seemed a bit slow to load, often it’s me (dodgy internet service), so I dropped the URL into Pingdom Tools:

    143 requests to the server, 7 plus seconds load time, and no caching etc etc … I’m not so sure they’re an expert …

    #1171021
    MeetJodi
    Member
    • Total posts: 10
    Up
    0
    ::

    Hello guys,

    Thanks for sharing this interesting technique.

    The obvious pros are its a quick and easy solution.

    The cons are the original image must be uploaded to the WUFL service first. The round trip will obviously add to the latency. It will also not help with trying to minimize the bandwidth as the original image will still need to be uploaded before its re-sized anyway.

    To avoid the latency the image is ideally resized before its served from the host. It helps with caching as well. For a pure CSS solution there are media queries. Then you also have this option.

    http://adaptive-images.com/

    If you use WordPress then you have the option of dynamically re-sizing images automatically with this plugin.

    http://wordpress.org/plugins/powr-image-resizer/

    love

    Jodi

    #1171022
    Zava Design
    Participant
    • Total posts: 1,463
    Up
    0
    ::
    MeetJodi, post: 198581 wrote:
    The cons are the original image must be uploaded to the WUFL service first. The round trip will obviously add to the latency. It will also not help with trying to minimize the bandwidth as the original image will still need to be uploaded before its re-sized anyway.
    Have you done speed testing to confirm this?

    There is latency in any adaptive image type solution, whether it be connecting with a third party server, or on your own server. And for all you know they may process the operation far quicker on the third party server than your shared hosting environment does.

    So I’ll wait until I’ve done suitable testing before jumping to conclusions.

    And if you’re concerned with speed, the last thing you should be doing is adding another plugin to your site without having done your own testing to ensure it’s as fast/faster than other options available.

    #1171023
    Zava Design
    Participant
    • Total posts: 1,463
    Up
    0
    ::
    estim8, post: 198580 wrote:
    Off topic (yet again), but it has entered my head reading this thread that it is becoming increasingly difficult to satisfactorily produce a DIY website using an Open source CMS … seems that’s just a bare starting point. Probably always was, but the lure of plugins seems to have everyone mesmerised that it’s easy to do without consequences.

    And finding someone (developer/designer) that actually knows what they need to know is even harder.

    The later comment hit home when I noticed a recent intro post from a proclaimed “expert” … seemed a bit slow to load, often it’s me (dodgy internet service), so I dropped the URL into Pingdom Tools:

    143 requests to the server, 7 plus seconds load time, and no caching etc etc … I’m not so sure they’re an expert …
    Oh boy yeah!! I’m a member of a number of LinkedIn WordPress “developer” groups. I use the term very loosely for reasons that you mention. The solution of so many of these so called “developers” for some very simple features is to install another plugin.

    Now if someone has a disclaimer such as budget, for some functions I could understand that. But for the first port of call to be “install a plugin”, yeah, gotta question their credentials.

    It’s why I think you will find more (most?) of the more advanced WordPress developers have their own “starter” there, with options they can easily add/remove depending on the site requirements. Both speeds up development but also ensure optimal implementation of key features rather than lumping another plugin onto the site.

    #1171024
    Greg_M
    Member
    • Total posts: 1,691
    Up
    0
    ::

    A “starter” is really just a sensible option, it moves something like WP away from a CMS to a framework model.

    There’s no prizes for writing heaps of boilerplate core functionality using anything … it’s why frameworks like Rails etc have got a foothold, and CMS’s like WP continue to dominate.

    The risk with any of them is that you may be forcing the “project” to fit the “production line” of choice (or expertise) and finish up using sledge hammer to crack a peanut, or compromise functionality because your banging your head against the framework quirks or inner machinations.

    WP has done a great public relations job, in that it’s obviously on everybody’s lips when they look for a website. Given what appears to me to be a groundswell of change in the way consumers digest the web (multi device), and the huge and accelerating increase in options to deliver content, it’ll be interesting to see how it (WP), and other CMS’s adapt (or maybe die off).

    Your image optimising issue is just the start imo.

    #1171025
    Zava Design
    Participant
    • Total posts: 1,463
    Up
    0
    ::

    Ahh, but that’s if your “hammering” every project into the one CMS, something that I always warn prospects to watch out for too. If you can only build sites with one CMS then you should either, a) become equally proficient in at least a small number of other platforms so you can choose the “best tool for the job”, and/or b) partner up with one or more people with different skill bases to either work together or exchange/pass on projects to.

    The client should never be making the choice of what technology to use for their site, unless they are a web developer themselves. If a client comes to me saying “I need a WordPress site”, I explain to them to take a step back, let’s look at the business/functional objectives they need to meet, and THEN we can decide on what is the best technology to address those needs.

    But we do digress from the responsive image question… ;)

Viewing 15 posts - 1 through 15 (of 27 total)
  • You must be logged in to reply to this topic.