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

[jackocnr]

@bronisMateusz is there any update on this?

The simple solution, to just provide AVIF format, would just be to add an extra build step to convert the PNG files into AVIF files.

[bronisMateusz]

@jackocnr Sorry, I currently had other topics on my mind, but I should be releasing something over the weekend. Forgive me for waiting so long.

[bronisMateusz]

@jackocnr Again, sorry it took so long, but I have finally prepared a PR with changes: https://github.com/jackocnr/intl-tel-input/pull/1666

[jackocnr]

As outlined in the PR discussion, unfortunately this implementation won't work. I've created a separate issue for switching to consistent 4:3 ratio flags here: https://github.com/jackocnr/intl-tel-input/issues/1668

Until that gets implemented, I would be open to a PR that just adds an extra build step to convert the existing flag sprite (and globe) PNGs into AVIF format.

[djmj]

Instead of raster format consider vector SVG format. This should also improve pagespeed That would enhance render quality of the component and there are some githubs out there which could be used:

https://flagicons.lipis.dev/

[jackocnr]

@djmj thanks for the suggestion, but I've looked into this before and the SVGs are always much larger in filesize than a PNG sprite, and AVIF is much smaller than a PNG, so I'd like to prioritise smaller filesize and hence faster loading times in this case.

[bronisMateusz]

Yes, I can confirm that too, my first idea was to use .svg too, but in this case .avif gives the best results.