{"id":19695,"date":"2013-01-02T11:42:00","date_gmt":"2013-01-02T18:42:00","guid":{"rendered":"http:\/\/css-tricks.com\/?p=19695"},"modified":"2013-01-02T11:42:00","modified_gmt":"2013-01-02T18:42:00","slug":"progressive-jpgs-a-new-best-practice","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/progressive-jpgs-a-new-best-practice\/","title":{"rendered":"Progressive JPGs: A New Best Practice"},"content":{"rendered":"

There are two kinds of JPGs in this world: baseline and progressive. Progressive is just better. Ann Robson shows us why.<\/p>\n

Experimenting locally with a throttled bandwidth, an 80K progressive jpeg beats a 5K baseline jpeg (the same image, downsized) to the page in Firefox on Windows. This should blow your mind. Sure, the progressive jpeg\u2019s first pass is low-resolution, but it contains as much information, or more, as the small image. And if you are zoomed out, perhaps on a mobile device, you will not notice it\u2019s low-res. That\u2019s responsive images working for us right now!<\/p><\/blockquote>\n

And that’s just one reason. Sadly, her research suggests better than 9\/10 JPGs on the internet are baseline. Fairly small sample size, but still.<\/p>\n","protected":false},"excerpt":{"rendered":"

There are two kinds of JPGs in this world: baseline and progressive. Progressive is just better. Ann Robson shows us why. Experimenting locally with a throttled bandwidth, an 80K progressive jpeg beats a 5K baseline jpeg (the same image, downsized) to the page in Firefox on Windows. This should blow your mind. Sure, the progressive […]<\/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":true,"jetpack_social_options":[]},"categories":[17],"tags":[],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"","jetpack-related-posts":[],"featured_media_src_url":null,"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/19695"}],"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=19695"}],"version-history":[{"count":1,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/19695\/revisions"}],"predecessor-version":[{"id":19696,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/19695\/revisions\/19696"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=19695"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=19695"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=19695"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}