Icons
Table of Contents
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
Parameter | Explanation |
---|---|
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:
|
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
Icon | URL |
---|---|
![]() |
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"; };