Icons

Table of Contents

  1. Whats wrong with ArenaNets render service?
  2. Use GW2Treasures render service
  3. Examples
  4. Sample implementations

Some basic intro text about our item service goes here...

Whats wrong with ArenaNets render service?

The icons served by ArenaNets render service are not optimized. By lossless compression and discarding metadata from the images, the filesize can be reduced by over 20% on average. If you have multiple icons on a page, saving 20% of transmitted bytes means a noticeable speed improvement.

Often you don't want to display a 64x64 version of the icon on your page, but by loading the big icon and downscaling it clientside you are wasting bandwith. We provide all icons in 64x64, 32x32 and 16x16, so you can pick the dimensions and are only downloading the bytes you need.

As you can see our service is optimized to improve loading speed on the first and all subsequent requests.

Use GW2Treasures render service

We are providing thumbnails and compressed versions of all icons from ArenaNets render service. This is ideal if you use many icons or icons with smaller dimension than the default 64px. The dimensions available are 16px, 32px and 64px.

The icons are available at this url: 

https://icons-gw2.darthmaim-cdn.com/{signature}/{file_id}-{size}.png
ParameterExplanation
signature The file signature you get from the official API.
file_id The file_id you get from the official API.
size Valid sizes are:
  • 64px
  • 32px
  • 16px

To load higher resolution icons for devices with "retina" screens, you can use the srcset attribute. Devices with lower resolutions, will still load the smaller file and save bandwith. You can read more about the srcset attribute on the MDN page about the img element. 

<img
    src="https://icons-gw2.darthmaim-cdn.com/9D94B96446F269662F6ACC2531394A06C0E03951/947657-32px.png"
    srcset="https://icons-gw2.darthmaim-cdn.com/9D94B96446F269662F6ACC2531394A06C0E03951/947657-64px.png 2x"
    width="32" height="32" alt="" crossorigin="anonymous">

Examples

IconURL
https://icons-gw2.darthmaim-cdn.com/18CE5D78317265000CF3C23ED76AB3CEE86BA60E/65941-64px.png
https://icons-gw2.darthmaim-cdn.com/4F19A8B4E309C3042358FB194F7190331DEF27EB/631494-32px.png
https://icons-gw2.darthmaim-cdn.com/027D1D382447933D074BE45F405EA1F379471DEB/63127-16px.png

Sample implementations

Here are some sample implementations for getting the url pointing to an icon of a specific size. All these samples require the signature (string) and the file_id (int). The size (int) is optional.

PHP

function icon( $signature, $file_id, $size = 64 ) {
    if ( $size <= 16 ) {
        $size = 16;
    } elseif ( $size <= 32 ) {
        $size = 32;
    } else {
        $size = 64;
    }

    return 'https://icons-gw2.darthmaim-cdn.com/' .
        $signature . '/' . $file_id . '-' . $size . 'px.png';
}

JavaScript

function icon(signature, file_id, size) {
    if(size <= 16) {
        size = 16;
    } elseif(size <= 32) {
        size = 32;
    } else {
        size = 64;
    }

    return "https://icons-gw2.darthmaim-cdn.com/" +
        signature + "/" + file_id + "-" + size + "px.png";
};