Getting Artist Images to Look Their Best (updated May 6, 2009)

RSS
Compartir

24 Feb 2009, 11: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.

***

Comentarios

  • Bloopy

    Wow, interesting comparison. Last.fm really has crapped all over that .JPG

    25 Feb 2009, 21:12
  • fmera

    will do. i actually mentioned the very same thing when i posted you a shout moments ago ;)

    26 Feb 2009, 4:41
  • fmera

    btw, something went horribly wrong with this journal. it reverted to an earlier saved version somehow, so there's a lot of stuff i had added/rewritten in the last 24hrs or so that's completely gone now. i'm pretty pissed atm.

    26 Feb 2009, 5:32
  • fmera

    ok, i finally restored all the stuff that was lost - from memory anyway. (mine, not my drive's.) the pictures mostly, they speak a thousand words. maybe i should've done a comic strip.

    26 Feb 2009, 7:02
  • fmera

    no problem - i just hope it doesn't happen again, or i'll flip.

    26 Feb 2009, 10:23
  • fmera

    500x750 - same 1:1.5 ratio as 252x378 ;) for more, see "other pics" thread.

    21 Mar 2009, 19:31
  • fmera

    @lynn21 - sorry, i just saw your post : jpegs are still the most used web image format for photos, and for most sites it's ok. but on this site, jpeg images you upload will not look so good. png format images are like gif images, except you have much more colors than gifs (at least over 32,000 for pngs compared to 256 for gifs). as png is still quite a new format, most people do not know it so well. png image file sizes are also slightly bigger than jpegs for the same size image. hope that answers your question.

    31 May 2009, 17:27
  • fmera

    @mvordeme - sorry, i just saw this now : at any rate, it's always advisable to upload in rgb to avoid needless color mode conversion. there was once when Bloopy posted a cmyk "toilet shot" and it turned out inverted (negative), on safari i think. quirks like that. so rgb's always safest. on a more important note, i want a poster too...

    31 May 2009, 17:34
  • TinyPliny

    Wow. I didn't know most of this. Very detailed indeed!

    7 Jul 2009, 15:51
  • fmera

    see here.

    21 Jul 2009, 6:15
  • anatawawho

    HasselHoff (or last.fm user TommyHoff) should read this entry. Like, seriously. I'm still not sure how to "delete" the alpha channel from the images, though... :(

    8 Nov 2009, 20:45
  • fmera

    @ARGBDude - i replied you thru' a share ;)

    17 Dic 2009, 20:21
  • fmera

    ^^ fyi whoever else reads this: the image ARGBDude referred to was added in '07. compression settings were clearly different then. download the image, its 252 and 126s versions, and you're likely to find that the compression ratios are much less than the settings last.fm began using since late '08. the smaller the resolution (in terms of pixel count) that a jpeg is, the less you should compress it to prevent jpeg noise/artifacts from becoming visible. for a 126s thumbnail image or smaller eg, no compression should even be applied at all, ie the compression ratio should be 1:1.

    6 Ene 2010, 8:01
Ver todos (24)
Dejar un comentario. Entra en Last.fm o regístrate (es gratis).