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 On Thu, Nov 20, 2014 at 6:05 AM, ThomasTheDjangoFan < stefan.eichholz.ber...@googlemail.com> 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+unsubscr...@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/71b23537-2264-4f44-9d67-841c6276f10b%40googlegroups.com > <https://groups.google.com/d/msgid/django-users/71b23537-2264-4f44-9d67-841c6276f10b%40googlegroups.com?utm_medium=email&utm_source=footer> > . > For more options, visit https://groups.google.com/d/optout. > -- 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+unsubscr...@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/CAHKQagFo5CoiAzD9GU-UQMhkPqkfPu0_DEdw_ppuGObCa9ZkqA%40mail.gmail.com. For more options, visit https://groups.google.com/d/optout.
