{"action":"created","issue":{"url":"https://api.github.com/repos/10up/Engineering-Best-Practices/issues/101","labels_url":"https://api.github.com/repos/10up/Engineering-Best-Practices/issues/101/labels{/name}","comments_url":"https://api.github.com/repos/10up/Engineering-Best-Practices/issues/101/comments","events_url":"https://api.github.com/repos/10up/Engineering-Best-Practices/issues/101/events","html_url":"https://github.com/10up/Engineering-Best-Practices/issues/101","id":103094344,"number":101,"title":"Images: svg, responsive images, lazy loading","user":{"login":"zrothauser","id":4950114,"avatar_url":"https://avatars.githubusercontent.com/u/4950114?v=3","gravatar_id":"","url":"https://api.github.com/users/zrothauser","html_url":"https://github.com/zrothauser","followers_url":"https://api.github.com/users/zrothauser/followers","following_url":"https://api.github.com/users/zrothauser/following{/other_user}","gists_url":"https://api.github.com/users/zrothauser/gists{/gist_id}","starred_url":"https://api.github.com/users/zrothauser/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/zrothauser/subscriptions","organizations_url":"https://api.github.com/users/zrothauser/orgs","repos_url":"https://api.github.com/users/zrothauser/repos","events_url":"https://api.github.com/users/zrothauser/events{/privacy}","received_events_url":"https://api.github.com/users/zrothauser/received_events","type":"User","site_admin":false},"labels":[],"state":"closed","locked":false,"assignee":null,"milestone":null,"comments":5,"created_at":"2015-08-25T19:04:55Z","updated_at":"2015-08-27T14:17:46Z","closed_at":"2015-08-27T03:01:12Z","body":"Image handling is a subject that has become more complex recently, as responsive images are now more widely supported and are encouraged to support newer retina devices and to save bandwidth for mobile users. I think it would be worthwhile to have a section under Markup that deals with how we should implement images on sites. \r\n\r\nI have a very rough draft here on what this section could include, and I'd like to get some more input on this before creating a pull request:\r\n\r\n## Responsive Images\r\n10up recommends the use of SVG (with an icon font fallback as needed) to serve high-resolution assets at the smallest file size possible. When using SVG you should always provide a fallback such as a PNG image for browsers that do not support vector graphics. [this sentence was moved from Progressive Enhancement section]\r\n\r\nFor user-uploaded content images, responsive images should be used in order to serve both high-resolution images to high-density devices and to avoid sending unneeded data to mobile devices. To follow the latest standards, responsive images should be served with `srcset` rather than `<picture>`, as long as the same image is being served at multiple sizes. If different images are being served at different resolutions, then `<picture>` should be used. \r\n\r\nAt this time, not even all current browsers don't support the complete `srcset` syntax, so the Picturefill polyfill is recommended to support the standard syntax. This is an exception to our guideline of using only the polyfills for features that are functionally critical to the site. \r\n\r\nAn example is shown below:\r\nhttps://gist.github.com/zrothauser/a8e27f68d4ccdfb9881c\r\n\r\nwhich would result in a syntax of:\r\nhttps://gist.github.com/zrothauser/a58d1d3cf4cc3f285a85\r\n\r\n## Lazy Loading\r\nIn order to save on bandwidth, lazy loading images is recommended for archive pages or any page with a series of images. \r\n[elaborate on this? or do we need this section?]\r\n\r\n## Image Sizes\r\nThe fewest image sizes needed should be defined with `add_image_size` to avoid adding too much time to the upload process and to avoid using too much server space. However, most images should include a doubled size (e.g., `'home-thumbnail-double'` to go with `'home-thumbnail'`) to supply a high-density image for `srcset` images. \r\n\r\n[do we want to recommend Photon from Jetpack on non-VIP sites? It's included on VIP]\r\n\r\n[are there any other subsections we could add to this?]\r\n"},"comment":{"url":"https://api.github.com/repos/10up/Engineering-Best-Practices/issues/comments/135448927","html_url":"https://github.com/10up/Engineering-Best-Practices/issues/101#issuecomment-135448927","issue_url":"https://api.github.com/repos/10up/Engineering-Best-Practices/issues/101","id":135448927,"user":{"login":"tlovett1","id":1844351,"avatar_url":"https://avatars.githubusercontent.com/u/1844351?v=3","gravatar_id":"","url":"https://api.github.com/users/tlovett1","html_url":"https://github.com/tlovett1","followers_url":"https://api.github.com/users/tlovett1/followers","following_url":"https://api.github.com/users/tlovett1/following{/other_user}","gists_url":"https://api.github.com/users/tlovett1/gists{/gist_id}","starred_url":"https://api.github.com/users/tlovett1/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/tlovett1/subscriptions","organizations_url":"https://api.github.com/users/tlovett1/orgs","repos_url":"https://api.github.com/users/tlovett1/repos","events_url":"https://api.github.com/users/tlovett1/events{/privacy}","received_events_url":"https://api.github.com/users/tlovett1/received_events","type":"User","site_admin":false},"created_at":"2015-08-27T14:17:46Z","updated_at":"2015-08-27T14:17:46Z","body":"I don't want to recommend Jetpack Photon since I think we should remain agnostic there.\r\n\r\nWould love to get @tddewey's feedback on all of this.\r\n\r\n@zrothauser this is a great start!"}}