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

You know the pattern: spit out some markup, probably server-side, but hide it for later. On-demand features (not to overwhelm the UI), dialogs waiting to pop, and so on. <div class=”modal hidden”>content here…<div> And what happens when the “content here…” includes resources, such as images? Is the browser going to download them? Let’s check. What […]

Remember spacer.gif? Yeah, “good” old days… We may now have all the CSS features to make everything better but sometimes the ghost of spacer gif rears its transparent head. And that’s an HTTP request. A request that’s better devoted to something useful. Like an LCP image or something, I dunno. So anyway, sometimes a simple […]

Let’s see how to setup and run cjxl (and its sibling djxl) on a simple shared hosting provider so you can encode and decode JPEG-XL (aka JXL) images. How There are better ways to install libjxl and its command-line tools but they require you to have sufficient privileges on your computer or server. With inexpensive […]

Details from a talk to NYWebPerf meetup will go here after the talk. For now there’s: github.com/stoyan/progressive with the code and slides

mogrify (like convert) is one of the utilities that come with imagemagick. Here’s an example of how you convert a batch of pic files to jpeg. Same for png to jpeg, vice-versa, etc. $ mogrify -format jpg *.pic Boom! Next! Also see: batch convert audio/video files with ffmpeg

There’s a new tool in town. It lets you drag photos and gives you a map of where the photo was taken. Creepy, isn’t it? It figures this out using the meta (exif) information that’s part of a photo. The tool also lets you download a version of the photo without any exif information. The […]

Using ImageMagick ($ brew install imagemagick) certainly helps. E.g. $ identify -verbose baseline.jpg | grep Interlace Interlace: None $ identify -verbose progressive.jpg | grep Interlace Interlace: JPEG As you can see baseline.jpg is baseline, i.e. not progressive, while progressive.jpg is indeed progressive. Newness Apparently in newer IM (v7.0.3.8+) you should be able to tell without […]

getUserMedia() is a proposal for one of the most desired device APIs that can give HTML and JS access to the user’s camera and microphone. It’s already available in Chrome Canary in the form of navigator.webkitGetUserMedia(). It’s also available in Opera without a prefix. In part #1 of this miniseries I talked about manipulating pixels […]

In the previous post I talked about manipulating and changing pixels in an image (using JavaScript and canvas) one at a time. We took a single pixel and messed around with its R, G, B or A values. This time let’s look into taking account not only the single pixel but the pixels around it. […]

Done it before with PHP, but now that JavaScript is all-powerful, let’s see how we can manipulate images in an HTML <canvas>. The demo is here. Pixel manipulation The simplest way to fiddle with image data is to take each pixel and change the value of one or more of its channels: red, green, blue […]

So you can do Ajaxy stuff with XMLHttpRequest or or iframes or dynamic JavaScript tags or… how about simple images. This is best used for simple stuff where you can have a limited number of predefined responses, such as “success” and “oops”. All you do is create an image and set its source and this […]

Say you get a sprite created no matter how but the original images are long gone or for whatever reason not available. With imagemagick it’s easy to crop them back. And I think it’s easier and more precise than with a graphic UI, e.g. photoshop. Let’s see how. Task: get me a 16×16 favicon for […]

#1 This guest post from Billy Hoffman is the last post in the Velocity countdown series. Velocity starts first thing tomorrow! Hope you enjoyed the ride and please welcome Billy Hoffman! Billy Hoffman (@zoompf) is the founder and CEO of Zoompf, a web performance startup whose scanning technology helps website owners find and fix performance […]

#6 This post is part of the Velocity countdown series. Stay tuned for the articles to come. Alrighty, this is something I’ve talked about last year at HighLoad++ and Fronteers, but never blogged. I came up with this thing while at Yahoo! Search and we used it there in production. So, it must be working. […]

(In Russian) OK, CSS sprite tools exist. I’m pretty confident I actually made the very first one 🙂 But they break from time to time (like mine currently). And then the command line is cool (as opposed to scary) and oh-so-quick. And imagemagick is cool and oh-so-powerful. So let’s see how we can create CSS […]

MHTML and Data URIs in the same CSS file is totally doable and gives us nice support for IE6+ and all modern browsers. But the question is – what about inline styles. In other words can you have a single-request web application which bundles together markup, inline styles, inline scripts, inline images? With data URIs […]

Reducing the number of HTTP requests is a must, sprites are cool, but a pain to maintain, so there come data URIs (for all browsers) and MHTML (IE6 and 7). I’ve talked about these things on this blog to a point where the blog comes up in top 10 results in search engines for queries […]

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

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

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

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

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

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

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