Archive for the 'images' Category

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 […]


MHTML – when you need data: URIs in IE7 and under

Apr 10th, 2009

UPDATE: It’s very important to have a closing separator in the MHTML document, otherwise there are known issues in IE7 on Vista or Windows 7. The details are here. In the previous post I described what data: URIs are and how they are useful to reduce the number of HTTP requests. Now, the problem with […]


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 […]


Installing JPEGTRAN on a Mac or Unix/Linux

Jan 16th, 2009

JPEGtran is cool because it lets you optimize JPEG images losslessly by: Stripping meta data (meta is sometimes bulky and useless for web display) Optimizing Huffman tables or Convert a JPEG to progressive encoding From my experience 1 is more important than 2 or 3 and 3 gives better results than 2 for images over […]


Image optimization – in Chinese

Jan 8th, 2009

Thanks to Joseph Jiang who translated in Chinese parts of my image optimization articles from the YUI blog If you read Chinese, visit


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 […]


Installing ExifTool on Dreamhost

Dec 23rd, 2008

ExifTool looks like a very promising tool to fiddle with all sorts of JPEG metadata (needed for but first I had to make sure I can install it on Dreamhost. Although installation didn’t go as described on the exiftool site (since I don’t have sudo access on Dreamhost), it’s still installable and it’s actually […]


PNG optimization tools

Dec 22nd, 2008

I’m currently experimenting with different tools for optimizing PNG images to figure out strengths/weaknesses of each. Only considering free, ideally open-source, tools that can be run from the command line. For I just picked pngcrush for no particluar reason and I was thinking that once I have the optimization tool up and running and […]


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 […] update

Oct 26th, 2008

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

Oct 5th, 2008 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 […] is a smash hit

Oct 2nd, 2008

Since me and Nicole announced yesterday at Ajax Experience and thanks to Christian Heilmann posting it on Ajaxian and Yahoo Developer Network, this thing seems to have exploded! It’s all over the blogosphere, twitter-sphere and every other sphere. BTW, Chris never seizes to amaze – he posted the video on Ajaxian at 11:01 am […]


php|works and pyWorks

Sep 10th, 2008

I’ll be speaking at the php|works and pyWorks conferences in Atlanta, Georgia in November, they’ll be held together and there is a central track that has topics of interest to both phpiers and pythonistas, this is where I come in. The conference(s) schedule is here and this is me: “Image optimization for the web”


Installing pngcrush at dreamhost

Sep 4th, 2008

pngcrush is an excellent optimizer for png images, simple and fast, highly recommended. Basically any time before you post a PNG on the web, you should run it through PNGCrush. It’s a command line utility, there’s a quick way to integrate pngcrush in windows explorer. (note to self: I actually wrote a wordpress plugin to […]


Image optimization – 7 mistakes

Jun 26th, 2008

The slides from my talk at the Velocity conference » Download | View | Upload your own


Load a photo in a canvas, then flip

May 3rd, 2008

Today our family went to the yearly photo session with the girls. We took one shot that can be looked normally, as well as upside down, so I was wondering can you flip an image using a canvas tag. Turns out, yes, you can and it’s pretty easy. » Demo is here. How to load […]


Canvas pie with tooltips

Mar 8th, 2008

This is very flattering: Greg Houston took my script for DIY canvas pie and added tooltips and better colors logic. Here’s the result, it’s really nice, built with some MooTools. The tooltips are not supported in <canvas> but Creg used an image that overlays the pie and set the tooltips with an image map. Clever, […]


YUI pie chart example

Jan 16th, 2008

If case you haven’t noticed – YUI Charts hit the streets. As with everything new, it’s best shown and understood by example. So here’s the simplest example of using a pie chart. Basically I took the example from the YUI page, changed all the paths to point to (where YUI is hosted for free) […]


Image fun with PHP – part 2

Nov 13th, 2007

This post is a demo of what the imagefilter() PHP function can do for you. The Original imagefilter() called with different filter constants Filter: IMG_FILTER_BRIGHTNESSCode to reproduce: <?php $image = imagecreatefrompng(‘nathalie.png’); imagefilter($image, IMG_FILTER_BRIGHTNESS, 5); imagepng($image, ‘img_filter_brightness_5.png’); imagedestroy($image); ?> Filter: IMG_FILTER_BRIGHTNESSCode to reproduce: <?php $image = imagecreatefrompng(‘nathalie.png’); imagefilter($image, IMG_FILTER_BRIGHTNESS, 50); imagepng($image, ‘img_filter_brightness_50.png’); imagedestroy($image); ?> Filter: IMG_FILTER_BRIGHTNESSCode to reproduce: <?php $image = imagecreatefrompng(‘nathalie.png’); imagefilter($image, IMG_FILTER_BRIGHTNESS, 100); imagepng($image, ‘img_filter_brightness_100.png’); imagedestroy($image); […]


Image_Text 0.6 beta is out

Apr 19th, 2007

» Download here This is my first PEAR release and I was actually surprised how easy it is to package and roll out a release. So you have your local copy of the CVS repository that contains the scripts you want to release as part of the package. In order to release, you need package.xml, […]


Laziest image resize in PHP

Dec 13th, 2006

Today I saw a post at on image resizing with PHP and there was quite a discussion. Let me share the laziest way (that I know of) how to do it – PEAR::Image_Transform is all it takes. Here goes: <?php require_once ‘Image/Transform.php’; $i =& Image_Transform::factory(”); $i->load(‘test.jpg’); $i->fit(100,100); $i->save(‘resized.png’, ‘png’); ?> In addition, the Image_Transform […]