Вторник 24 Фев 2009, 6:24

Getting Artist Images to Look Their Best
if they don't look good, we don't look good.

Background
Since the July 2008 site revamp, images for use in artist pages have taken on a new default size of 252px width and up to 378px height. (If you reduce your browser window width beyond a point, however, the artist image automatically scales itself to a width of 126px.) If you upload images taller than the 252x378 (or 1:1.5) width-to-height ratio, they will be cropped off the bottom to fit.

Furthermore, while images in artist pages can be up to 252x378, they are resized to 126px width in user libraries - and only the top 100px of the image is shown!* (Those who listen to Ólafur Arnalds can check their own libraries to see it for themselves.) So either go with the library aspect ratio (1.26:1, or 252x200) to be absolutely safe, or compose your tall or portrait-format artist images with this in mind (read: crop your pics!), so that the key image content is within the "sweet spot" that stays within view when the images end up in the library.

keep the key image content of tall images within the "sweet spot".

* More on cropping here: Cropping Artist Images for the Library

Having said that, it doesn't hurt to upload images that are slightly larger1 than the displayed size in artist pages - you never know when the site will be updated again, with even bigger artist images on display. Never, ever upload artist images that are less than 252px wide! (Why do you suppose there are so many awful-looking blurry images on the site post-revamp?)

1 However, if you upload an artist image that's exactly 252px wide and is not more than 378px tall (meaning it's within the optimal display dimensions), it will be the actual image used in the artist page, down to the very last bit. That means no resampling at all - which is a good thing, especially if it's a jpg file.

And just when you thought things were getting better…1
More recently, additional 64x64 clickable thumbnails were introduced in artist pages, placed just below the main artist image. That's fine, and it's proved quite popular with users, too. However, it created a layout problem: to accommodate the thumbnails below, the main image was conveniently nudged up to a width of 259px via html code, blurring the main image as a result, subtly in some cases and noticeably in others, as seen in this example:

a 252px image (top); same image nudged up to 259px via html (above)

This is the reason why almost all artist images don't look as crisp as they should, and last.fm has to fix this, no question about it. If anything, the trade-off shouldn't be at the expense of the main artist image pane.

1May 6 update:
Staff have since fixed the problem with a newly-introduced css file. Basically, what the new stylesheet does is present the thumbnails as 62x62, and the main artist image width as 251px (by hiding the overflows), so the images can retain their native sizes while the overall grid is trimmed down just a tad.

There are things that, as a user, you can't fix. And then, there are things that you can. Start by picking a foolproof image file format when uploading images to the site.

JPEG or PNG?
Wow, that's a tough one. ;)

JPEG is a lossy compression format, meaning each time you save an image, you lose something - whereas PNG is lossless. This makes PNG useful for working with temporary images that require repeated editing. Compare the paired images below processed by last.fm's very own compression algorithms (png's at left, jpg's at right). Or view more examples in Clare Teal's gallery here.

Granted, these are just the gallery previews, 64sq thumbnails, 34sq icons, etc., and not the full-size artist images. But which version would you rather see being used throughout the entire site? And that's after just one generation loss using last.fm's present image compression algorithm (affecting .jpg images uploaded after mid-Dec '08). End of story.

Settings for PNG images
Settings in most image editors for saving .png images are minimal: you can either save them interlaced (using the common Adam7 option) or not. This just allows .png images to load progressively (making them appear to load faster) on slower connections. Not all that important nowadays, plus it actually increases the filesize slightly as it reduces compressibility.

Then there are the filters. These just help prep images to make the compression algorithm work a bit more efficiently and possibly result in smaller filesizes. The best option is to set it to auto and let it figure out itself which filter to use.

A Eureka! moment for avatars
A member of our group, mvordeme, has just made a startling discovery! While this may not matter so much for artist images, it will make a huge difference for users who upload png avatars with transparency. If you strip away the alpha channel from your image, not only will it reduce the avatar's filesize substantially, but reduced 64px thumbnails of your avatar that appear in shoutboxes will look much, much sharper. (You lose the alpha transparency, of course. But what does it matter on this site?) See the difference in mvordeme's old vs. new avatar thumbnails for yourself:

< old · new >

There's a good chance it will improve the main 126px avatar on your profile as well, so go for it!

Eureka! II - The Jill Johnson PNG Experiment
This experiment shows the effect that the alpha channel mask of an original png image has on the sharpness of reduced png images processed by last.fm (based on a discovery made by our group member mvordeme):

The top two artist images below are actually 252px wide (the size used in artist pages), but we scaled them down via html to 240px so they could be side-by-side for easy comparison. The rest are the 126px, 64px, and 34px scaled versions in their actual sizes. (left with alpha channel, right without.)

439KB · 123KB

115KB 35.2KB
31.1KB 10.5KB
9.5KB 3.6KB

See the difference (both in clarity and filesize)? Quite the eye-opener, isn't it?

The verdict: Strip away any alpha channels from your png's before you upload them, otherwise the processed images will almost certainly end up blurry on the site. The caveat however is knowing what the alpha mask was applied for: removing it may change the image quality in terms of contrast, brightness, or other mask effects. (It will most certainly remove alpha transparency, if there was any before.) In this case, flattening the image may be an option.

This article is a working draft. Comments and questions are welcome.

The writer is leader of the Users.aGainst.LousY.images, who call themselves U.G.L.Y. for short. Watch the group's official music video.