Comparison of leading Responsive and Adaptive Image serving techniques that are relevant to a CMS environment, with an implementation example of Adaptive-Images.com within Joomla!

1. RESPONSIVE IMAGES
IN A CMS
IS SENDING ALL PIXELS TO ALL DEVICES
THE "RIGHT ANSWER"?
June, 2014Duke Speer J and Beyond

2. THIS TALK IS NOT ABOUT
MAX-WIDTH: 100%;
June, 2014Duke Speer J and Beyond

3. WHY LISTEN TO THIS GUY?
NO REASON! – JOOMLA! SINCE 2008
JOOMLA! TRADEMARK / LICENSING TEAM
GOVERNANCE WORKING GROUP
MARKETING TEAM
JRD TEAM
June, 2014Duke Speer J and Beyond

4. June, 2014Duke Speer J and Beyond

5. June, 2014Duke Speer J and Beyond

6. PLAN
THE TERMINOLOGY
SET THE STAGE - THE NEED FOR SPEED
THE CMS CONTEXT
THE RESPONSIVE + ADAPTIVE APPROACH
June, 2014Duke Speer J and Beyond

7. RWD
June, 2014Duke Speer J and Beyond

8. RESPONSIVE TO WHAT?
June, 2014Duke Speer J and Beyond

9. “RESPONSIVE” OF RWD =
1. FLUID GRID
2. RESPONSIVE IMAGES
3. LAYOUT BREAKPOINTS
June, 2014Duke Speer J and Beyond

10. 1. FLUID GRID
% EM/REM
June, 2014Duke Speer J and Beyond

11. 2. RESPONSIVE IMAGES
.IMG {
MAX-WIDTH: 100%;
}
June, 2014Duke Speer J and Beyond

12. 3. LAYOUT BREAKPOINTS
MEDIA QUERIES
DEFAULT FOR DUMB BROWSERS
IN DUMB PHONES – SMALL FILE
- UNDER 641 PX
- UNDER 1025 PX
- OVER 1024 PX
June, 2014Duke Speer
Joomla and
Beyond 14

13. MEDIA QUERIES
.CONTAINER {
BACKGROUND-IMAGE:URL(“PIC.JPG");
}
@MEDIA ALL AND (MAX-WIDTH: 600PX) {
.CONTAINER {
BACKGROUND-IMAGE:URL(“PIC-SM.JPG");
}
}
June, 2014Duke Speer
Joomla and
Beyond 14

14. MEDIA QUERIES
BACKGROUND V. FOREGROUND
MEDIA QUERY FOR IMAGES
IN ARTICLES AND BLOGS?
June, 2014Duke Speer
Joomla and
Beyond 14

15. THIS TALK IS NOT ABOUT
MAX-WIDTH: 100%;
June, 2014Duke Speer J and Beyond

16. THE NEED FOR SPEED
June, 2014Duke Speer J and Beyond

17. HE NEED FOR SPEED
June, 2014Duke Speer

18. E NEED FOR SPEED
HTTP://BLOG.KISSMETRICS.COM/WP-
ONTENT/UPLOADS/2011/04/LOADING-TIME.PDF
June, 2014Duke Speer

19. ED FOR SPEED
HTTP://BLOG.KISSMETRICS.COM/WP-
NT/UPLOADS/2011/04/LOADING-TIME.PDF
June, 2014Duke Speer

20. THE NEED FOR SPEED
HTTP://BLOG.KISSMETRICS.COM/WP-
CONTENT/UPLOADS/2011/04/LOADING-TIME.PDF
June, 2014Duke Speer J and Beyond

21. THE MAIN CONCERNS
DRAWN HEAVILY FROM:
HTTP://CSS-TRICKS.COM/WHICH-
RESPONSIVE-IMAGES-SOLUTION-SHOULD-
YOU-USE/
HTTPS://DOCS.GOOGLE.COM/SPREADSHEE
T/CCC?KEY=0AL0LI17FOL9DDDGXTFVORZF
PV3VCDHK2NTBMDVI2OXC#GID=0
June, 2014Duke Speer J and Beyond

22. VALID SUPPORTED HTML?
June, 2014Duke Speer J and Beyond

23. VALID SUPPORTED HTML?
<PICTURE ALT="DESCRIPTION">
<SOURCE SRC="SMALL.JPG">
<SOURCE SRC="MEDIUM.JPG" MEDIA="(MIN-WIDTH:
400PX)">
<SOURCE SRC="LARGE.JPG" MEDIA="(MIN-WIDTH: 800PX)">
</PICTURE>
<NOSCRIPT><IMG SRC=…></NOSCRIPT>
PICTUREFILL
June, 2014Duke Speer J and Beyond

24. JAVASCRIPT DEPENDENCY?
<PICTURE>
…
</PICTURE>
<NOSCRIPT><IMG SRC=…></NOSCRIPT>
PICTUREFILL
June, 2014Duke Speer J and Beyond

25. THIRD PARTY CDN?
SENCHA.IO
*REQUIRES IMG TAG ADJUSTMENT
June, 2014Duke Speer J and Beyond

26. SERVER-SIDE /
BROWSER SNIFFING?
WURFL DATABASE
WIRELESS UNIVERSAL RESOURCE FILE
3RD PARTY SERVICES
DEVICE ATLAS CLOUD, ET AL
June, 2014Duke Speer J and Beyond

27. BANDWIDTH TESTING?
FORESIGHT.JS (& HISRC)
June, 2014Duke Speer J and Beyond

28. CHANGING MARKUP / VIEWS?
<IMG SRC="200X100.PNG"
DATA-1X="400X200.PNG"
DATA-2X="800X400.PNG">
HISRC
June, 2014Duke Speer J and Beyond

29. ART DIRECTION?
June, 2014Duke Speer J and Beyond

30. June, 2014Duke Speer J and Beyond
24 SOLUTIONS – REALLY?

31. June, 2014Duke Speer J and Beyond
24 SOLUTIONS – REALLY?

32. THE CMS CONTEXT
RECONSTRUCTING THE IMAGE TAG?
YES:
HTTP://ARCHIVE.KEIRWHITAKER.COM/ARCHIVE
/AUTOMATIC-RESPONSIVE-IMAGES-IN-
WORDPRESS/
1000’S OF LEGACY ARTICLES
NO:
HTTP://ADAPTIVE-IMAGES.COM
June, 2014Duke Speer J and Beyond

33. LEGACY CONTENT?
June, 2014Duke Speer J and Beyond

34. ADAPTIVE TO THE RESCUE?
MATTHEW WILCOX
ONE HTACCESS FILE
ONE PHP FILE
A SINGLE LINE OF JAVASCRIPT
ADAPTIVE-IMAGES.COM
June, 2014Duke Speer J and Beyond

35. INSERT IN .HTACCESS
<IFMODULE MOD_REWRITE.C>
OPTIONS +FOLLOWSYMLINKS
REWRITEENGINE ON
# ADAPTIVE-IMAGES ----------------------------------------
# ADD ANY DIRECTORIES YOU WISH TO OMIT ON A NEW LINE, AS FOLLOWS:
# REWRITECOND %{REQUEST_URI} !SOME-DIRECTORY
REWRITECOND %{REQUEST_URI} !TEMPLATES
REWRITECOND %{REQUEST_URI} !MEDIA
# SEND ANY GIF, JPG, OR PNG REQUEST THAT IS NOT STORED INSIDE ONE OF THE ABOVE DIRECTORIES
# TO ADAPTIVE-IMAGES.PHP SO WE CAN SELECT APPROPRIATELY SIZED VERSIONS
REWRITERULE .(?:JPE?G|GIF|PNG)$ ADAPTIVE-IMAGES.PHP
# END ADAPTIVE-IMAGES ----------------------------------------
</IFMODULE>
June, 2014Duke Speer J and Beyond

36. NGINX: VIRTUAL HOST CFG
INSERT INSIDE SERVER BLOCK:
LOCATION ASSETS {
}
LOCATION AI-CACHE {
}
LOCATION / {
REWRITE .(?:JPE?G|GIF|PNG)$ /ADAPTIVE-IMAGES.PHP;
}
June, 2014Duke Speer J and Beyond

37. SET SETTINGS IN PHP FILE
/* CONFIG ------------------------------ */
$RESOLUTIONS = ARRAY(1382, 992, 768, 480); // THE RESOLUTION BREAK-POINTS TO USE (SCREEN
WIDTHS, IN PIXELS)
$CACHE_PATH = "AI-CACHE"; // WHERE TO STORE THE GENERATED RE-SIZED IMAGES. SPECIFY FROM
YOUR DOCUMENT ROOT!
$JPG_QUALITY = 80; // THE QUALITY OF ANY GENERATED JPGS ON A SCALE OF 0 TO 100
$SHARPEN = TRUE; // SHRINKING IMAGES CAN BLUR DETAILS, PERFORM A SHARPEN ON RE-SCALED
IMAGES?
$WATCH_CACHE = TRUE; // CHECK THAT THE ADAPTED IMAGE ISN'T STALE (ENSURES UPDATED SOURCE
IMAGES ARE RE-CACHED)
$BROWSER_CACHE = 60*60*24*7; // HOW LONG THE BROWSER CACHE SHOULD LAST (SECONDS,
MINUTES, HOURS, DAYS. 7DAYS BY DEFAULT)
/* END CONFIG ------ DON'T EDIT ANYTHING AFTER THIS LINE … -------------- */
June, 2014Duke Speer J and Beyond

38. INSERT JS IN <HEAD>*
<SCRIPT>DOCUMENT.COOKIE='RESOLUTION='
+MATH.MAX(SCREEN.WIDTH,SCREEN.HEIGHT)+("DEVICEPIXELRA
TIO" IN WINDOW ? ","+DEVICEPIXELRATIO : ",1")+';
PATH=/';</SCRIPT>
*MUST BE FIRST JAVASCRIPT EXECUTED IN HEAD.
June, 2014Duke Speer J and Beyond

39. LOW MAINTENANCE
WORKS WITH APACHE AND NGINX
/AI-CACHE CLEANOUT
June, 2014Duke Speer J and Beyond

40. QUESTIONS
DUKE.SPEER@COMMUNITY.JOOMLA.ORG
@DUKE3D
June, 2014Duke Speer J and Beyond