Coder Social home page Coder Social logo

Comments (8)

Schokobecher avatar Schokobecher commented on August 16, 2024 2

Oh yeah, guess I missed those.

Compression wise I did a test with OptiPNG:

drawable-xxxhdpi/auth_stripe.png
PNG image data, 128 x 128, 8-bit/color RGBA, non-interlaced, 11K

optipng auth_stripe.png
** Processing: auth_stripe.png
128x128 pixels, 4x8 bits/pixel, RGB+alpha
Reducing image to 3x8 bits/pixel, RGB
Input IDAT size = 11182 bytes
Input file size = 11251 bytes

Trying:
zc = 9 zm = 8 zs = 0 f = 0 IDAT size = 8986
zc = 9 zm = 8 zs = 0 f = 5 IDAT size = 8025
zc = 9 zm = 8 zs = 1 f = 5 IDAT size = 8006

Selecting parameters:
zc = 9 zm = 8 zs = 1 f = 5 IDAT size = 8006

Output IDAT size = 8006 bytes (3176 bytes decrease)
Output file size = 8063 bytes (3188 bytes = 28.34% decrease)

Since the Stripe icon is fully opaque, the alpha channel is dropped and we save 28.34% without loss of quality.

auth_stripe.png: PNG image data, 128 x 128, 8-bit/color RGB, non-interlaced, 7.9K

From Sourceforge:

Alpha channel reduction
If all pixels in a Grayscale+Alpha or an RGB+Alpha image are fully opaque (i.e. all alpha components are equal to 2^bitdepth-1), or if the transparency information can be stored entirely in a (much cheaper) tRNS chunk, the alpha channel can be stripped.

Another test with auth_wargaming.png (biggest image with 26.9KB)
auth_wargaming.png: PNG image data, 128 x 128, 8-bit/color RGBA, non-interlaced

Due to not being 100% opaque, the Alpha channel wasn't dropped and we only saved 1.79% (File is now 26.4KB) - but I guess better than nothing?

** Processing: auth_wargaming.png
128x128 pixels, 4x8 bits/pixel, RGB+alpha
Input IDAT size = 27466 bytes
Input file size = 27523 bytes

Trying:
zc = 9 zm = 8 zs = 0 f = 5 IDAT size = 26973

Selecting parameters:
zc = 9 zm = 8 zs = 0 f = 5 IDAT size = 26973

Output IDAT size = 26973 bytes (493 bytes decrease)
Output file size = 27030 bytes (493 bytes = 1.79% decrease)

So it's hit or miss depending on the actual image - the BorgBase logo is just a Font Awesome icon (fa-hdd) and should end up as a Grayscale+Alpha channel since it's literally just black or white.

Should I try optimizing the icons (the existing and new ones) in my next PR?

from authenticatorpro.

Schokobecher avatar Schokobecher commented on August 16, 2024 1

Yeah, app size is a big factor.
Regarding the icon quality, I try to work with the official resources as much as possible (for square icons, I try to stick to 512x512+). If no such option exists, Twitter is a good source (400x400 usually) or email the service provider directly.

Style-wise I think it should always match the original ones, as it's easier to recognize what you are looking for (at least for me) without actually reading. Dark-mode makes this a bit harder for some providers, sadly, as their logo is a mess to begin with.

For the scarping script: sadly, twofactorauth.org is not the most up2date list, so it would scrape stuff that is already dead (Mixer, Bitcoin Exchange Thailand) and miss some that have added 2FA in the meantime.

I currently have these 65 icons prepped. Any input is welcome on what to drop or when it's enough.

1Password
Dashlane
Roboform
ArubaCloud
Leaseweb
Linode
Rackspace
Vultr
Salesforce
AnycoinDirect
Bitpay
Atlassian
Codeship
Mapbox
Pushover
PyPi
Visual Studio Online
Zapier
Name.com
NameSilo
UnitedDomains
Hushmail
GMX.net
mail.de
Migadu
Mailbox.org
Posteo
Web.de
YandexMail
ZohoMail
Nexus Mods
Eve Online
YNAB
23andme
MyHeritage
A2 Hosting
ALLINKL
BlueHost
Cloudways
Contabo
Dreamhost
Host Europe
Netcup
Nitrado
RunCloud
WPengine
IFTT
Autodesk
Envato
ImmobilienScout24
Onshape
Opera
Patreon
Wikipedia
Zendesk
AmazonPay
Braintree
Chargebee
Privacy
AnyDesk
DirectAdmin
Newegg
Shopify
XING
TorGuard

from authenticatorpro.

Schokobecher avatar Schokobecher commented on August 16, 2024 1

Done and Done #31

from authenticatorpro.

jamie-mh avatar jamie-mh commented on August 16, 2024

Your assumption is probably correct, many of these icons may never be used.

However, there may be a couple of things to consider:

  • App size, adding 100s more icons would make the app much larger to download.
  • Icon quality, the icons would need to be sufficiently high res and more or less in a similar style.

I've looked into writing a script to repurpose all the icons from twofactorauth.org before, the trouble is all the icons are 32x32 whereas they need to be at least 128x128 for this purpose.

from authenticatorpro.

jamie-mh avatar jamie-mh commented on August 16, 2024

Very nice, that's a bunch more icons.
Flat icons are generally better because they're easier to edit if you need to, but you're right, it's better to use the originals where possible.

I spotted a few of duplicates though: IFTTT, Privacy and Newegg. They're already in the repo. Other than that, it's a good selection.

from authenticatorpro.

jamie-mh avatar jamie-mh commented on August 16, 2024

It may be possible to compress the icons with something like https://tinypng.com . If the app size can be reduced in any way then it's always better.

from authenticatorpro.

jamie-mh avatar jamie-mh commented on August 16, 2024

Sure, if you don't mind.

I did use another program to optimise a few icons a while back, I can't remember which ones though. So you may not see an improvement on any of those, Wargaming might have been one of them. Even if the improvement is small, why not do it I suppose.

from authenticatorpro.

jamie-mh avatar jamie-mh commented on August 16, 2024

Merged and tested, thanks again.

from authenticatorpro.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.