tag:blogger.com,1999:blog-537292020947772033.post2378549991438988157..comments2023-05-26T04:28:47.893-04:00Comments on Performance Matters: Progressive JPEGs FTW!Patrick Meenanhttp://www.blogger.com/profile/16482126817753317557noreply@blogger.comBlogger27125tag:blogger.com,1999:blog-537292020947772033.post-29800537578960495002015-11-12T11:01:43.903-05:002015-11-12T11:01:43.903-05:00I will remain a big fan of progressive JPEGs and p...I will remain a big fan of progressive JPEGs and push for them any chance I can get. Particularly with HTTP/2 we can do some really interesting things on the server side to send parts of the images on slower connections (though nobody is doing it that way yet).Patrick Meenanhttps://www.blogger.com/profile/16482126817753317557noreply@blogger.comtag:blogger.com,1999:blog-537292020947772033.post-50728067249032207682015-11-12T10:31:30.870-05:002015-11-12T10:31:30.870-05:00Just a question and an answer of Kornel (writer of...Just a question and an answer of Kornel (writer of imageoptim) to the radware study:<br />https://github.com/pornel/ImageOptim/issues/75#issuecomment-156083108<br /><br />Not sure, if this is true, but I think Kornel is not that inexperienced in image compression/optimization.Dominikhttps://www.blogger.com/profile/15231269721795293811noreply@blogger.comtag:blogger.com,1999:blog-537292020947772033.post-55800736293518699262015-01-03T04:48:22.734-05:002015-01-03T04:48:22.734-05:00Great! Thanks for clarifying. Great! Thanks for clarifying. Anonymousnoreply@blogger.comtag:blogger.com,1999:blog-537292020947772033.post-72617608821315152072014-12-31T16:04:40.455-05:002014-12-31T16:04:40.455-05:00I removed it for now (from the UI anyway) because ...I removed it for now (from the UI anyway) because of some research from radware that showed people preferred the experience of baseline images. It's not definitive and there's more research to do but apparently it's not a clear-cut win so I'm not being as in-your-face about it.<br /><br />I'm also doing some work with different progressive scripts to see if we can deliver a first pass that isn't as blurry.<br /><br />Slides from their presentation are here: http://www.slideshare.net/Radware/radware-velocity-nyprogressivejpegwebperformanceuxPatrick Meenanhttps://www.blogger.com/profile/16482126817753317557noreply@blogger.comtag:blogger.com,1999:blog-537292020947772033.post-82635797119328664162014-12-31T15:54:03.056-05:002014-12-31T15:54:03.056-05:00Hi Patrick-
I noticed you mentioned that progres...Hi Patrick-<br /><br />I noticed you mentioned that progressive jpeg would be added to the grading vectors on the wpt site. I don't see it there. Did it get removed?<br /><br />Thanks,<br />RichAnonymousnoreply@blogger.comtag:blogger.com,1999:blog-537292020947772033.post-20291405575467743942014-06-13T13:55:00.076-04:002014-06-13T13:55:00.076-04:00This online tool will help you to validate your Pr...This online tool will help you to validate your Progressive JPEGs: http://highloadtools.com/progressivejpegdenhttps://www.blogger.com/profile/17941738683407611903noreply@blogger.comtag:blogger.com,1999:blog-537292020947772033.post-29374611723188605982014-04-24T15:05:11.657-04:002014-04-24T15:05:11.657-04:00"Progressive JPEGs can be built with almost a..."Progressive JPEGs can be built with almost arbitrary control over the separate scans. The first scan in the default libjpeg/jpegtran setting is extremely blocky and I think we can find a much better balance." <br /><br />Curious what you mean by blocky? Do you have some suggestions for better libjpeg/jpegtran settings that are less so?A.M.https://www.blogger.com/profile/10293916222361240581noreply@blogger.comtag:blogger.com,1999:blog-537292020947772033.post-59253200671176546812013-11-04T03:53:00.339-05:002013-11-04T03:53:00.339-05:00Photoshop also gives an option for that. Just open...Photoshop also gives an option for that. Just open it and save for the web with progressive option checked. (CTRL + ALT + SHIFT + S)Tomhttp://rfvectors.comnoreply@blogger.comtag:blogger.com,1999:blog-537292020947772033.post-365207469308658642013-09-26T08:29:08.306-04:002013-09-26T08:29:08.306-04:00The easiest is probably the jpegtran command-line ...The easiest is probably the jpegtran command-line utility (available on most OS's through their package managers, here for windows: http://jpegclub.org/jpegtran/ ).<br /><br />jpegtran -progressive source.jpg out.jpg<br /><br />Stoyan Stefanov wrote a good article on it back in 2008: http://www.yuiblog.com/blog/2008/12/05/imageopt-4/Patrick Meenanhttps://www.blogger.com/profile/16482126817753317557noreply@blogger.comtag:blogger.com,1999:blog-537292020947772033.post-73802297415316945842013-09-25T22:49:14.120-04:002013-09-25T22:49:14.120-04:00Hello
Please inform how to change JPEG Image into ...Hello<br />Please inform how to change JPEG Image into progressive JPEGs, which software should i use or how should to change it, give me link.Anonymousnoreply@blogger.comtag:blogger.com,1999:blog-537292020947772033.post-8211479757068317352013-09-17T12:01:25.952-04:002013-09-17T12:01:25.952-04:00Actually, my webpage wallpaper is already lossless...Actually, my webpage wallpaper is already losslessy optimized and progressive (saved using PROGRESSIVE option on Photoshop CS5).<br />However, webpagetest tells me that the image is NOT progressive and that it could be optimized (furthermore, the optimized version would be a few kB bigger than original version).<br />I'd appreciate it if you could take a look:<br />http://www.webpagetest.org/jpeginfo/jpeginfo.php?url=http%3A%2F%2Fwww.flapane.com%2Fimages_style%2Fwood.jpg<br /><br />ThanksFlapanehttps://www.blogger.com/profile/11785269743866439272noreply@blogger.comtag:blogger.com,1999:blog-537292020947772033.post-23900259855040369492013-08-07T10:17:04.515-04:002013-08-07T10:17:04.515-04:00With any luck progressive JPEGs will be the defaul...With any luck progressive JPEGs will be the default in Wordpress in the not too distant future: http://core.trac.wordpress.org/ticket/21668<br /><br /><a href="https://kraken.io/" rel="nofollow">Kraken.io</a> do a good job with creating progressive images and are supposed to be working on a wordpress plugin.<br /><br />If you have shell access to the server you can also run <a href="https://github.com/technopagan/adept-jpg-compressor" rel="nofollow">Adept</a> across your images which is also a great option.Patrick Meenanhttps://www.blogger.com/profile/16482126817753317557noreply@blogger.comtag:blogger.com,1999:blog-537292020947772033.post-27543475030644118792013-08-07T09:46:09.369-04:002013-08-07T09:46:09.369-04:00Hi Patrick, thanks for this very informative post ...Hi Patrick, thanks for this very informative post on Progressive jpegs. Just the think I was looking for since I have the same problem with my website at the moment. <br /><br />Webpagetest:<br />http://www.webpagetest.org/result/130807_DY_PQ8/1/performance_optimization/#progressive_jpeg<br /><br />Is there any plugins for wordpress I can use to do this jpeg compression on my images?<br /><br />Thanks!Julius Briososhttp://workathomenow.biznoreply@blogger.comtag:blogger.com,1999:blog-537292020947772033.post-17822266518966714172013-07-17T10:42:47.677-04:002013-07-17T10:42:47.677-04:00Depending on what data set you look at, IE 8 is un...Depending on what data set you look at, IE 8 is under 10% and declining. I'm not saying we shouldn't support them but I wouldn't necessarily optimize the experience for that small of the population, particularly since it is declining.<br /><br />Statcounter: http://gs.statcounter.com/#browser_version_partially_combined-ww-weekly-201327-201328-bar<br /><br />Akamai: http://www.akamai.com/html/io/io_dataset.html#stat=browser_ver&top=5&type=line&start=20130601&end=20130707&net=both<br /><br />The distribution for a given site may be different so obviously you should take that into account but it's not like were talking about optimizing for the few that are on cutting-edge browsers, we're talking about optimizing for the 80+% case.Patrick Meenanhttps://www.blogger.com/profile/16482126817753317557noreply@blogger.comtag:blogger.com,1999:blog-537292020947772033.post-19941908480668262442013-07-17T10:28:43.174-04:002013-07-17T10:28:43.174-04:00Aggreed, progressive JPG accelerate the start rend...Aggreed, progressive JPG accelerate the start render and gives a more useful idea of the content sooner. Not all people agree on this last point, but I'm not of those.<br />However I do not get why nobody defends the poor users still using IE 8 and earlier (precisely the one who need speed boosts btw) : IE8 and earlier do not smoothly display progressive JPGs. Actually effect is worse than with regular JPG : as long as the image is downloading, you see a blank screen, so you have no visual effect indicating you an image is coming.<br /><br />Take a look at the screenshots : http://www.webpagetest.org/video/compare.php?tests=130717_N5_a43aa8f9b286a33bb769189a28fed9f5-r:1-c:0<br />The main progressive JPG is not displayed until fully there, whereas when it was regular the user knew he was downloading (an heavy) something<br />http://www.webpagetest.org/video/compare.php?tests=130717_K1_ce80cb6e524af4bcf05c985ce9d455c5-r%3A1-c%3A0&thumbSize=200&ival=1000&end=visual<br /><br />So I dont really agree about saying progressive should be standard : let the websites owner decide if their user base has modern enough browsers to benefit from this techniquejpvincenthttp://braincracking.orgnoreply@blogger.comtag:blogger.com,1999:blog-537292020947772033.post-3746302463773956402013-07-15T00:44:25.705-04:002013-07-15T00:44:25.705-04:00https://bugzilla.mozilla.org/show_bug.cgi?id=71591...https://bugzilla.mozilla.org/show_bug.cgi?id=715919#c23Bruno George Moraeshttps://twitter.com/brunogmnoreply@blogger.comtag:blogger.com,1999:blog-537292020947772033.post-34582768489274598162013-07-15T00:39:47.614-04:002013-07-15T00:39:47.614-04:00IIRC in libjpeg-turbo the SIMD optimizations only ...IIRC in libjpeg-turbo the SIMD optimizations only affect baseline, so the decoder is much slower in progressive. Then in hardware the same slowness can happen.Bruno George Moraeshttps://twitter.com/brunogmnoreply@blogger.comtag:blogger.com,1999:blog-537292020947772033.post-25236979955624600472013-06-28T10:59:39.303-04:002013-06-28T10:59:39.303-04:00I would also use large progressive JPEGs with caut...I would also use large progressive JPEGs with caution on memory limited devices (entry level smartphones).<br />To reconstruct a progressive JPEG a browser has to either:<br />- keep huge matrices in memory (6 bytes per pixel in case of a color JPEG, since each "data units" holds 14-bits values per cell).<br />- keep all the scans compressed in memory and perform decompression in parallel on those (you loose the benefits of progressive display in this case).<br /><br />Sequential JPEGs based on interleaved MCU holding the 3 components (YCbCr) do not face this memory hog problem, since the memory used by an MCU (or a lign of MCUs) could be released right after it has been uncompressed back to RGB pixels.<br />Anonymoushttps://www.blogger.com/profile/02527509897611214649noreply@blogger.comtag:blogger.com,1999:blog-537292020947772033.post-10672820141704547432013-06-28T10:40:37.555-04:002013-06-28T10:40:37.555-04:00"Some people may be concerned about the extre..."Some people may be concerned about the extremely fuzzy first-pass in the progressive case. This test was just done with using the default jpegtran scans. I have a TODO to experiment with different configurations to deliver more bits in the first scan and skip the extremely fuzzy passes."<br /><br />This is impossible since the JPEG specs states that in progressive mode the DC values (the top left value of a data unit) have to live in their own scan, apart from the 63 AC values.<br />That's why you'll never be able to write something like "0: 0-5" in a scan file for jpegtran, only 0-0 works, luma and chroma can be interleaved: "0 1 2: 0-0", but if you are looking for the smallest file simply let JPEGrescan do its work.<br /><br />May I suggest you to read the chapters about JPEG in John Mianos book:<br />http://www.2shared.com/document/7E31nRlZ/Miano_-_Compressed_Image_File_.html<br /><br />In the other hand you could produce sequential JPEGS with scans parameters like:<br />0;<br />1 2;<br />(this one is usually better than the default "0 1 2;" when chroma sub-sampling is involved, since it will avoid the inclusion of dummy luma data units to fill the MCU).<br /><br />0 1;<br />2;<br /><br />or<br /><br />0 2;<br />1;<br />can also give better results than default sequential.Anonymoushttps://www.blogger.com/profile/02527509897611214649noreply@blogger.comtag:blogger.com,1999:blog-537292020947772033.post-64177836623466185862013-06-10T08:51:23.198-04:002013-06-10T08:51:23.198-04:00@Eric - do you see something that is inaccurate? ...@Eric - do you see something that is inaccurate? If you already optimized the images then there's a good chance that there isn't room to make them smaller. If the original is already compressed at a quality level lower than 85 (and looking at the artifacts it looks like it was probably well under 70) then re-compressing it at 85 is guaranteed to be bigger.<br /><br />The JPEG tool just dumps information about the file and checks to see if easy lossless or lossy gains are left on the table.<br /><br />If you run a site that has that image on it through webpagetest itself, you shouldn't be getting dinged for Image compression. You might get dinged for it not being progressive though since it's over 10KB though but progressive delivery isn't all about file size.Patrick Meenanhttps://www.blogger.com/profile/16482126817753317557noreply@blogger.comtag:blogger.com,1999:blog-537292020947772033.post-46730591735879456822013-06-10T02:50:22.914-04:002013-06-10T02:50:22.914-04:00I would not trust the information reported by webp...I would not trust the information reported by webpage test's JPEG tool. The lossless and lossy recommendation it offered were larger in size. http://www.webpagetest.org/jpeginfo/jpeginfo.php?url=http://www.ericperrets.info/images/meme.jpgAnonymoushttps://www.blogger.com/profile/12536381536092607732noreply@blogger.comtag:blogger.com,1999:blog-537292020947772033.post-20298307871060154192013-06-05T14:02:22.793-04:002013-06-05T14:02:22.793-04:00@steve, I'm cautiously optimistic that the imp...@steve, I'm cautiously optimistic that the impact would be even more than that. <br /><br />Since JPEGs tend to be used for the larger images, they constitute <a href="http://httparchive.org/interesting.php#responsesizes" rel="nofollow">more of the page bytes</a> than the other images.<br /><br />I don't have scientific data for it but I expect that navigating content and commerce sites will also tend to skew requests more towards JPEGs. Assuming gif/png are used mostly for layout and don't change frequently but JPEGs tend to be used for story photos, product images, etc and will be the content (along with the actual HTML/body) that changes the most often.Patrick Meenanhttps://www.blogger.com/profile/16482126817753317557noreply@blogger.comtag:blogger.com,1999:blog-537292020947772033.post-88522495842980080682013-06-05T13:00:30.110-04:002013-06-05T13:00:30.110-04:00Great great post, Pat. Thanks. Since this only app...Great great post, Pat. Thanks. Since this only applies to JPG it made me wonder how popular JPG is compared to other image formats. According to the HTTP Archive, <a href="http://httparchive.org/interesting.php#imageformats" rel="nofollow">46% of images are JPG</a>. So this improvement would affect almost half of the images seen on the Web. A big win.Steve Soudershttps://www.blogger.com/profile/07051900511910570322noreply@blogger.comtag:blogger.com,1999:blog-537292020947772033.post-49455067808825887512013-06-05T12:03:48.143-04:002013-06-05T12:03:48.143-04:00The overall score is weighted by the image size so...The overall score is weighted by the image size so small images should not change the overall score much (unless you have nothing but small JPEGs). I'm open to also setting a floor and not dinging for images < 10KB.Patrick Meenanhttps://www.blogger.com/profile/16482126817753317557noreply@blogger.comtag:blogger.com,1999:blog-537292020947772033.post-45916625556241014712013-06-05T11:06:34.757-04:002013-06-05T11:06:34.757-04:00The webpagetest report should account for the sour...The webpagetest report should account for the source image size: I've found that small icons actually become larger when using progressive JPEG so our site conditionally enables progressive JPEG only when the image has more than 16K pixels, which is consistently a net win in my testing.Chris Adamshttps://www.blogger.com/profile/06132981126518774942noreply@blogger.com