Research decreasing load time for large images

[iuloshi]

On landing page

[iuloshi]

Resources:

• http://css-tricks.com/which-responsive-images-solution-should-you-use/
• http://blog.cloudfour.com/8-guidelines-and-1-rule-for-responsive-images/
• https://developers.google.com/speed/docs/best-practices/payload#CompressImages

Strategies

• Setting fabric photos / figures as background images in CSS then setting media queries.

Compressive images

• http://filamentgroup.com/lab/rwd_img_compression/

Adaptive images

• http://adaptive-images.com/
• PHP file which intelligently serves (and creates if need be) images of the appropriate size for the screen width.
• Works well with legacy content (no changes to HTML necessary...N/A to NMG site)

Changing the img markup

• HiSRC: jQuery plugin where you put higher resolution images as data-attributes in img tag
• Sencha.IO: requires prefixing the src attribute
• If the technique requires at any point the src of the image to be missing or link to a transparent GIF (or the like), that's not semantic.

Art direction / cropping of images at different breakpoints

• Picturefill

[iuloshi]

Research media query detection of user's bandwidth and internet speed, to help determine which version/resolution of the image assets to load.

[iuloshi]

• Test popover collar images on large displays (set min-width: 100%, saved at 150ppi to size, 300px x 800x)
• Optimize Lookbook hero image, lookbook_01.jpg, currently ~400kb