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:fred@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.
On 11/20/14 8:55 AM, Patrick Beeson wrote:
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:fred@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.
AListApart recently published a great article on responsive images: http://alistapart.com/article/responsive-images-in-practice--
On Thursday, November 20, 2014 1:05:45 AM UTC-5, ThomasTheDjangoFan wrote: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
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-users@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.
For more options, visit https://groups.google.com/d/optout.
No comments:
Post a Comment