{"action":"created","issue":{"url":"https://api.github.com/repos/tmpworldwide/tmpworldwide.github.io/issues/27","repository_url":"https://api.github.com/repos/tmpworldwide/tmpworldwide.github.io","labels_url":"https://api.github.com/repos/tmpworldwide/tmpworldwide.github.io/issues/27/labels{/name}","comments_url":"https://api.github.com/repos/tmpworldwide/tmpworldwide.github.io/issues/27/comments","events_url":"https://api.github.com/repos/tmpworldwide/tmpworldwide.github.io/issues/27/events","html_url":"https://github.com/tmpworldwide/tmpworldwide.github.io/issues/27","id":164613946,"number":27,"title":"Image Implementation","user":{"login":"michaelspellacy","id":468009,"avatar_url":"https://avatars.githubusercontent.com/u/468009?v=3","gravatar_id":"","url":"https://api.github.com/users/michaelspellacy","html_url":"https://github.com/michaelspellacy","followers_url":"https://api.github.com/users/michaelspellacy/followers","following_url":"https://api.github.com/users/michaelspellacy/following{/other_user}","gists_url":"https://api.github.com/users/michaelspellacy/gists{/gist_id}","starred_url":"https://api.github.com/users/michaelspellacy/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/michaelspellacy/subscriptions","organizations_url":"https://api.github.com/users/michaelspellacy/orgs","repos_url":"https://api.github.com/users/michaelspellacy/repos","events_url":"https://api.github.com/users/michaelspellacy/events{/privacy}","received_events_url":"https://api.github.com/users/michaelspellacy/received_events","type":"User","site_admin":false},"labels":[{"url":"https://api.github.com/repos/tmpworldwide/tmpworldwide.github.io/labels/question","name":"question","color":"cc317c"}],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":4,"created_at":"2016-07-08T20:51:02Z","updated_at":"2016-07-08T22:40:48Z","closed_at":null,"body":"Gang,\r\n\r\nWe all know that images contribute to most of a page’s overall weight (up to 70%). While we all should be optimizing our images as much as possible, I was just wondering what common techniques you may be using to implement inline images (img)? Bit of an open discussion right now, but the hope is to take common design scenarios (like those huge banners) and try to ensure we are all using the same technique when implementing them, etc.\r\n"},"comment":{"url":"https://api.github.com/repos/tmpworldwide/tmpworldwide.github.io/issues/comments/231489645","html_url":"https://github.com/tmpworldwide/tmpworldwide.github.io/issues/27#issuecomment-231489645","issue_url":"https://api.github.com/repos/tmpworldwide/tmpworldwide.github.io/issues/27","id":231489645,"user":{"login":"michaelspellacy","id":468009,"avatar_url":"https://avatars.githubusercontent.com/u/468009?v=3","gravatar_id":"","url":"https://api.github.com/users/michaelspellacy","html_url":"https://github.com/michaelspellacy","followers_url":"https://api.github.com/users/michaelspellacy/followers","following_url":"https://api.github.com/users/michaelspellacy/following{/other_user}","gists_url":"https://api.github.com/users/michaelspellacy/gists{/gist_id}","starred_url":"https://api.github.com/users/michaelspellacy/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/michaelspellacy/subscriptions","organizations_url":"https://api.github.com/users/michaelspellacy/orgs","repos_url":"https://api.github.com/users/michaelspellacy/repos","events_url":"https://api.github.com/users/michaelspellacy/events{/privacy}","received_events_url":"https://api.github.com/users/michaelspellacy/received_events","type":"User","site_admin":false},"created_at":"2016-07-08T22:40:47Z","updated_at":"2016-07-08T22:40:47Z","body":"@scampbell44  I also prefer this method and believe we should be using it as much as possible moving forward. There are some things to keep in mind about it, though. Jason Grigsby has some great things to say about each use case that you should all check out:\r\n\r\nhttp://blog.cloudfour.com/dont-use-picture-most-of-the-time/\r\n\r\nIn a nutshell, only use `<picture>` in instances where art direction is a requirement. For example, on our Boeing careers site, we have an instance where two very different images are being used. This is not a case where images are identical, but simply scaled down and used with different breakpoints:\r\n\r\nhttps://tbcdn.talentbrew.com/company/185/v1_0/img/header-home-page.jpg\r\nhttps://tbcdn.talentbrew.com/company/185/v1_0/img/header-home-page-mobile.jpg \r\n\r\nPerfect uses case for `<picture>` element.\r\n\r\nIn scenarios where images are *identical*, but scaled down to conserve bandwidth, as mentioned above, `srcset` and `sizes` are the way to go. On our corporate site, we have the following tow images:\r\n\r\nhttps://tbcdn.talentbrew.com/company/3401/v1_0/img/workinghere/career/banner-copywriter-sm.jpg\r\nhttps://tbcdn.talentbrew.com/company/3401/v1_0/img/workinghere/career/banner-copywriter-lg.jpg\r\n\r\nHere is the code:\r\n\r\n```\r\n<img src=\"https://tbcdn.talentbrew.com/company/3401/v1_0/img/workinghere/career/banner-copywriter-sm.jpg\" srcset=\"https://tbcdn.talentbrew.com/company/3401/v1_0/img/workinghere/career/banner-copywriter-sm.jpg 982w, https://tbcdn.talentbrew.com/company/3401/v1_0/img/workinghere/career/banner-copywriter-lg.jpg 2000w\" alt=\"\">\r\n```\r\n\r\nYou must \"unlearn what you have learned\" regarding responsive and images here. It is a  more adaptive solution. With srcset, we *suggest* which images for the browser to use and the browser then makes the best choice it can based on various conditions of the viewing enviornment. Browsers are even smart enough to choose the best image based on bandwidth speed. How cool is that? I'm willing to bet that most design scenarios we encounter would fall under our team using srcset instead of picture. \r\n\r\n## Support\r\n\r\nhttp://caniuse.com/#feat=srcset\r\nhttp://caniuse.com/#feat=picture\r\n\r\nAs for as the polyfill , we are nearly at a point where we can drop it. On tmp.com, I opted to not use it, as the fallback image, https://tbcdn.talentbrew.com/company/3401/v1_0/img/workinghere/career/banner-copywriter-sm.jpg. was adequate enough for IE11 and Opera Mini users. I would only use in cases where it was a necessity, but if you think you can get away with using fallback only, then definitely go for it. :-)"}}
{"actor":{"display_login":"michaelspellacy"}}