Archive for the 'images' Category

Minimal SVG Favicon

Jun 15th, 2024

Why minimal? I like “minimum-viable”s of all sorts. As a performance enthusiast I’m fascinated by anything minimal. So here goes a minimum viable SVG favicon. Why favicon? Welp, browsers will look for one and if you don’t have it, enjoy the 404s! Why SVG? It could be tiny, almost as tiny as a CDN URL, […]


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


Image requests in hidden content

Jan 1st, 2024

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


Minimum viable no-image image src

Dec 26th, 2023

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


Running JPEG-XL tools on shared Dreamhost

Jul 20th, 2023

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



Jul 26th, 2022

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


Batch convert image formats with imagemagick

Feb 18th, 2017

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



Jan 22nd, 2017

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


How to tell a progressive JPEG

Dec 29th, 2016

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


Canvas pixels #3: getUserMedia

Jun 13th, 2012

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


Canvas pixels #2: convolution matrix

Jun 11th, 2012

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


Pixel manipulation in canvas

Jun 10th, 2012

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


Ajax with images

Jun 2nd, 2012

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


Imagemagick crop and center

Oct 12th, 2011

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


Overlooked Optimizations: Images

Jun 14th, 2011

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


Preload in visual search suggestions

Jun 9th, 2011

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


Command-line CSS spriting

Feb 19th, 2011

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


Inline MHTML+Data URIs

Oct 3rd, 2010

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


The proper MHTML syntax

Oct 3rd, 2010

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


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