use cwebp or avif images wherever possible use resized lossless png images as source for avifenc, since it does not support resize atm use vipsthumbnail instead of imagick (way faster) shrivel.json including command line tools and parameters to shrink different kind of image formats (shrivel is a task runner for shrinking images using command line tools, I recently built for my blog, unfortunately without release yet). If you put the Data URIs into your CSS, they will naturally be cached along with the style sheet using CSS you can also provide a fall-back for IE7 and other horrible browsers.To everyone who is interested, here is a part of my. “Data URIs can be very useful for performance, but the biggest disadvantages are the lack of support in IE7 and below (IE8 can handle them, so long as the code is less than 32KB), and the fact that the data isn’t cached by the browser like a regular image file would be.” Still worth investigating to see if it makes sense in your situation, though!Īlso, is amazingly simple, and will even maintain the folder structure of the page you browse from (via Firebug). I mostly use the tool in YSlow to process images, which smartly gives you a preview of the resulting image along with the compression stats so you can choose whether it was a good idea to strip out some of the data or not…ĭata URIs can be very useful for performance, but the biggest disadvantages are the lack of support in IE7 and below (IE8 can handle them, so long as the code is less than 32KB), and the fact that the data isn’t cached by the browser like a regular image file would be. Especially nice that it can be scripted (via command line support). What a great find, I just shaved off about 30% from my site’s images.Īwesome, this looks like a handy tool. You should probably add that to your post. I see you haven’t done this for the screenshot you posted ImageOptim can easily crunch another 3.7% of its file size. So, always click “Again” until the “Savings” column is full of zeroes. Because it combines several crunchers, it’s possible to optimize the same image up to three times. ![]() Thinking I read they were bad for some reason, but cannot recall why anymore.Īnother thing to note is that you should always click the “Again” button in ImageOptim until there are no more optimizations possible for all the images. Schmidt: I will have to do more research on data-uris. ![]() Laziness has stopped me from doing the spriting. John Nunemaker November 23, Yep, aware of both. This is equivalent to spriting without having to actually sprite the images. Have you checked out Jammit? It can take all these icons and turn them into data-uris for you so you have fewer http requests. It’s easy as hell and works just awesome :)Īnd you should consider using css sprites for your bunch of button_* images. I use for automatic server side image reduction. Just two little comments based on my experiences. ![]() Every bit counts! I cannot wait until I get time to build this into Harmony, so I do not even need an OSX app. ![]() If this were the only client side optimization we did, people might not notice a big difference, but this in combination with some of the other things we have done and will be doing are noticeable. I even optimized the screenshot and saved around 15%. The image above is a screenshot of ImageOptim with several of the Harmony images optimized. Just like that, we cut probably a fourth of our image weight in the Harmony administration area. It runs the utilities and saves the file right in place.įor Harmony, all I had to do was drag all the images onto the app, wait for them to complete, git commit all of the updates, and deploy. The other day, Allan Branch tweeted about ImageOptim, a handy little OSX app, that allows you to simply drag and drop images that you would like to optimize.īehind the scenes, ImageOptim then uses several utilities to find the best compression parameters and remove unnecessary comments and color profiles. The main reason was that Harmony has a lot of images and icons and it would probably take a while. Anytime you can reduce that number, things will be faster.įor a while I have been playing with, but I never got around to actually using it on any of the images in Harmony. Yes, I know we live in the high speed internet days, but so often, it still all comes down to how many bytes are flying across the wire. I also love performance, whether it be on the server or client side.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |