Progresywne wczytywanie grafik
W ostatnim czasie zastanawiało mnie w jaki sposób Facebook wczytuje zdjęcia w galerii. W pierwszym momencie zdjęcia mają słabą jakość, dopiero po pewnym czasie pojawia się normalna ostrość. Jest to kwestia sposobu zapisu pliku JPG.
Progresywny JPG
Rozwiązanie jakie wykorzystują deweloperzy Facebooka to… progresywny jpg (ang. progressive jpeg). Wystarczy "odpowiednio" zapisać plik.
Różnice między progresywnym jpg a standardowym
Zasadniczą różnicą jest sposób wczytywania grafik. Przy standardowym zapisie obrazek wczytywany jest linearnie – linia po linii, z góry na dół. Przy progresywnym jpg linię nie są czytywane po kolei. Dzięki temu można uzyskać w szybkim czasie nieostry obraz, a wraz z wczytywaniem kolejnych części grafika nabiera wysokiej jakości.
Testowo zapisałem tą samą grafikę na 2 sposoby. Jakie wyciągnąłem z tego wnioski?
- Progresywny obrazek zajmuje o ok. 5% mniej miejsca niż standardowy obrazek. Progresywny waży 872 KB, standardowy – 908 KB. Niewielka to różnica, ale przy wielu zdjęciach (np. w sklepie) robi różnię :).
- Progresywna grafika wczytuje się zauważalnie szybciej.
- Rożnica w jakości jest niezauważalna gołym okiem.
Do generowania progresywnych jpg w PHP służy funkcja imageinterlace. Po więcej informacji odsyłam do manuala :).
