10 ms·
Essential Image Optimization
- ChrisGranger 8y agoFirefox 65 added native WebP support.
- clouddrover 8y agoAnd you can use a WebAssembly build of libwebp to support WebP in Safari: https://webmproject.github.io/libwebp-demo/webp_wasm/index.html https://webmproject.github.io/libwebp-demo/webp_wasm/index.h... WebAssembly is a nice way to add support for image containers and formats which don't have browser support yet.
- skunkworker 8y agoThis is really impressive actually. The thought didn't cross my mind to just use webassembly for webp decoding.
- pbhjpbhj 8y agoIt's maybe not a "good" thought, but it brings to mind the idea of using this technique for a proprietary format (webp with a header change, say) to make images only work on your own website. Typical users wouldn't be able to view downloaded images; they could only see them through your site. I'm not sure on the details of web assembly, but if you can obturate the workings then this technique becomes stronger, can web assembly be delivered compiled?
- sfusato 8y agoThis is a must-read for any web developer. Image optimization on the web is the low hanging fruit when it comes to reducing load times.
- adityapatadia 8y agohttps://www.gumlet.com https://www.gumlet.com is one of the service which takes all of this into account and makes all essential image optimisations available via nice and tidy API.
- photonios 8y agoThis looks nice! Judging by your comment history, you are the founder of Gumlet, or an employee. Why should I pick Gumlet over alternatives? There are a lot of competitors such as kraken.io
- adityapatadia 8y agoI am indeed founder of Gumlet. Here are few reasons which makes it superior. - cheaper pricing and no minimum monthly payments - global image processing locations - ensures lowest latency regardless of location of your users - no lock-in and wide variety of cloud storage support including DigitalOcean Spaces - prompt support - less than 8 hour response time for all users - GIF support - especially compared to kraken, we charge only $0.1 per GB compared to their lowest pricing of $1 per GB - strong enterprise focus - lot of features planned for enterprise support.
- photonios 8y agoThanks for the straightforward reply! Are there plans for a self-hosted option? Some business might be scared of being so dependent on Gumlet's uptime for their mission critical image processing. Gumlet seems to cater towards processing images on the fly, which is what a lot of your competitors also do. It might be interested to also cater towards using Gumlet as a service to pre-process images as part of a pipeline. I am just thinking aloud, I have no real basis for these ideas at the moment. Just my two cents. I wish you the best of luck and I'll keep Gumlet in mind, the homepage looks very sleek.
- adityapatadia 8y agoThat's a good idea. We will consider it if we find appropriate customers for the same. Meanwhile, for uptime, we provide 99.9% uptime SLA which we have been able to maintain since our launch.
- quickthrower2 8y agoNice article. I am a manual image optimiser, but this made me see if Hugo has something built in. And it does - https://gohugo.io/content-management/image-processing/ https://gohugo.io/content-management/image-processing/. Awesome!
- HHalvi 8y agoI had a landing page with 37 high quality images spread across 5 pages. Used Squash at first to bring down the aggregated size of the images from ~550MB to ~320MB and voila my bounce rates started going down. A few months later i tried out Cloudinary and the conversion rates improved since the biggest bottleneck of the landing page was the images and they were loading smoothly. IMHO one of the low hanging fruits that is worth solving.
- vanderZwan 8y agoThat's 110 MiB on average per page, and almost 15 MiB per image. What kind of page did you have that justified that enormous size in the first place?
- HHalvi 8y agoReplied in the follow up comment above
- Odin78 8y agoUntil recently I had 100MB mobile data per month. This is in a first world country. Just linking to your page could have DoS'd me for weeks.
- kunguru 8y ago320MB is still high going by third world internet standards
- thisacctforreal 8y agoAKA Canadian standards. https://www.macleans.ca/society/technology/canadas-almost-third-world-internet-access/ https://www.macleans.ca/society/technology/canadas-almost-th... My grandfathered $140/month mobile plan has 14GB of data; 320MB is 70% of a day's bandwidth, or 2% of the month's. If I wanted to add another GB I could accrue $100 in overages ($0.10/MB), or pay another $25/month. But Bell will charge for another month in advance if you change the current month's plan. Strangely enough it was only $5/month to up it from 13GB to 14GB :< All this despite being able to download at 7MB/s; I could blow my cap in half an hour, and another half hour would cost $1,400 if I didn't up the plan. Edit: I use my cellphone's data heavily, but 20, 40, 50GB cable internet caps are common with a lot of people not understanding what that means for streaming video / downloading pictures.
- photonios 8y agoThis is an excellent guide! A must read for web developers. I am really glad we invested in automated image optimization where I work. We run a couple of large real-estate websites and we store tens of millions of images and process thousands a day. Optimizing all of them from the start was one of the best things we did. When an image gets uploaded, we re-encode it with MozJPEG and WebP and then create thumbnails in five different sizes and upload them all to S3. They get served through a CDN. We initially did the re-encoding and scaling on the fly and then cache them forever. But MozJPEG is really slow so we changed the system to pre-process everything. When we first implemented this two years ago, Chrome was the only browser that supported WebP. This investment really paid off as all major browsers now support WebP. The website loads really quickly and images rarely give us problems.
- kunguru 8y agodoes this process all happen on aws?
- photonios 8y agoSort of. We run on Heroku, so we indirectly run on AWS. We're heavy users of Python and we're using the excellent Pillow-SIMD [1] library to do most of the heavy lifting. We made our own builds to link it to MozJPEG instead of libjpeg and include libwebp. [1] https://github.com/uploadcare/pillow-simd https://github.com/uploadcare/pillow-simd
- dmitrymukhin 8y agobtw Uploadcare is also doing image processing on the fly for you :)
- adityapatadia 8y agoIt's great to know you have implemented WebP in your pipeline. Do check on-the fly optimisation tools like https://www.gumlet.com https://www.gumlet.com You can save a huge amount in server costs as well as developer and devops team time. Basically all image operations are done in the cloud and all images are served via super fast CDN - that too with cheaper price than a CDN.
- iamphilrae 8y agoEven lower hanging fruit than optimising compression, is actually choosing the right image format in the first place. Put simply (very simply I may add), if it’s an illustration, use PNG, if it’s a photo, use JPEG. Once we’re over that hurdle, we can go onto managing compression techniques and attempting advanced formats such as SVG and WEBP. All too often I’ve seen people encoding 8MP photos as PNGs and wondering why they’re all 50MB in size. Next on the hit list is outputting images at the right size. If the image is never going to be shown greater than 500px wide, save a copy that’s 500px wide. WordPress has this feature built in- learn to use it if that’s your flavour of CMS. Your bounce rate will go down, I guarantee it.
- eps 8y ago> All too often I’ve seen people encoding 8MP photos as PNGs I’ve literally never seen anyone do that, leave alone this being done “often”.
- weavie 8y agoDon't know about 8MP.. but I have certainly been guilty of sticking photos up as PNG before, so it is good to be aware of the difference.
- iamphilrae 8y agoSo your experience invalidates mine? I have endlessly seen website media folders throughout my 14 year career filled with PNG photographs uploaded by unknowing content editors through a CMS. This isn’t their fault, they’re writers and know no better. CMS tools should be set up by the developers to automatically convert to the right format. Cases on the flipside includes developers using JPEG for everything. 100KB highly artifacted illustrations used throughout web layouts, which would be infinitely better as clear 10KB PNGs.
- myfonj 8y agoAnd are you sure they were all real PNGs? You know, displayed suffix means nearly nothing nowadays, you can serve JPEG image as ".png" file with "image/png" mime header and browser would not even raise its eyebrow and process the JPEG properly. I occasionally archive some imagery from web and while viewing them in Irfan I am frequently confronted with "This image is JPG with .png extension, would you like to rename it?" prompt, without what I'd probably had no idea how frequently this discrepancy occurs.
- mnbvkhgvmj 8y agoThis looks like dupe of https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/automating-image-optimization/ https://developers.google.com/web/fundamentals/performance/o... EDIT: I am not an expert on licensing but it does look like everything is in order from a licensing perspective (the original content is CCA3 and to me it looks like things are credited properly).
- dmit 8y agoPlease note that this guide mostly deals with optimizing for network transfer size. As is almost always the case with optimization, there are multiple axes you should be aware of. In this case, a lot of the techniques presented negatively impact CPU usage and, by extension, battery life on mobile devices. See https://twitter.com/nothings/status/1102726407744978944 https://twitter.com/nothings/status/1102726407744978944 for some concrete examples.
- fyfy18 8y agoThe article mentions that progressive jpegs are slower to decode.
- vladdanilov 8y agoI have been making Optimage which is currently the only tool that can automatically optimize images without ruining visual quality [1]. It is also the new state of the art in lossless PNG compression. I have raised a number of issues [2] with this guide. It’s been over a year and they still have not been addressed [3]. [1] https://getoptimage.com/benchmark https://getoptimage.com/benchmark [2] https://github.com/GoogleChrome/essential-image-optimization/issues/55 https://github.com/GoogleChrome/essential-image-optimization... [3] https://twitter.com/addyosmani/status/914207017589288960 https://twitter.com/addyosmani/status/914207017589288960
- bscphil 8y agoYour benchmark is not a legitimate comparison because it does not compare files of equal size. See https://kornel.ski/en/faircomparison https://kornel.ski/en/faircomparison for an explanation of the problems with your methodology. The files your closed source tool generates in this benchmark are 56% larger than those created by ImageOptim! Have your program generate smaller files and then post the results.
- vladdanilov 8y ago> 56% larger than those created by ImageOptim! And noticeably degraded if you compare those images with the originals. Optimage does apply chroma subsampling, the major winner here, when it makes sense. My goal is automatic image optimization with predictable visual quality, i.e. images have to remain authentic to originals. > your closed source tool FYI, ImageOptim API is closed source and way more expensive if that was your point. > Your benchmark is not a legitimate comparison If you have a better one, > then post the results I did post mine. Just why are you taking them out of context and missing others, e.g. lossless compression results?
- muratgozel 8y agoWould like to add a practice that may be helpful for someone: I store an uploaded image as an array of objects in the DB. Each object contains format (jpeg, webp, etc.), name, size, hash and other pieces of information about the transformed image. Frontend app chooses which one to render according to a browser (use webp in Chrome for example.) and UI element.
- brianzelip 8y agoOff topic, but what a great site and source repo. Some highlights for me: - use of `<details>` and `<summary>` elements for native web dropdown (see Table of Contents) - works/looks just as great with js disabled - package.json: {..., "main": "index.md", ...} - very informative README, including notes on how he builds the site, https://github.com/GoogleChrome/essential-image-optimization#additional-repo-details https://github.com/GoogleChrome/essential-image-optimization...
- spiralx 8y agoAll of Addy Osmani's stuff is well-coded and/or well-written, I've been reading his front-end stuff for almost a decade now: https://addyosmani.com/blog/large-scale-jquery/ https://addyosmani.com/blog/large-scale-jquery/
- toastal 8y agoOne thing people don't think about with some of these optimizers is that it will strip color profile and all metadata. The caveat here is that you can lose color accuracy/range for the former, and vital licensing information for the later.
- tambourine_man 8y agoImageOptim is great. The amount of bytes it has saved me over the years is staggering.
- Veedrac 8y ago> The ability for PJPEGs to offer low-resolution ‘previews’ of an image as it loads improves perceived performance – users can feel like the image is loading faster compared to adaptive images. My understanding was that progressive JPEG actually feels slower, since users are less sure when the image has finished loading, and are thus best avoided in most cases.
- deleted 8y ago[deleted]
- technotarek 8y agoI'm curious, how would the HN community tackle optimizing (and/or re- optimizing) ~200k images sitting in an S3 bucket?
- technotarek 8y agoEdit: Was thinking more of what self-implemented workflows/precessing tools one might consider (node packages etc) as opposed to paid SAAS options.
- yjftsjthsd-h 8y agoLook at AWS batch - https://aws.amazon.com/batch/ https://aws.amazon.com/batch/
- craz8 8y agoI would think about using Cloudinary to process these on demand as needed if your usage can support this Cloudinary Fetch pulls images from your S3, caches them, and serves the size and format you request all without touching the original files
- technotarek 8y agoCloudinary is nice, but it gets expensive really fast on a high traffic site that's image heavy and bandwidth optimized. For example, a single image might have 5-6 versions on top of the original -- low quality thumbnail, high quality thumbnail, default, default 2x retina, default 3x retina. Then activate their webp service and perhaps offer another image aspect ratio. Each is a conversion that counts against your quota. Now you've got 15+ (con)versions and you're shelling out hundreds of dollars a month.
- dmitrymukhin 8y agoCloudinary, Imgix, Uploadcare (which I' working for) and others save you money because you don't have to develop and maintain these moving parts. You have to constantly check what's happening with browsers, what formats/encoders are available and which are the best etc. It's classic build vs. buy dilemma. In majority of cases it's much more cost effective to buy. BTW, Uploadcare doesn't charge for file processing at all, only for CDN traffic. So you can create as much image variants as you need.
- Klathmon 8y agoA little bit of self-promotion: I wrote and maintain imagemin-webpack-plugin for optimizing images during the build process for webpack-based javascript projects. It works using imagemin and the various plugins for it, which themselves are just small wrappers around most image optimizers. https://github.com/Klathmon/imagemin-webpack-plugin https://github.com/Klathmon/imagemin-webpack-plugin
- deleted 8y ago[deleted]
- devwastaken 8y agoRecently I've tested just compressing images as 1 frame in an av1 video with ffmpeg and it seems to work surprisingly well. Browsers seem to automatically display the first frame of the video without needing to play.