The Truth(tm) about encoding SVG in data URIs

Feb 9th, 2024

tl;dr: You can stop worrying and URL-encode only the # character. What? So you want to have an SVG image in a CSS stylesheet. Yup, using data URIs (hey lookie, a 2009 post). There are a number of reasons not to embed images in CSS to begin with (caching, reuse), but hey, sometimes you’re not […]

 

15 minutes could save you…

May 17th, 2010

Since I have a ton of things to do, I decided it was about time to spend some time with this blog, performance optimization-wise. Not do anything special, just the bare minimum, the no-brainer, works-every-time, easy stuff. And I’m quite happy with the results. I only looked at the homepage, although the results will be […]

 

Preload CSS/JavaScript without execution

Apr 21st, 2010

Preloading components in advance is good for performance. There are several ways to do it. But even the cleanest solution (open up an iframe and go crazy there) comes at a price – the price of the iframe and the price of parsing and executing the preloaded CSS and JavaScript. There’s also a relatively high […]

 

IE9 and JPEG-XR: first impressions

Apr 5th, 2010

One of the new features in IE9 is the support for the JPEG-XR format, which reportedly has a better compression. Is it something we should dive into ASAP? JPEG-XR The wikipedia article is here. This format is developed and patented (red flag!) by Microsoft (yellow flag! 🙂 ), it replaces the suggested JPEG-2000 format and […]

 

Uncompressed data in base64? Probably not

Feb 4th, 2010

The beauty of experimentation is that failures are just as fun as successes. Warning: this post is about a failure, so you can skip it altogether 🙂 The perf advent calendar was my attempt to flush out a bunch of stuff, tools and experiments I was doing but never had the time to talk about. […]

 

One-click Minifier Gadget (OMG) – initial checkin

Jan 31st, 2010

So I’ve been thinking and talking to folks about this idea of having one-stop shop for all your minification needs. Minification of JS and CSS as well as image optimization helps site performance by reducing download sizes. This is good. But not a lot of people do it. People don’t do it, because it’s a […]

 

CSS performance: UI with fewer images

Dec 23rd, 2009

2010 update: Lo, the Web Performance Advent Calendar hath moved Dec 23 This post is the one-before-last article in the 2009 performance advent calendar experiment. Often performance improvements come with their drawbacks, sometimes improving performance causes pains in other parts of the development process or strips stuff from the final product. Sometimes there’s even a […]

 

Give PNG a chance

Dec 13th, 2009

2010 update: Lo, the Web Performance Advent Calendar hath moved Dec 13 This post is part of the 2009 performance advent calendar experiment. Stay tuned for the articles to come. People are often afraid to use PNG because they think that: a/ it doesn’t work in all browsers, or b/ filesizes are bigger than GIF […]

 

Big list of image optimization tools

Dec 12th, 2009

2010 update: Lo, the Web Performance Advent Calendar hath moved Dec 12 This post is part of the 2009 performance advent calendar experiment (12 articles down, 12 more to go). Stay tuned for the articles to come. Let’s continue the topic of reducing file sizes started with the previous post and talk about making images […]

 

Duplicates and near-duplicates

Dec 9th, 2009

2010 update: Lo, the Web Performance Advent Calendar hath moved Dec 9 This post is part of the 2009 performance advent calendar experiment. Stay tuned for the next articles. One of Yahoo!’s first batch of performance best practices has always been “Avoid duplicate scripts” (check Steve Souders’ post). Later we added “… and styles”. This […]

 

The art and craft of postload preloads

Aug 27th, 2009

What can your tired old page, once loaded and used and read, can do for your user? It can preload components needed by the next page, so when the users visit the next page, they have the new scripts, styles and images already in the cache. Next page loads faster and the user’s happy. On […]

 

Installing a bunch of PNG tools on the Mac

Jun 12th, 2009

This is one of those note-to-self type of posts. Just went through the exercise of installing a number of PNG tools on the Mac and here are some notes. The instructions below should probably work on any unix box. AdvDef, AdvPng, … There is a number of Adv* tools (advdef, advpng, advmng, advzip) packed together […]

 

data:urls – what are they and how to use them

Apr 10th, 2009

If you follow this blog you already know the infamous website performance rule #1 – reduce the number of HTTP requests. Actually, to celebrate Earth Day and to jump the “go-green” wagon/jargon, my favourite performance mantra as of late is “Reduce, Reuse, Recycle” (the Recycle part is a wee fuzzy but, oh well) So to […]

 

Picassa’s progressive photo rendering

Mar 5th, 2009

If you’ve followed the series of image optimization posts on the YUIblog, you’ve probably seen the one about progressive JPEGs. In short, if a photo is over 10K it has a high probability of being smaller in file size when you use progressive JPEG. How do you turn a normal, baseline JPEG into a progressive […]

 

Hide broken images

Feb 16th, 2009

I know, you don’t have broken images on your site, it’s unprofessional and ugly. But sometimes you may be loading images that you don’t control and you never know what’s going on on the other server you’re expecting to serve, but it may not feel up to the task. One nice and simple strategy to […]

 

Paint.NET is cool…

Dec 23rd, 2008

… but doesn’t write PNG8 with alpha transparency, unfortunately. This comment on the YUI blog got me all excited by the possibility of having another designers tool other than Fireworks that creates PNG8 (palette PNGs) with alpha transparency. Overall Paint.NET is a very simple and friendly program (as a non-designer I’m often intimidated by Photoshop’s […]

 

image diff

Nov 15th, 2008

Was having fun today with idiff.php – a PHP shell script to tell you if two images are visually different by comparing them pixel by pixel. If there’s a difference, the script creates a third image – black background with the different pixels in green. Only after writing the script I found that there’s an […]

 

php|works Atlanta

Nov 13th, 2008

Thanks to everyone who attended my image optimization talk at the php|works + PyWorks conference in Atlanta. And thanks for all the questions! I love questions, feels more natural – just geeks talking to geeks – as opposed to one guy sitting on a podium and talking. And the slides: Image Optimization for the Web […]

 

smush.it update

Oct 26th, 2008

What’s new in smush.it? The old domain smushit.com now redirects to the new one smush.it, which is what we originally intended but the domain registration took a while and we quickly got smushit.com just in time for the Ajax Experience announcement of the tool There’s a bookmarklet version of the Firefox extension so you can […]

 

Smush.it presentations

Oct 5th, 2008

Smush.it is getting more and more buzz all over the internets. Now there’s even a song about it! Me and Nicole are pretty busy answering email, but a little slow to document the thing, I though I should at least shed some light on how the tool works by using some of the presentations. What […]

 

ppt to pdf to slideshare via imagemagick

Aug 8th, 2008

Some time ago I posted the slides from my Velocity 2008 talk on Slideshare and since the slides have tables, all the tables came out with the wrong font and all messed up and misplaced. Instead of trying to figure out what the heck is wrong with Powerpoint and how to work around it, I […]