A couple of weeks ago, I was working on a WordPress multisite website for a client. A widget on one of the sites in this multisite install would get an RSS feed from another, and show the first post. So far so good. But the feed supplied square images for each article, while the receiving site’s design used landscape images.
Long story short: one of the first images was a portrait of the clients, and they were beheaded. Not good. So I decided to see if I could come up with a clever way to automatically crop images based on where the “action is” in the image.
There’s been a lot of debate among web professionals about whether or not it makes sense to server “retina” images to website visitors who’s devices support high pixel densities. In order to take full advantage of the sharpness of the new iPad’s screen, website owners would need to prepare their images at four times the number of pixels of normal (“72dpi”) web images.
I ran a few quick tests to see how much all those extra pixels affected overall file size. I used 130 randomly chosen jpeg images (all straight from my DSLR camera), and ran Photoshop and Irfanview batches to crop and scale them to a couple of often-used sizes. I used the same JPEG settings each time, and made sure the only difference between the images would be that the retina ones were four times sharper.
More Quick test: Retina images vs. regular ones
As an old school web designer, I consider myself to have a firm grasp of what pixels are all about. Back in the early 1990’s I used to optimize the hell out of tiny graphics, manually editing colour palettes and using things like Floyd-Steinberg dithering. Maybe this is why I don’t understand the hype about upscaling DVD players like this one.
More Upscaling DVD players, what’s the point?