Optimize images

[pepelsbey]

Currently all images are not optimized at all: they all just PNGs with alpha transparency. I guess it gives perfect quality and you don’t have to bother while exporting assets. But it takes 2 MB to load a simple page. Way too much.

So what it did:

1. Converted all images to JPG with decent compression (70-80%)
2. Created 1x and 2x versions used in srcset attributes to load 2x only when it’s needed
3. Fixed size in manifest.json: 600 instead of 512 (actual size of the picture)

What it gives:

1. 463 KB on 1x screen (4,3 times less)
2. 877 KB on 2x screen (2,2 times less)

…without any noticable regression.

I hope you’ll accept this PR and will be careful with your next project.

[andrewda]

Is the black outline around the white logos wanted?

[pepelsbey]

I may have chosen the wrong matte color for white logo. Let me check.

[housseindjirdeh]

@pepelsbey I can't thank you enough for this, you're right - 2MB of assets on a simple landing page is unnecessary. I really appreciate you noticing and putting up a PR for this 🙏 . I plan on adding some images of the Android build app of the app when it's launched and I'll make sure to keep images compressed to a decent size.

Aside from @andrewda's comment, every thing looks good. Since the white logo is in the center of a dark circle it probably wouldn't be noticeable - but I'll let you take a look and see if the dark border can be removed. Otherwise this looks good 🙌

[pepelsbey]

Sorry for delay: yes, I specifically optimized white logo to use #333333 color matte since it’s only used on such background and there’s no need in alpha transparency. I guess it’s good to go then :)

[housseindjirdeh]

Awesome, again - thanks a million for this :)