Archive for the 'images' Category

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

 

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

 

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

 

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

 

Data URIs, MHTML and IE7/Win7/Vista blues

Dec 7th, 2009

2010 update: Lo, the Web Performance Advent Calendar hath moved Dec 7 This is the seventh in the series of performance articles as part of my 2009 performance advent calendar experiment. Stay tuned for the next articles. UPDATE: While this post is an interesting study, the problem it solves turns out to be much simpler. […]

 

Reducing the number of page components

Dec 5th, 2009

2010 update: Lo, the Web Performance Advent Calendar hath moved Dec 5 This is the fifth in the series of performance articles as part of my 2009 performance advent calendar experiment. Stay tuned for the next articles. Let’s talk a but about waterfall optimization – the first thing that happens in Mr.Page’s life. The best […]

 

Performance Advent Calendar 2009

Nov 30th, 2009

2010 update: Lo, the Web Performance Advent Calendar hath moved I like 24ways.org’s idea of a webdev advent calendar – publishing one article per day from Dec 1st to Dec 24. I thought it would be cool to have the same thing on web performance topics. Our young performance community would benefit from a year-end […]

 

Help write the lyrics to “Give PNG a chance”

Sep 3rd, 2009

As you know yours truly is a guitar hero wannabe. So I’m playing with the idea of recording a song/video called “Give PiNG a Chance”, cover of “Give peace a chance”. Hopefully whoever hears it will then think twice before saving a GIF instead of PNG. Imagine. And the web will be as one… Here’s […]

 

Ignite Velocity: Image Weight Loss Clinic

Sep 2nd, 2009

A few months ago I gave a 5 minute Ignite talk at the Velocity conference. (My previous post talks about the Ignite experience.) I thought they recorded the video and wanted to share but seems like it’s not happening. So below are the slides from slideshare. The ignite talk rules are: 20 slides that change […]

 

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