{"id":16697,"date":"2012-04-03T08:31:49","date_gmt":"2012-04-03T15:31:49","guid":{"rendered":"http:\/\/css-tricks.com\/?p=16697"},"modified":"2012-04-03T08:31:49","modified_gmt":"2012-04-03T15:31:49","slug":"foresight-js","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/foresight-js\/","title":{"rendered":"Foresight.js"},"content":{"rendered":"

Speaking of bandwidth media queries<\/a>, this project by Adam D. Bradley looks promising:<\/p>\n

Foresight.js gives webpages the ability to tell if the user’s device is capable of viewing high-resolution images (such as the 3rd generation iPad) before the image is requested from the server. Additionally, it judges if the user’s device currently has a fast enough network connection for high-resolution images. Depending on device display and network connectivity, foresight.js will request the appropriate image for the webpage.<\/p><\/blockquote>\n","protected":false},"excerpt":{"rendered":"

Speaking of bandwidth media queries, this project by Adam D. Bradley looks promising: Foresight.js gives webpages the ability to tell if the user’s device is capable of viewing high-resolution images (such as the 3rd generation iPad) before the image is requested from the server. Additionally, it judges if the user’s device currently has a fast […]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","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":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":[]},"categories":[17],"tags":[],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":330607,"url":"https:\/\/css-tricks.com\/optimize-images-according-to-network-and-device-constraints-in-react\/","url_meta":{"origin":16697,"position":0},"title":"Optimize Images According to Network and Device Constraints in React","date":"December 10, 2020","format":false,"excerpt":"Connectivity has evolved beyond recognition since the beginning of the internet. We are lightyears past dial up, these days, and can watch a video in high resolution on our smartphone while being connected to a mobile network. But not all mobile connections are created equal - older generation networks (3G,\u2026","rel":"","context":"In "Sponsored"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/12\/3G-Network-React-Images.png?fit=1200%2C675&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":16932,"url":"https:\/\/css-tricks.com\/which-responsive-images-solution-should-you-use\/","url_meta":{"origin":16697,"position":1},"title":"Which responsive images solution should you use?","date":"May 11, 2012","format":false,"excerpt":"There are a bunch of techniques going around for dealing with responsive images lately. That is, solutions to help us serve the right image for the occasion (e.g. size of screen and bandwidth available). They all do things a bit differently. To keep track, Christopher Schmitt and I have created\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2012\/05\/difimages.jpg?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":16735,"url":"https:\/\/css-tricks.com\/on-responsive-images\/","url_meta":{"origin":16697,"position":2},"title":"On Responsive Images","date":"April 6, 2012","format":false,"excerpt":"There are three ways we can go about dealing with responsive s : 1) a new format 2) a new syntax 3) rely on existing hacks.","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":351259,"url":"https:\/\/css-tricks.com\/improve-largest-contentful-paint-lcp-on-your-website-with-ease\/","url_meta":{"origin":16697,"position":3},"title":"Improve Largest Contentful Paint (LCP) on Your Website With Ease","date":"September 9, 2021","format":false,"excerpt":"Optimizing the user experience you offer on your website is essential for the success of any online business. Google does use different user experience-related metrics to rank web pages for SEO and has continued to provide multiple tools to measure and improve web performance. In its recent attempt to simplify\u2026","rel":"","context":"In "Sponsored"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/09\/LCP-Blog-Banner.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":319964,"url":"https:\/\/css-tricks.com\/a-complete-guide-to-css-media-queries\/","url_meta":{"origin":16697,"position":4},"title":"A Complete Guide to CSS Media Queries","date":"October 2, 2020","format":false,"excerpt":"Media queries can modify the appearance (and even behavior) of a website or app based on a matched set of conditions about the user's device, browser or system settings.","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/10\/guide-media-queries.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":308477,"url":"https:\/\/css-tricks.com\/lets-make-one-of-those-fancy-scrolling-animations-used-on-apple-product-pages\/","url_meta":{"origin":16697,"position":5},"title":"Let’s Make One of Those Fancy Scrolling Animations Used on Apple Product Pages","date":"May 22, 2020","format":false,"excerpt":"Apple is well-known for the sleek animations on their product pages. For example, as you scroll down the page products may slide into view, MacBooks fold open and iPhones spin, all while showing off the hardware, demonstrating the software and telling interactive stories of how the products are used. Just\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/05\/airpods-pro.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/16697"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"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=16697"}],"version-history":[{"count":1,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/16697\/revisions"}],"predecessor-version":[{"id":16698,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/16697\/revisions\/16698"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=16697"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=16697"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=16697"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}