search

marcopixel / r6operators

r6operators is a collection of high-quality vectorized Rainbow Six: Siege Operator icons & metadata for Node.js
https://r6operators.marcopixel.eu
MIT License
102 stars 10 forks source link

Image path usage #1

Closed BurkusCat closed 3 years ago

BurkusCat commented 4 years ago

I have upgraded r6counters to use this library for svgs now which is sweet. Now, no operator images need to be in the r6counters repo and I can stay up to date by updating the package :)

When playing around with this package, I experimented with using .pngs and I found the site seemed to perform a lot better! Obviously, I love the svgs but I really like the idea of the site being smoother. So I've started work on a branch to use pngs by default but offer an option to enable high detail so people can zoom in infinitely to svgs if they wish https://github.com/BurkusCat/r6-operator-counters/tree/switch-to-pngs

One issue though is that the pngs can be 10 or 15 times the size of the .svgs. The pngs are 1500x1500 so I was thinking that if they were 500x500 it would reduce the file size (and load times) and the site may perform quicker.

Is it best to try and take the source .svgs from https://github.com/marcopixel/r6operators/tree/master/icons and run them through a gulp process on r6counters to turn them to 500px compressed pngs? What would be the best way to achieve this?

marcopixel commented 4 years ago

Right now converting them with either a gulp script or with Sharp is the best idea, but i'll intend to add direct PNG support (with custom output options) into this library.

You can check out the generatePng.ts file under scripts for our build script which uses Sharp.

marcopixel commented 3 years ago

I've recently decided that i'm rewriting the library code and to reduce bundle size & complexity of the project i've come to the conclusion that it's better to only supply SVG icons and let the user handle further converting to another file formats.

Also this helps with integrating the project with Frontend bundlers like Webpack or Parcel, since they handle all the optimization & bundling of the files and should result in much smaller file sizes too.

If anyone still needs PNG files, i'll recommend using Sharp and you can find a easy tutorial here: https://coderrocketfuel.com/article/convert-svg-to-png-using-node-js-and-sharp