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

[rashadmehtab]

1. Description:

   • Issue: PageSpeed Insights is flagging our website for not serving images in next-generation formats.
   • File: flags.png
   • Format: AVIF (AV1 Image File Format)
   • Objective: Convert flags.png to AVIF format to improve website performance and comply with PageSpeed Insights recommendation.

2. Additional Information:

   • Converting images to AVIF can significantly reduce image file sizes, leading to faster page load times and improved user experience.
   • It's important to ensure browser compatibility when serving AVIF images. Most modern browsers support AVIF, but fallback options or feature detection may be necessary for older browsers.

[jackocnr]

Thanks for raising this. I agree it would be a good idea to provide this. It looks like AVIF is supported by all major browsers so assuming the filesize is smaller than PNG then we should provide AVIF files as well (@1x and @2x). I would welcome a PR that implemented this.

[bronisMateusz]

Additionally, as part of this PR, it would be possible to finally equalise the height of all the flags, as they look awful when each one is a different height.

[bronisMateusz]

@jackocnr I have started working on a fix today, all flags will be in 4:3 aspect ratio and most likely in .avif format.

[jackocnr]

This sounds great, thanks. I'm interested to see what you come up with regarding the flag ratios. Bear in mind that there will have to be some kind of compromise somewhere as not all flags have the same ratios e.g. Switzerland, Nepal, Vatican city, Sri Lanka etc etc

[vladsfh]

@jackocnr I have started working on a fix today, all flags will be in 4:3 aspect ratio and most likely in .avif format.

4:3 aspect ratio-d flags would be amazing and drastically reduce styles