{"id":205262,"date":"2015-07-21T06:47:34","date_gmt":"2015-07-21T13:47:34","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=205262"},"modified":"2015-07-21T06:47:34","modified_gmt":"2015-07-21T13:47:34","slug":"141-getting-the-images-and-numbers-for-responsive-images","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/video-screencasts\/141-getting-the-images-and-numbers-for-responsive-images\/","title":{"rendered":"#141: Getting the Images and Numbers for Responsive Images"},"content":{"rendered":"

You know about<\/em> responsive images. It’s about the image syntax in HTML. If you give it the right information in the right syntax, you can get the browser to download just exactly the right image it needs, without giving it too much or too little image data. It’s fantastic for performance. <\/p>\n

You know that to get the most out of responsive images you should polyfill it with Picturefill<\/a>. You download it, you include it on your page.<\/p>\n

You have a plan. You know what you want your page to like at certain media query breakpoints. You have it all mocked up in Sketch or Photoshop. <\/p>\n

You know what the syntax for responsive images is like. You’ll need something like the srcset\/sizes syntax to describe your situation.<\/p>\n

<img \r\n  sizes=\"(min-width: 700px) 468px, 90vw\"\r\n  srcset=\"\r\n    sunset.jpg 468w,\r\n    sunset@1.5x.jpg 704w,\r\n    sunset@2x.jpg 938w\"\r\n  alt=\"Sunset\"><\/code><\/pre>\n
This screencast is about all that stuff. It’s about tying it all together. It’s about connecting together the design workflow and the software used there with the front end workflow and the syntax used there. You need to know how to output the images in the formats and sizes you need. You need to know when you’ll get quality output and when you won’t. You need to know how to measure those images and use the right numbers where. You need to know how to connect your layout choices and media queries with those numbers. It’s all in here.<\/p>\n
See the Pen Demo for Screencast on Getting the Numbers for Responsive Images<\/a> by Chris Coyier (@chriscoyier<\/a>) on CodePen<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"
You know about responsive images. It’s about the image syntax in HTML. If you give it the right information in the right syntax, you can get the browser to download just exactly the right image it needs, without giving it too much or too little image data. It’s fantastic for performance. You know that to […]<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":1283,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"video-single.php","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":""},"tags":[],"acf":[],"jetpack-related-posts":[{"id":256028,"url":"https:\/\/css-tricks.com\/video-screencasts\/155-responsive-images-wordpress-cloudinary\/","url_meta":{"origin":205262,"position":0},"title":"#155: Responsive Images, WordPress, and Cloudinary","date":"June 22, 2017","format":false,"excerpt":"Eric Portis joins me to dig into the world of responsive images. We start at the basics. Responsive images are specifically images in HTML and exist because of a desire for better performance. Images are probably the biggest culprit in the overall weight of websites. If we can avoid sending\u2026","rel":"","context":"In \"cloudinary\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":306715,"url":"https:\/\/css-tricks.com\/video-screencasts\/183-art-directing-images-the-picture-element-and-image-cdns\/","url_meta":{"origin":205262,"position":1},"title":"#183: Art Directing Images, the Picture Element, and Image CDNs","date":"April 21, 2020","format":false,"excerpt":"It's a bonafide phenomenon! I'm talking about the idea of image hosting services that allow you to manipulate the URL to the image in order to transform it. In other words, if you need multiple copies of an image in order to do justice for the responsive images syntax, you\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/04\/thumb.png?fit=1200%2C675&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":196150,"url":"https:\/\/css-tricks.com\/almanac\/properties\/b\/background-size\/","url_meta":{"origin":205262,"position":2},"title":"background-size","date":"February 17, 2015","format":false,"excerpt":"The background-size property in CSS is one of the most useful \u2014 and most complex \u2014 of the background properties. There are many variations and different syntaxes you can use for this property, all of which have different use cases. Here\u2019s a basic example: html { background: url(greatimage.jpg); background-size: 300px\u2026","rel":"","context":"With 9 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":372340,"url":"https:\/\/css-tricks.com\/almanac\/properties\/g\/grid\/","url_meta":{"origin":205262,"position":3},"title":"grid","date":"August 8, 2022","format":false,"excerpt":"The grid CSS property is a shorthand that allows you to set all the implicit and the explicit grid properties in a single declaration. .grid-container { display: grid; grid: auto-flow dense \/ repeat(5, 150px); } The above example sets grid-template-columns to repeat(5, 150px) and grid-auto-flow to row dense which creates\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/12\/css-tricks-logo-gradient-outline.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":375434,"url":"https:\/\/css-tricks.com\/almanac\/properties\/b\/border-image-repeat\/","url_meta":{"origin":205262,"position":4},"title":"border-image-repeat","date":"December 6, 2022","format":false,"excerpt":"The CSS border-image-repeat property controls how a border image is repeated to fill the outer edges of an element. It can also control the center of an element\u2019s background when border-image-slice is set to fill. .container { border-style: ridge; border-width: 3rem; border-image-source: url('path\/to\/image.jpg'); border-image-slice: 70; border-image-repeat: repeat; } CodePen Embed\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/12\/css-tricks-logo-gradient-outline.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":189034,"url":"https:\/\/css-tricks.com\/lodge\/svg\/31-can-put-raster-images-svg\/","url_meta":{"origin":205262,"position":5},"title":"31: You Can Put Raster Images in SVG","date":"November 30, 2014","format":false,"excerpt":"There probably isn't a tremendously huge use-case for this, other than the obvious: you need a raster graphic amongst other things in a larger SVG design. That way it moves and scales with the rest of the elements. The syntax is: You'd probably never drop a raster graphic in an\u2026","rel":"","context":"With 4 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/205262"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=205262"}],"version-history":[{"count":3,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/205262\/revisions"}],"predecessor-version":[{"id":205307,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/205262\/revisions\/205307"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/1283"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=205262"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=205262"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}