Advice needed: Adaptive/Responsive Images in Django?

[ThomasTheDjangoFan]

Hi guys,

do you have a tip for implementing adaptive (responsive) images in django?

Basically I want to server smaller images to mobile-users and bigger images to desktop users.
I don't really now about best practices for SEO and Siteload-Performance.

Are there any apps that you can recon for this?

Thanks a lot for your tips!

Kind regards
Thomas

[termopro]

You don't need Django for that.
The idea behind responsive images is that you can scale them and adapt to users screen using css.

[Alex Strickland]

Have a look at Bootstrap 3, lot's of adaptive stuff (client side though,
so no real effect on Django).

--
Regards
Alex

[Andreas Kuhne]

--
Regards
Alex

--
You received this message because you are subscribed to the Google Groups "Django users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to django-users+unsubscribe@googlegroups.com.
To post to this group, send email to django...@googlegroups.com.
Visit this group at http://groups.google.com/group/django-users.
To view this discussion on the web visit https://groups.google.com/d/msgid/django-users/546DAA08.8070505%40mweb.co.za.
For more options, visit https://groups.google.com/d/optout.

Bootstrap only scales the images on other devices, you are still serving the same size of images to the user (the download size will still be the same).

I really don't know anything that will do what you want (you would have to look at the user agent and serve different images depending on agent). I think you should be able to use something like the "easy thumbnail" plugin for creating different sized images for different devices. Don't know about serving different images depending on device though.

Regards,

Andréas

[Jorge Andrés Vergara Ebratt]

Actually yo could do it with CSS alone...

You can have the 2 images on the server and add both in the html




And having the CSS like:

To unsubscribe from this group and stop receiving emails from it, send an email to django-users...@googlegroups.com.

To post to this group, send email to django...@googlegroups.com.
Visit this group at http://groups.google.com/group/django-users.

To view this discussion on the web visit https://groups.google.com/d/msgid/django-users/CALXYUbn_GZ%2B1%2BFQ%2BDzKgDq_DP0XidoxGuOQpFF71YH6Tpf7mDw%40mail.gmail.com.

[Jorge Andrés Vergara Ebratt]

Sorry, I hitted send instead of enter...

As I was saying, you can have both images in the server, and have them both in the HTML

1. img class="big" src="path/to/big

2. img class="small" src="path to small"

Then in the CSS you add

.small {display: none;}

and a media query for small screens

You can set the media query for the screen size you are going to make the change and just swap display none to the big one

[Andreas Kuhne]

To unsubscribe from this group and stop receiving emails from it, send an email to django-users...@googlegroups.com.

To post to this group, send email to django...@googlegroups.com.
Visit this group at http://groups.google.com/group/django-users.

To view this discussion on the web visit https://groups.google.com/d/msgid/django-users/CAAeX05F40WniWKStonxHO_Tysy0HA4wbmfeqEvjV86o6oqnFmQ%40mail.gmail.com.

For more options, visit https://groups.google.com/d/optout.

That's just the same solution as Bootstrap really. 

// Andréas

[Cal Leeming [iops.io]]

It really depends on what your end goal is.

tl;dr - the fastest fix for you will probably be to use CloudFlare polish [1]

Long answer:

Responsive images are fine, but useless on mobile devices if your original image is not mobile optimized (due to bandwidth/speed limitations on most networks, if not all networks), but you also don't want to be serving a mobile optimized image to desktop users or those with more bandwidth. Some networks will optimize automatically, but this is still hit and mess.

There's a couple of options.. 

* CloudFlare has some image optimisation as part of their free CDN offering [1]

* Compiling your UI elements/artwork into sprite sheets reduce the number of requests, which can give a dramatic speed increase [2]

* Knowing when to use JPGs vs PNGs (e.g. PNGs for UI elements, JPGs for heavy detail such as photos)

* Splitting your CDN requests over 4 different host names can speed things, due to the way most browsers handle concurrency (cdn1.images.example.com, cdn2.images.example.com etc)

Some things to note;

* In regards to SEO, sprite sheets shouldn't be used for content specific assets, e.g. if you have a page about bridges, and you have 4 images of bridges with filenames which relate to bridges, then you will get a bit higher score. But if you sprite those images, you won't reap the SEO benefits. Hence only use sprite sheets for UI and non content specific artwork.

* Lazy loading high quality images is another approach, e.g. you set the src/background-image to the super low quality version, then lazy load a higher quality one. This approach is questionable, and depends on whether your UI *really* needs artwork immediately in order to function.. and whether it will suffice using a few seconds of lower quality, waiting for the higher quality ones to load. Use with caution, this can get pretty hacky.

* If using responsive design rather than adaptive (there is a difference) [3] [4], then you need to carefully crop your master image to have a "safe zone" which scales accordingly with the layout. The safe zone is the area of the image that you always want to be displayed, everything outside of it being optional context if space permits. If using adaptive, you can crop your images to the specific dimensions required rather than rely on background-position/overflow/background-size trickery, but this is more work. There are also tools which will crop your image on demand [5] [6] but these do not work well with high performance sites and, in my personal opinion, are completely the wrong way to approach asset pipelining.

Gotta cut this post short as I need to run, but hope this helps.

Cal

[1] http://blog.cloudflare.com/introducing-polish-automatic-image-optimizati/

[2] https://github.com/Ensighten/spritesmith

[3] http://www.techrepublic.com/blog/web-designer/what-is-the-difference-between-responsive-vs-adaptive-web-design/

[4] http://teamtreehouse.com/library/build-a-responsive-website/introduction-to-responsive-web-design/fixed-fluid-adaptive-and-responsive-2

[5] https://github.com/jonasundderwolf/django-image-cropping

[6] https://github.com/littleweaver/django-daguerre

--

You received this message because you are subscribed to the Google Groups "Django users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to django-users...@googlegroups.com.
To post to this group, send email to django...@googlegroups.com.
Visit this group at http://groups.google.com/group/django-users.

To view this discussion on the web visit https://groups.google.com/d/msgid/django-users/71b23537-2264-4f44-9d67-841c6276f10b%40googlegroups.com.

[Patrick Beeson]

AListApart recently published a great article on responsive images: http://alistapart.com/article/responsive-images-in-practice

[Fred Stluka]

Right.  Very good article.

The gist is to use the new HTML5 "<picture>" and "<source>"
elements along with the "sizes" and "srcset" attributes of
"<img>", and perhaps the CSS3 "calc()" function to specify
multiple sizes of the same image, so the browser only
downloads the right one for the current screen size, all in
a way that falls back to slower but acceptable for older
browsers.

BTW, if you're willing to throw a little JavaScript into the mix,
and not limit yourself to just CSS, you can do truly amazing
things with RWD (Responsive Web Design).  I've been doing
it for about 14 years.  See, for example:
- http://bristle.com/RWD/BrightPanelsDemo/
Drag the window wider and narrower and watch the panels
completely re-configure themselves, nesting/un-nesting,
stacking/un-stacking, hiding/showing, etc.  Anything is
possible.

--Fred

---

Fred Stluka -- mailto:fr...@bristle.com -- http://bristle.com/~fred/
Bristle Software, Inc -- http://bristle.com -- Glad to be of service!
Open Source: Without walls and fences, we need no Windows or Gates.

---

--

You received this message because you are subscribed to the Google Groups "Django users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to django-users...@googlegroups.com.
To post to this group, send email to django...@googlegroups.com.
Visit this group at http://groups.google.com/group/django-users.

To view this discussion on the web visit https://groups.google.com/d/msgid/django-users/0ea0a557-8043-4bfa-bc2f-23c2561e2245%40googlegroups.com.