Magnatune blog

Retina display support

Magnatune now automatically detects retina display devices (i.e., iPad, HD Android, and 4k monitors) and swaps in album art and artist photos at twice the resolution in those cases.

I find the difference to be dramatic, especially with thumbnails of album art, with the text now suddenly being legible.

As indicated in another blog post, retina images are sent to you in WebP format, if you're running a browser compatible with that image format. In that case, retina images are actually 25% smaller than their jpeg non-retina equivalents!

If you're curious as how how this all looks, and you have a non-retina display, try looking at these two images:

-john

Webp image support

Parts of Magnatune are very image heavy, such as those that show many album covers or many artists.

Starting today, if your browser supports it, these images are in Google's new WebP format, which (in my tests) results in images about 1/2 the size as JPG, without the annoying boxy artifacts (especially around edges and text) that jpeg often creates.

I recently added "retina image" support widely to Magnatune, so that if you have a "retina monitor" (iPad, high res Android, or 4k resolution monitor) the Magnatune web site automatically detects this and sends you album art and artist photos at twice the horizontal and vertical resolution. The downside to this is that the "retina" images are much larger, which is why I wanted to implement Webp support.

In my tests, the Webp "retina" images are 25% smaller than the equivalent non-retina JPEG images.

Currently, WebP is only supported in Google-based browsers (Chrome on Desktops, and Android) as well as Opera.

There does exist a javascript to enable WebP support in other browsers. However, I found that loading it caused strange bugs in my own code, so I decided not to use it.

Hopefully WebKit (Apple) and Firefox will eventually support WebP. It seems very high performing.

-john