search

Silverfeelin / SkyGame-Planner

Sky:CotL unlock planner/tracker
Other
27 stars 4 forks source link

Check icons / delivery #154

Closed Silverfeelin closed 1 month ago

Silverfeelin commented 2 months ago

A lot of images, including item icons, are delivered through Fandom CDN (hard link to the image).

When opening pages like quick unlock or outfit requests, all images have to be loaded through separate HTTP calls.

Investigate possible solutions, i.e. serving multiple icons in a spritesheet or by SVG file.

nirewen commented 1 month ago

I was trying to implement a way to load the images in a lower resolution when they are loaded in a small element anyway, like the Item button, it's 64x64.

So I figured how Wikia/Fandom resizes the images: /revision/latest/scale-to-width-down/{width} and /revision/latest/scale-to-height-down/{height}.

I tried a couple values to see if they worked: Icon_pants_default.png@64px

And it does work... sometimes! This scales the image down to 64x64 But it's not all roses... Fandom seems to block the request when you load the images that way...

image

Maybe this can be a solution, if there's a way to make Fandom not return 404 in these cases.

You can provide an extra parameter for the icon/asset for this scaling to the element's dimensions.

Silverfeelin commented 1 month ago

Hey, thanks for having a look and sharing your ideas.

Sadly embedding Fandom seems to be a dead end. They have some rules against embedded content and the only way to embed images is with the raw URL (stripping everything after the extension; /revision/...). This URL automatically serves a limited resolution when embedded vs opening it directly.

The problem here is mostly the amount of API calls needed since every image is served by a separate call. Reducing file size is also a win, but limiting the amount of API calls should already improve the load speed of certain pages by a lot (i.e. the outfit request page since it loads all item icons).

image

I've already had a look and I should be able to serve item icons through a single SVG file, which is both less API calls and a lot less data. This requires the SVG data and I currently only have a couple dozen icons (the ones I made for the wiki). My idea is to load everything I can through an SVG file with symbols and use the Fandom for icons I don't have. That way it can be improved over time by adding more icons.

Right now there are some other projects like #71 I'm spending some time on but I'll assign this one to myself since I already have a good idea of what to do.