Convert flags.png to AVIF format to comply with PageSpeed Insights recommendation

[bronisMateusz]

• replaced .png file with flags with .avif,
• now, all flags in 4:3 format,
• unnecessary empty spaces in the flag file removed,
• removed partially unused styles;

TODO:

• from now on all flags have the same size, so it would be good to get rid of the width and height properties from the styles of each country,
• the --iti-flag-sprite-width variable is set hard, because it was misreading the width from the .avif file;

NICE TO HAVE:

• replace globe img with .avif version

If you would like a source file with all the flags, please let me know.

[jackocnr]

@bronisMateusz thanks for putting this together. It's great to see the massively reduced filesize in AVIF format! And I miiight be slowly coming around to the idea of prioritising consistency over accuracy by forcing all the flags into a standard 4:3 ratio.

With that said, there's something about these flags that feels off to me e.g. the US flag having the blue section cover more than half the width of the flag, when in reality it should be significantly less than half. I'm not sure what it is exactly, but these icons just look inferior to me, maybe because lots of them have had to be stretched to fill the 4:3 space.

Which brings me to my main concern: how did you generate this image sprite? Because you don't seem to have modified the existing image build system (see the Contributing guide section on Updating the flag images), so I'm concerned about how we will maintain this new flag sprite - would we have to manually update it every time one of our 200+ countries make a tweak to their flag design?

[bronisMateusz]

@jackocnr

Which brings me to my main concern: how did you generate this image sprite? Because you don't seem to have modified the existing image build system (see the Contributing guide section on Updating the flag images), so I'm concerned about how we will maintain this new flag sprite - would we have to manually update it every time one of our 200+ countries make a tweak to their flag design?

Yes, while working on this patch, I didn't notice that there was such a system implemented and I did everything manually in the graphic editor, which is why I mentioned the source file. Btw, the source of the flags was this library: https://flagicons.lipis.dev/

I thought the flags from this library looked good enough, as I was more bothered by the size discrepancy with the current version of your library. At the end of the day, of course, it's up to you to decide what suits your preferences better 😁

[jackocnr]

For what it's worth, I do now agree that forcing the flags to a consistent ratio is better, and I also agree that the flag icon project you have used in this PR (and linked to above) is the best option out there at the moment - it's certainly the most well-maintained GitHub project I can find. For reference, there's also Yammadev's flag-icons (not updated for 4 years) and Flagpack (which hasn't had a new release for 3 years).

With that said, I do not fancy being responsible for manually updating the flag sprite every time there is a change, and for that reason, I can only accept a PR that updates/replaces the existing image build system. Sorry about that!