synshop / synshop.org

Synshop.org website codebase
https://synshop.org
MIT License
0 stars 1 forks source link

logo & favicon could be fewer bytes (correct logo?) #29

Closed mrjones-plip closed 1 year ago

mrjones-plip commented 1 year ago

right now the logo we have on every page in the upper left as well as the favicon is 240kb, which is pretty big for how small we render it. It's <25kb if we use an svg.

I'm also not sure if it's the correct logo? I've not seen it without text, but...maybe it's a new thing! SVG attached is edited to have no text, otherwise, here's an SVG with text It's LITERALLY the logo on the current site - sorry! All good :sweat_smile:

image

sargonas commented 1 year ago

Refactored the png to much smaller dimensions, resulting in an 80kb file size. This image is re-used in a few different places and some of them require it to be much larger, so I didn't want to shrink it much smaller than 1,000px square though.

mrjones-plip commented 1 year ago

any reason not to use the SVG? It is both more than 50% smaller in KB than the resized PNG and will scale up or down in any size because it's vector instead of raster.

sargonas commented 1 year ago

Just personal choice based on past experiences, I honestly didn't even make a conscious choice on it.

SVGs are generally considered non-performant and to be avoided on websites logo-ing that loads on all pages, unless working with a specific kind of image use case where its generally necessary... at least that's how the guys at 10up explained it to me when this topic came up with our website at work when we overhauled it last year. They went into a big long explanation about it when one of our guys asked the same thing, and I'll be honest a chunk of it was mostly over my head, but the general takeaway I got was "the billion dollar company who maintains websites for 75% of the fortune 500 world says keep doing things the way we always have been... so guess I will." LOL

In any case, it's not something I really consciously thought about and I'm just defaulting to what I was educated on as a default.

mrjones-plip commented 1 year ago

well, yer doin the work, so you can make the call. Closing!

(N of 2: two non-profit sites that are not billion dollar f500 companies had an SVG logo for the past 5+ years on synshop.org and pch.net - both sites I ran - worked fine - zero complaints)

mrjones-plip commented 1 year ago

oop! I see the change is not live just yet - reopening to track posting of 80kb logo (and possibly seeing the light on amazeball SVGs :artificial_satellite: )

mrjones-plip commented 1 year ago

Oh! We should save your awesome 2000x2000 230kb image for what ever other use and then use this wee one for the header! only 7k!

logo_textless-header

I did a side by side and couldn't tell the difference:

image

sargonas commented 1 year ago

Dude if you want to change the icon in the header then just make a PR already.... diving down rabbit holes on shaving off a few kb in file sizes or debating the merits of one file format over another are miles beyond the level of effort I'm looking into personally putting into getting us to the initial MVP state.

I built it out using what I know, trust, and am comfortable with that required minimal additional effort from me, but I've no designs on stopping other folks from improving on my work if they want to.

mrjones-plip commented 1 year ago

Heya Sarg - Sorry if I offended/frustrated you - not at all my intent!

Checking I see the favicon is 233k. So with this PR, we're saving 450k or almost a 40% in image sizes. I know it's cached after the first page load, but still seemed worth it.