{"id":6211,"date":"2017-01-04T13:08:21","date_gmt":"2017-01-04T13:08:21","guid":{"rendered":"http:\/\/dev.adambowie.com\/?p=6211"},"modified":"2017-01-04T13:40:14","modified_gmt":"2017-01-04T13:40:14","slug":"image-posting-test","status":"publish","type":"post","link":"https:\/\/dev.adambowie.com\/blog\/2017\/01\/image-posting-test\/","title":{"rendered":"Image Posting – A Bit More Optimised"},"content":{"rendered":"

Yesterday<\/a> I mentioned that I was struggling with embedding properly responsive images that will go lovely and large if you have a nice big screen, but only download a small image if that’s all I need. Added to which, I use Flickr to host all my images for me.<\/p>\n

Thanks to Emily in the comments<\/a> for alerting me to srcset<\/code> as being the way to do this properly.<\/p>\n

While it doesn’t look like there’s a handy WordPress Flickr-embedder that will do this easily, you can spend a bit of time getting details of the URLs of each sized image, and put together some code that does the trick. <\/p>\n

Here’s an example. If you’re looking at this on a mobile phone, you might only be seeing the 320px image. But on a lovely large or retina display, you may be seeing a 2048px image!<\/p>\n

(At least I hope that’s the case)<\/p>\n

\"Across<\/a><\/p>\n

Here’s the code I used to do this:<\/p>\n

<a href=\"https:\/\/www.flickr.com\/photos\/adambowie\/31836754726\/\" title=\"Across the rooftops at dawn\"><img src=\"https:\/\/c1.staticflickr.com\/1\/427\/31836754726_cbbe667b3e_n_d.jpg\" srcset=\"https:\/\/c1.staticflickr.com\/1\/427\/31836754726_cbbe667b3e_z_d.jpg 640w, https:\/\/c1.staticflickr.com\/1\/427\/31836754726_cbbe667b3e_c_d.jpg 800w, https:\/\/c1.staticflickr.com\/1\/427\/31836754726_cbbe667b3e_b_d.jpg 1024w,
\nhttps:\/\/c1.staticflickr.com\/1\/427\/31836754726_d378ecf063_h_d.jpg 1600w, https:\/\/c1.staticflickr.com\/1\/427\/31836754726_f37b9c6b4a_k_d.jpg 2048w\" alt=\"Across the rooftops at dawn\"><\/a><\/code><\/p><\/blockquote>\n

Essentially, the first image, 31836754726_cbbe667b3e_n_d.jpg<\/code> in my case, is the 320px image on Flickr. Then inside srcset<\/code> are some<\/em> of the other different sizes available. I probably could reduce this list a little, since you do need to get the precise Flickr URLs for each size from the download page for the photo.<\/p>\n

Still, I think this all works, and so despite being a little bit more of a hassle to embed a picture than previously, I’ll try to do something like this in the future. Then I’ll see if Google likes it! <\/p>\n","protected":false},"excerpt":{"rendered":"

Yesterday I mentioned that I was struggling with embedding properly responsive images that will go lovely and large if you have a nice big screen, but only download a small image if that’s all I need. Added to which, I use Flickr to host all my images for me. Thanks to Emily in the comments […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[8],"tags":[],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/dev.adambowie.com\/blog\/wp-json\/wp\/v2\/posts\/6211"}],"collection":[{"href":"https:\/\/dev.adambowie.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/dev.adambowie.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/dev.adambowie.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/dev.adambowie.com\/blog\/wp-json\/wp\/v2\/comments?post=6211"}],"version-history":[{"count":4,"href":"https:\/\/dev.adambowie.com\/blog\/wp-json\/wp\/v2\/posts\/6211\/revisions"}],"predecessor-version":[{"id":6216,"href":"https:\/\/dev.adambowie.com\/blog\/wp-json\/wp\/v2\/posts\/6211\/revisions\/6216"}],"wp:attachment":[{"href":"https:\/\/dev.adambowie.com\/blog\/wp-json\/wp\/v2\/media?parent=6211"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dev.adambowie.com\/blog\/wp-json\/wp\/v2\/categories?post=6211"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dev.adambowie.com\/blog\/wp-json\/wp\/v2\/tags?post=6211"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}