Π² ΠΊΠ°ΠΊΠΎΠΌ ΡΠΎΡΠΌΠ°ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ Π΄Π»Ρ ΡΠ°ΠΉΡΠ°
ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΡΡ Π³ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΡ ΡΠΎΡΠΌΠ°ΡΠΎΠ² Π² Π²Π΅Π±-ΠΏΡΠΎΠ΅ΠΊΡΠ°Ρ
ΠΠ΄Π΄ΠΈ ΠΡΠΌΠ°Π½ΠΈ, Π² ΡΡΠ°ΡΡΠ΅ Β«Π¦Π΅Π½Π° JavaScript Π² 2018 Π³ΠΎΠ΄ΡΒ», ΠΎΠ·Π²ΡΡΠΈΠ» ΠΎΠ΄Π½Ρ ΡΠ΅Π½Π½ΡΡ ΠΌΡΡΠ»Ρ: Π²ΡΠ΅ΠΌΡ, Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎΠ΅ Π½Π° ΠΎΠ±ΡΠ°Π±ΠΎΡΠΊΡ ΡΠΊΡΠΈΠΏΡΠ° ΡΠ°Π·ΠΌΠ΅ΡΠΎΠΌ 200 ΠΠ±, ΠΈ Π½Π° ΠΎΠ±ΡΠ°Π±ΠΎΡΠΊΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, ΠΈΠΌΠ΅ΡΡΠ΅Π³ΠΎ ΡΠ°ΠΊΠΎΠΉ ΠΆΠ΅ ΡΠ°Π·ΠΌΠ΅Ρ, ΡΠ΅ΡΡΡΠ·Π½ΠΎ ΡΠ°Π·Π»ΠΈΡΠ°Π΅ΡΡΡ. ΠΠ΅Π»ΠΎ Π² ΡΠΎΠΌ, ΡΡΠΎ ΠΏΡΠΈ ΠΎΠ±ΡΠ°Π±ΠΎΡΠΊΠ΅ ΠΊΠΎΠ΄Π° Π±ΡΠ°ΡΠ·Π΅ΡΡ Π½ΡΠΆΠ½ΠΎ ΠΏΡΠΎΠ΄Π΅Π»Π°ΡΡ Π±ΠΎΠ»Π΅Π΅ ΠΌΠ°ΡΡΡΠ°Π±Π½ΡΡ ΡΠ°Π±ΠΎΡΡ, ΡΠ΅ΠΌ ΠΏΡΠΈ ΠΏΠΎΠ΄Π³ΠΎΡΠΎΠ²ΠΊΠ΅ ΠΊ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ. ΠΠΎΡ ΡΡΠΎ ΠΎΠ± ΡΡΠΎΠΌ Π³ΠΎΠ²ΠΎΡΠΈΡΡΡ Π² ΡΡΠ°ΡΡΠ΅:
JPEG-ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π½ΡΠΆΠ½ΠΎ Π΄Π΅ΠΊΠΎΠ΄ΠΈΡΠΎΠ²Π°ΡΡ, ΡΠ°ΡΡΠ΅ΡΠΈΠ·ΠΎΠ²Π°ΡΡ ΠΈ Π²ΡΠ²Π΅ΡΡΠΈ Π½Π° ΡΠΊΡΠ°Π½. Π JS-Π±Π°Π½Π΄Π» Π½Π°Π΄ΠΎ, Π΅ΡΠ»ΠΈ ΡΠ°ΡΡΠΌΠ°ΡΡΠΈΠ²Π°ΡΡ ΡΡΠΎ ΡΠΏΡΠΎΡΡΠ½Π½ΠΎ, Π·Π°Π³ΡΡΠ·ΠΈΡΡ, ΡΠ°ΡΠΏΠ°ΡΡΠΈΡΡ, ΡΠΊΠΎΠΌΠΏΠΈΠ»ΠΈΡΠΎΠ²Π°ΡΡ, Π²ΡΠΏΠΎΠ»Π½ΠΈΡΡ. ΠΠ° ΡΠ°ΠΌΠΎΠΌ ΠΆΠ΅ Π΄Π΅Π»Π΅ Π΄Π²ΠΈΠΆΠΊΡ ΠΏΡΠΈΡ ΠΎΠ΄ΠΈΡΡΡ ΡΠ΅ΡΠ°ΡΡ ΠΈ Π΄ΡΡΠ³ΠΈΠ΅ Π·Π°Π΄Π°ΡΠΈ Π² ΠΏΡΠΎΡΠ΅ΡΡΠ΅ ΠΎΠ±ΡΠ°Π±ΠΎΡΠΊΠΈ JS-ΠΊΠΎΠ΄Π°. Π ΡΠ΅Π»ΠΎΠΌ, ΡΡΠΎΠΈΡ ΡΡΠΈΡΡΠ²Π°ΡΡ, ΡΡΠΎ Π½Π° ΠΎΠ±ΡΠ°Π±ΠΎΡΠΊΡ JavaScript-ΠΊΠΎΠ΄Π°, ΡΠ°Π·ΠΌΠ΅ΡΡ ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎ, Π² Π±Π°ΠΉΡΠ°Ρ , ΡΠΎΠΏΠΎΡΡΠ°Π²ΠΈΠΌΡ Ρ ΡΠ°Π·ΠΌΠ΅ΡΠ°ΠΌΠΈ Π΄ΡΡΠ³ΠΈΡ ΠΌΠ°ΡΠ΅ΡΠΈΠ°Π»ΠΎΠ², ΡΡΠ°ΡΠΈΡΡΡ Π³ΠΎΡΠ°Π·Π΄ΠΎ Π±ΠΎΠ»ΡΡΠ΅ ΡΠΈΡΡΠ΅ΠΌΠ½ΡΡ ΡΠ΅ΡΡΡΡΠΎΠ².
ΠΡΠΈ ΡΠ»ΠΎΠ²Π° Π±ΡΠ»ΠΈ Π½Π°ΠΏΠΈΡΠ°Π½Ρ Π² 2018 Π³ΠΎΠ΄Ρ, Π½ΠΎ ΠΎΠ½ΠΈ Π΄ΠΎ ΡΠΈΡ ΠΏΠΎΡ Π±ΠΎΠ»Π΅Π΅ ΡΠ΅ΠΌ ΡΠΏΡΠ°Π²Π΅Π΄Π»ΠΈΠ²Ρ. ΠΡΠ°Π²Π΄Π°, ΡΡΠΈΡΡΠ²Π°Ρ ΡΠ΅ΠΊΡΡΡΡ ΠΎΠ±ΡΡΠ°Π½ΠΎΠ²ΠΊΡ, Π²ΡΡΠΊΠ°Π·Π°Π½Π½Π°Ρ Π·Π΄Π΅ΡΡ ΠΌΡΡΠ»Ρ ΡΠ΅Π³ΠΎΠ΄Π½Ρ Π²ΠΎΡΠΏΡΠΈΠ½ΠΈΠΌΠ°Π΅ΡΡΡ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΠΈΠ½Π°ΡΠ΅.
ΠΡΠΈΠ½ΠΈΠΌΠ°Ρ Π²ΠΎ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ ΡΠΎ, ΡΡΠΎ Π² ΠΌΠΈΡΠ΅ ΡΠ΅ΠΉΡΠ°Ρ ΡΠ°Π·ΡΠ°Π·ΠΈΠ»Π°ΡΡ ΠΏΠ°Π½Π΄Π΅ΠΌΠΈΡ, Ρ Π·Π°ΠΌΠ΅ΡΠΈΠ», ΡΡΠΎ ΠΌΠΎΡ ΠΈΠ½ΡΠ΅ΡΠ½Π΅Ρ-ΡΠΎΠ΅Π΄ΠΈΠ½Π΅Π½ΠΈΠ΅ ΡΡΠ°Π»ΠΎ ΡΠ°Π±ΠΎΡΠ°ΡΡ Π½Π΅ΡΡΠ°Π±ΠΈΠ»ΡΠ½ΠΎ. Π Π½Π°ΡΠ΅ΠΌΡ ΡΡΠ°ΡΡΡΡ, Π±Π»Π°Π³ΠΎΠ΄Π°ΡΡ ΡΠΎΠΌΡ, ΡΡΠΎ Π½Π° ΡΡΡΠ°ΠΆΠ΅ Π±Π»Π°Π³ΠΎΠΏΠΎΠ»ΡΡΠΈΡ ΠΈΠ½ΡΠ΅ΡΠ½Π΅ΡΠ° ΡΡΠΎΡΡ ΠΏΡΠ΅ΠΊΡΠ°ΡΠ½ΡΠ΅ ΡΠΏΠ΅ΡΠΈΠ°Π»ΠΈΡΡΡ, Π½Π΅ Π·Π½Π°ΡΡΠΈΠ΅ ΡΡΡΠ°Π»ΠΎΡΡΠΈ, Π±ΠΎΠ»ΡΡΠ°Ρ ΡΠ°ΡΡΡ ΠΡΠ΅ΠΌΠΈΡΠ½ΠΎΠΉ ΡΠ΅ΡΠΈ Π΄ΠΎ ΡΠΈΡ ΠΏΠΎΡ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΠΎ. ΠΠΎ Π² ΠΈΠ½ΡΠ΅ΡΠ½Π΅ΡΠ΅, ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ½Π½ΠΎ, ΡΡΠΎ-ΡΠΎ ΠΏΡΠΎΠΈΡΡ ΠΎΠ΄ΠΈΡ. Π― ΠΏΠΎΠ»ΡΠ·ΡΡΡΡ ΡΠΎΠ΅Π΄ΠΈΠ½Π΅Π½ΠΈΠ΅ΠΌ Π½Π° 100 ΠΠ±ΠΈΡ/Ρ, Π½ΠΎ Ρ ΠΌΠ΅Π½Ρ Π²ΠΎΠ·Π½ΠΈΠΊΠ°Π΅Ρ ΡΠ°ΠΊΠΎΠ΅ ΠΎΡΡΡΠ΅Π½ΠΈΠ΅, Π±ΡΠ΄ΡΠΎ Ρ ΡΠΈΠΆΡ Π½Π° 3G-ΠΌΠΎΠ΄Π΅ΠΌΠ΅.
ΠΡΠΎ Π²Π½ΠΎΡΠΈΡ Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ Π² Π²ΡΡΠ΅ΠΏΡΠΈΠ²Π΅Π΄ΡΠ½Π½ΡΠ΅ ΡΠ°ΡΡΡΠΆΠ΄Π΅Π½ΠΈΡ. ΠΠ΅Π»ΠΎ Π² ΡΠΎΠΌ, ΡΡΠΎ Π½Π°ΡΠΈ ΡΡΡΡΠΎΠΉΡΡΠ²Π° ΠΌΠΎΠ³ΡΡ ΠΏΠ°ΡΡΠΈΡΡ ΠΈ ΠΊΠΎΠΌΠΏΠΈΠ»ΠΈΡΠΎΠ²Π°ΡΡ JavaScript Ρ ΡΠΎΠΉ ΠΆΠ΅ ΡΠΊΠΎΡΠΎΡΡΡΡ, Ρ ΠΊΠΎΡΠΎΡΠΎΠΉ ΠΎΠ½ΠΈ ΠΌΠΎΠ³Π»ΠΈ ΡΡΠΎ Π΄Π΅Π»Π°ΡΡ ΠΏΠ°ΡΡ Π½Π΅Π΄Π΅Π»Ρ Π½Π°Π·Π°Π΄. ΠΠΎ Π΄Π°Π½Π½ΡΠ΅ ΡΠ΅ΠΏΠ΅ΡΡ ΠΏΡΡΠ΅ΡΠ΅ΡΡΠ²ΡΡΡ ΠΏΠΎ ΡΠ΅ΡΡΠΌ ΠΌΠ΅Π΄Π»Π΅Π½Π½Π΅Π΅. Π ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠ΅ Π² Π½Π°ΡΡΠΎΡΡΠΈΠΉ ΠΌΠΎΠΌΠ΅Π½Ρ ΠΊΡΠ°ΠΉΠ½Π΅ Π²Π°ΠΆΠ½ΠΎ ΡΠΎ, ΠΊΠ°ΠΊΠΎΠΉ ΠΈΠΌΠ΅Π½Π½ΠΎ ΠΎΠ±ΡΡΠΌ Π΄Π°Π½Π½ΡΡ , ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΡΡΠΈΡ Π½Π΅ΠΊΠΈΠΉ ΡΠ΅ΡΡΡΡ, ΠΏΠ΅ΡΠ΅Π΄Π°ΡΡΡΡ ΠΏΠΎ ΡΠ΅ΡΠΈ ΠΏΡΠΈ Π·Π°Π³ΡΡΠ·ΠΊΠ΅ ΡΡΠΎΠ³ΠΎ ΡΠ΅ΡΡΡΡΠ°.
Π Π½Π° ΡΠ°ΠΉΡΠ°Ρ ΠΎΠ±ΡΡΠ½ΠΎ ΠΈΠΌΠ΅Π΅ΡΡΡ Π³ΠΎΡΠ°Π·Π΄ΠΎ Π±ΠΎΠ»ΡΡΠ΅, ΡΠ΅ΠΌ 200 ΠΠ± ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ. Π‘ΡΡΠ°Π½ΠΈΡΠ° Ρ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΠΌΠΈ ΠΌΠ΅Π³Π°Π±Π°ΠΉΡΠ°ΠΌΠΈ ΠΊΠ°ΡΡΠΈΠ½ΠΎΠΊ β ΡΡΠΎ ΠΎΠ±ΡΡΠ½ΠΎ Π΄Π΅Π»ΠΎ. ΠΠ½ΠΎΠ³ΠΈΠ΅ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΈ (ΠΈ Ρ ΡΠΎΠΆΠ΅!), ΠΊΠ°ΠΊ ΠΏΡΠ°Π²ΠΈΠ»ΠΎ, ΡΠΎΠ²ΡΠ΅ΠΌ Π½Π΅ Π·Π°Π΄ΡΠΌΡΠ²Π°ΡΡΡΡ ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ°Ρ ΠΌΠ΅Π΄ΠΈΠ°-ΠΌΠ°ΡΠ΅ΡΠΈΠ°Π»ΠΎΠ².
ΠΠΎ, ΡΡΠΎ ΠΎΡΠ΅Π½Ρ Ρ ΠΎΡΠΎΡΠΎ, ΠΎΠΏΡΠΈΠΌΠΈΠ·ΠΈΡΠΎΠ²Π°ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΡΠ΅ Π½Π° Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΠ°Ρ , Π½Π΅ ΡΠ°ΠΊ ΡΠΆ ΠΈ ΡΠ»ΠΎΠΆΠ½ΠΎ. Π ΡΡΠΎΠΌ ΠΌΠ°ΡΠ΅ΡΠΈΠ°Π»Π΅ ΠΌΡ ΠΏΠΎΠ³ΠΎΠ²ΠΎΡΠΈΠΌ ΠΎ ΡΠΎΠΌ, ΠΊΠ°ΠΊ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡΡΡ ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΡΠΌΠΈ Π³ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠΌΠΈ ΡΠΎΡΠΌΠ°ΡΠ°ΠΌΠΈ Π²ΡΠΎΠ΄Π΅ WebP. ΠΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, ΡΠΎΡ ΡΠ°Π½ΡΠ½Π½ΡΠ΅ Π² ΡΠ°ΠΊΠΈΡ ΡΠΎΡΠΌΠ°ΡΠ°Ρ , ΡΠ°ΡΡΠΎ ΠΎΠΊΠ°Π·ΡΠ²Π°ΡΡΡΡ Π² 2-3 ΡΠ°Π·Π° ΠΌΠ΅Π½ΡΡΠ΅, ΡΠ΅ΠΌ ΡΠ΅, Π΄Π»Ρ Ρ ΡΠ°Π½Π΅Π½ΠΈΡ ΠΊΠΎΡΠΎΡΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΡΡ Π²ΡΠ΅ΠΌ ΠΈΠ·Π²Π΅ΡΡΠ½ΡΠ΅ ΠΈ Π²ΡΠ΅ΠΌΠΈ Π»ΡΠ±ΠΈΠΌΡΠ΅ ΡΡΠ°ΡΡΠ΅ ΡΠΎΡΠΌΠ°ΡΡ (Π²ΡΠΎΠ΄Π΅ JPG ΠΈ PNG). ΠΡΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ Π½ΠΎΠ²ΡΡ ΡΠΎΡΠΌΠ°ΡΠΎΠ² ΠΌΠΎΠΆΠ΅Ρ ΡΠ΅ΡΡΡΠ·Π½ΠΎ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΡΠΈΡΡΠ°ΡΠΈΡ Π² Π»ΡΡΡΡΡ ΡΡΠΎΡΠΎΠ½Ρ.
ΠΠ±ΡΠΈΠΉ ΠΎΠ±Π·ΠΎΡ ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΡΡ Π³ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΡ ΡΠΎΡΠΌΠ°ΡΠΎΠ²
ΠΠ»Ρ ΡΠ»ΡΡΡΠ΅Π½ΠΈΡ ΡΠ°Π±ΠΎΡΡ Ρ Π²Π΅Π±-Π³ΡΠ°ΡΠΈΠΊΠΎΠΉ ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ Π²ΠΎΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡΡΡ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΌΠΈ ΡΡΠ΅ΠΌΡ ΡΠΎΡΠΌΠ°ΡΠ°ΠΌΠΈ:
ΠΠ½ΠΎΠ³ΠΎ Π»ΠΈ ΠΌΠΎΠΆΠ½ΠΎ Π²ΡΠΈΠ³ΡΠ°ΡΡ, ΠΏΠΎΠ»ΡΠ·ΡΡΡΡ Π°Π»ΡΡΠ΅ΡΠ½Π°ΡΠΈΠ²Π½ΡΠΌΠΈ Π³ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠΌΠΈ ΡΠΎΡΠΌΠ°ΡΠ°ΠΌΠΈ?
ΠΠ΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΌΠ΅ΡΡΡΠ΅Π² Π½Π°Π·Π°Π΄ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π» Π² ΠΎΠ΄Π½ΠΎΠΌ ΠΌΠ°ΡΠ΅ΡΠΈΠ°Π»Π΅ ΡΠ»Π΅Π΄ΡΡΡΠ΅Π΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅.
ΠΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅, ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½Π½ΠΎΠ΅ Π² ΠΎΠ΄Π½ΠΎΠΌ ΠΌΠ°ΡΠ΅ΡΠΈΠ°Π»Π΅
Π― ΠΏΡΠΎΠ²ΡΠ» Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠΊΡΠΏΠ΅ΡΠΈΠΌΠ΅Π½ΡΡ, ΡΠ°ΡΡΠΌΠΎΡΡΠ΅Π² ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΡΠΎΡΠΌΠ°ΡΠΎΠ² JPG ΠΈ PNG Π΄Π»Ρ Ρ ΡΠ°Π½Π΅Π½ΠΈΡ ΠΈΡΡ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ. Π― ΠΎΠΏΡΠΈΠΌΠΈΠ·ΠΈΡΠΎΠ²Π°Π» Π²Π°ΡΠΈΠ°Π½ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ imagemin Π΄Π»Ρ ΡΠΎΠ³ΠΎ ΡΡΠΎΠ±Ρ ΡΠ·Π½Π°ΡΡ ΠΎ ΡΠΎΠΌ, ΡΡΠΎ ΠΌΠ½Π΅ ΠΌΠΎΠΆΠ΅Ρ Π΄Π°ΡΡ ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ WebP Π²ΠΌΠ΅ΡΡΠΎ ΡΡΠΈΡ Β«ΡΠ΅ΡΡΠΎΒ»-ΡΠΎΡΠΌΠ°ΡΠΎΠ².
Π Π΅Π·ΡΠ»ΡΡΠ°ΡΡ ΠΎΠΊΠ°Π·Π°Π»ΠΈΡΡ ΠΏΡΡΠΌΠΎ-ΡΠ°ΠΊΠΈ Π½Π΅Π²Π΅ΡΠΎΡΡΠ½ΡΠΌΠΈ.
Π― ΠΏΡΠΎΠ²ΠΎΠ΄ΠΈΠ» ΠΏΠΎΠ΄ΠΎΠ±Π½ΡΠ΅ ΡΠΊΡΠΏΠ΅ΡΠΈΠΌΠ΅Π½ΡΡ Ρ ΠΌΠ½ΠΎΠΆΠ΅ΡΡΠ²ΠΎΠΌ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ. ΠΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈ Π²ΡΠ΅Π³Π΄Π° ΠΎΠΊΠ°Π·ΡΠ²Π°Π»ΠΎΡΡ, ΡΡΠΎ WebP-ΡΠ°ΠΉΠ»Ρ Π±ΡΠ»ΠΈ Π½Π° 30-70% ΠΌΠ΅Π½ΡΡΠ΅ ΡΠ΅ΠΌ Π΄Π°ΠΆΠ΅ ΠΎΠΏΡΠΈΠΌΠΈΠ·ΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ Π²Π΅ΡΡΠΈΠΈ Π³ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΡ ΡΠ°ΠΉΠ»ΠΎΠ² Π΄ΡΡΠ³ΠΈΡ ΡΠΎΡΠΌΠ°ΡΠΎΠ².
Π’ΡΡ ΠΌΠΎΠΆΠ΅Ρ Π²ΠΎΠ·Π½ΠΈΠΊΠ½ΡΡΡ Π²ΠΎΠΏΡΠΎΡ ΠΎ ΡΠΎΠΌ, ΠΊΠ°ΠΊ ΠΏΡΠ΅ΠΎΠ±ΡΠ°Π·ΠΎΠ²Π°Π½ΠΈΠ΅ Π² WebP ΠΌΠΎΠΆΠ΅Ρ ΠΏΠΎΠ²Π»ΠΈΡΡΡ Π½Π° SVG-ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ. Π― ΠΏΠΎΠ΄ΠΎΠ±Π½ΡΡ ΡΠΊΡΠΏΠ΅ΡΠΈΠΌΠ΅Π½ΡΠΎΠ² Ρ SVG Π½Π΅ ΠΏΡΠΎΠ²ΠΎΠ΄ΠΈΠ». SVG β ΡΡΠΎ Π²Π΅ΠΊΡΠΎΡΠ½ΡΠΉ ΡΠΎΡΠΌΠ°Ρ. ΠΡΠΎ Π·Π½Π°ΡΠΈΡ, ΡΡΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π² Π½ΡΠΌ ΡΡΡΠΎΡΡΡΡ Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ ΠΌΠ°ΡΠ΅ΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΡ ΠΈΠ½ΡΡΡΡΠΊΡΠΈΠΉ, Π° Π½Π΅ Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ ΡΠ²Π΅Π΄Π΅Π½ΠΈΠΉ ΠΎ ΡΠ²Π΅ΡΠ΅ ΠΎΡΠ΄Π΅Π»ΡΠ½ΡΡ ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ. ΠΡΠ΅ΠΎΠ±ΡΠ°Π·ΠΎΠ²Π°ΡΡ SVG-ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π² WebP β Π·Π½Π°ΡΠΈΡ ΠΎΡΠΊΠ°Π·Π°ΡΡΡΡ ΠΎΡ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠ΅ΠΉ ΠΏΠΎ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°Π½ΠΈΡ SVG-ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ, ΡΡΠΎ, ΠΏΠΎΠ»Π°Π³Π°Ρ, Π½Π΅Π΄ΠΎΠΏΡΡΡΠΈΠΌΠΎ. Π ΡΠΎΠΌΡ ΠΆΠ΅, Ρ ΠΏΠΎΠ΄ΠΎΠ·ΡΠ΅Π²Π°Ρ, ΡΡΠΎ ΠΏΠΎΠ΄ΠΎΠ±Π½ΠΎΠ΅ ΠΏΡΠ΅ΠΎΠ±ΡΠ°Π·ΠΎΠ²Π°Π½ΠΈΠ΅, Π² Π±ΠΎΠ»ΡΡΠΈΠ½ΡΡΠ²Π΅ ΡΠ»ΡΡΠ°Π΅Π², ΠΏΡΠΈΠ²Π΅Π΄ΡΡ ΠΊ ΡΠ²Π΅Π»ΠΈΡΠ΅Π½ΠΈΡ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ² ΡΠ°ΠΉΠ»ΠΎΠ².
ΠΡΠ°ΡΠ·Π΅ΡΠ½Π°Ρ ΡΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΠΎΡΡΡ
ΠΠ»Ρ ΡΠΎΠ³ΠΎ ΡΡΠΎΠ±Ρ ΡΠ·Π½Π°ΡΡ ΠΎ ΡΠΎΠΌ, ΠΊΠ°ΠΊ ΡΠ΅ ΠΈΠ»ΠΈ ΠΈΠ½ΡΠ΅ Π³ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠ΅ ΡΠΎΡΠΌΠ°ΡΡ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡΡΡ Π±ΡΠ°ΡΠ·Π΅ΡΠ°ΠΌΠΈ, Π·Π°Π³Π»ΡΠ½Π΅ΠΌ Π½Π° caniuse.com.
Π€ΠΎΡΠΌΠ°Ρ WebP ΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠΎΠΉ Π±ΠΎΠ»ΡΡΠΈΠ½ΡΡΠ²Π° Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠ².
ΠΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠ° ΡΠΎΡΠΌΠ°ΡΠ° WebP Π±ΡΠ°ΡΠ·Π΅ΡΠ°ΠΌΠΈ
Π₯ΠΎΡΡ ΡΡΠΎΠ²Π΅Π½Ρ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠΈ ΡΡΠΎΠ³ΠΎ ΡΠΎΡΠΌΠ°ΡΠ° ΠΈ Π²Π΅ΡΡΠΌΠ° Π²ΡΡΠΎΠΊ, ΠΎΡΠ΅Π½Ρ ΠΏΠ»ΠΎΡ ΠΎ ΡΠΎ, ΡΡΠΎ Π΅Π³ΠΎ Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡ Safari ΠΈ Internet Explorer.
Π Π²ΠΎΡ β ΡΠ²Π΅Π΄Π΅Π½ΠΈΡ ΠΎ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠ΅ JPEG 2000.
ΠΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠ° ΡΠΎΡΠΌΠ°ΡΠ° JPEG 2000 Π±ΡΠ°ΡΠ·Π΅ΡΠ°ΠΌΠΈ
Π’Π°ΠΊ, ΡΠ΅ΠΏΠ΅ΡΡ Safari Π½Π° Π½Π°ΡΠ΅ΠΉ ΡΡΠΎΡΠΎΠ½Π΅, Π° Π²ΠΎΡ Internet Explorer ΠΎΠΏΡΡΡ ΠΎΡΡΠ°Π»ΡΡ Π½Π΅ Ρ Π΄Π΅Π».
Π ΠΊΠ°ΠΊ Π½Π°ΡΡΡΡ JPEG XR?
ΠΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠ° ΡΠΎΡΠΌΠ°ΡΠ° JPEG XR Π±ΡΠ°ΡΠ·Π΅ΡΠ°ΠΌΠΈ
Π ΡΡΡ ΠΎΡΠ»ΠΈΡΠΈΠ»ΡΡ ΠΈΠΌΠ΅Π½Π½ΠΎ Internet Explorer. Π ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠ΅, ΠΏΠΎΠ»ΡΠ·ΡΡΡΡ ΡΡΠΈΠΌΠΈ ΡΡΠ΅ΠΌΡ ΡΠΎΡΠΌΠ°ΡΠ°ΠΌΠΈ, ΠΌΡ ΠΏΠ΅ΡΠ΅ΠΊΡΡΠ²Π°Π΅ΠΌ Π²ΡΠ΅ ΡΡΡΠ΅ΡΡΠ²ΡΡΡΠΈΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ (KaiOS Browser Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅Ρ Π½ΠΈ ΠΎΠ΄ΠΈΠ½ ΠΈΠ· ΡΡΠΈΡ ΡΠΎΡΠΌΠ°ΡΠΎΠ², ΠΈ Ρ ΠΏΡΠΈΠ½ΠΎΡΡ Π΅ΠΌΡ ΡΠ²ΠΎΠΈ ΠΈΠ·Π²ΠΈΠ½Π΅Π½ΠΈΡ Π·Π° ΡΠΎ, ΡΡΠΎ ΠΎΠ±Ρ ΠΎΠΆΡ Π΅Π³ΠΎ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ΠΌ, Π½ΠΎ Ρ Π΄Π°ΠΆΠ΅ Π½Π΅ Π·Π½Π°Ρ ΠΎ ΡΠΎΠΌ, ΡΡΠΎ ΡΡΠΎ Π·Π° Π±ΡΠ°ΡΠ·Π΅Ρ).
ΠΠΎΠ³ΠΎΠ²ΠΎΡΠΈΠΌ ΡΠ΅ΠΏΠ΅ΡΡ ΠΎ ΡΠΎΠΌ, ΠΊΠ°ΠΊ Π²ΡΠ±ΠΈΡΠ°ΡΡ ΡΠ°Π·Π½ΡΠ΅ ΡΠΎΡΠΌΠ°ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ, ΠΏΡΠ΅Π΄Π½Π°Π·Π½Π°ΡΠ΅Π½Π½ΡΠ΅ Π΄Π»Ρ ΡΠ°Π·Π½ΡΡ Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠ².
ΠΠ»Π΅ΠΌΠ΅Π½Ρ picture ΡΠΏΠ΅ΡΠΈΡ Π½Π° ΠΏΠΎΠΌΠΎΡΡ
ΠΠΎΡ ΠΊΠ°ΠΊ Π²ΡΠ³Π»ΡΠ΄ΠΈΡ HTML-ΠΊΠΎΠ΄, Π² ΠΊΠΎΡΠΎΡΠΎΠΌ ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΡΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ picture :
Π Chrome, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΠΏΠΎΡΠ»Π΅ ΠΎΠ±ΡΠ°Π±ΠΎΡΠΊΠΈ Π²ΡΡΠ΅ΠΏΡΠΈΠ²Π΅Π΄ΡΠ½Π½ΠΎΠΉ ΡΠ°Π·ΠΌΠ΅ΡΠΊΠΈ, Π±ΡΠ°ΡΠ·Π΅Ρ ΠΏΡΠΈΠ΄ΡΡ ΠΊ ΡΠ΅ΠΌΡ-ΡΠΎ, Π±ΠΎΠ»Π΅Π΅ ΠΈΠ»ΠΈ ΠΌΠ΅Π½Π΅Π΅ ΡΠΊΠ²ΠΈΠ²Π°Π»Π΅Π½ΡΠ½ΠΎΠΌΡ ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΌΡ ΠΊΠΎΠ΄Ρ:
ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ Π½Π°Π±ΠΎΡΠ° ΡΠ»Π΅Π΄ΡΡΡΠΈΡ Π΄ΡΡΠ³ Π·Π° Π΄ΡΡΠ³ΠΎΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² source ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ, ΡΡΠΎ Π² ΠΊΠ°ΠΆΠ΄ΠΎΠΌ Π±ΡΠ°ΡΠ·Π΅ΡΠ΅ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ΡΡΠΈΠΌ ΠΎΠΊΠ°ΠΆΠ΅ΡΡΡ Ρ ΠΎΡΡ Π±Ρ ΠΎΠ΄ΠΈΠ½ ΠΈΠ· Π½ΠΈΡ . Π’Π°ΠΊ, Π±ΠΎΠ»ΡΡΠΈΠ½ΡΡΠ²ΠΎ Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠ² ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡ webp-ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅, Safari Π·Π°Π³ΡΡΠ·ΠΈΡ jp2-ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅, IE β jxr-ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅.
Π£ΠΏΡΠΎΡΡΠ½Π½Π°Ρ Π°Π»ΡΡΠ΅ΡΠ½Π°ΡΠΈΠ²Π°
ΠΡΡΠ΅ΠΏΡΠΈΠ²Π΅Π΄ΡΠ½Π½ΡΠΉ ΡΡΠ°Π³ΠΌΠ΅Π½Ρ ΠΊΠΎΠ΄Π° ΡΡΠ΅Π·Π²ΡΡΠ°ΠΉΠ½ΠΎ Ρ ΠΎΡΠΎΡ ΡΠ΅ΠΌ, ΡΡΠΎ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡΡΡ ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΡΠΌΠΈ Π³ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠΌΠΈ ΡΠΎΡΠΌΠ°ΡΠ°ΠΌΠΈ Π²ΠΎ Π²ΡΠ΅Ρ Π°ΠΊΡΡΠ°Π»ΡΠ½ΡΡ Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ . ΠΠΎ ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΠΏΠΎΠ΄ΠΎΠ±Π½ΠΎΠ³ΠΎ ΠΊΠΎΠ΄Π° ΠΎΡΠ½ΠΎΠ²ΡΠ²Π°Π΅ΡΡΡ Π½Π° ΠΏΡΠ΅Π΄ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ ΠΎ ΡΡΡΠ΅ΡΡΠ²ΠΎΠ²Π°Π½ΠΈΠΈ ΡΠ΅Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ, Π½Π° ΠΊΠΎΡΠΎΡΡΠ΅ Π² Π½ΡΠΌ Π΅ΡΡΡ ΡΡΡΠ»ΠΊΠΈ.
ΠΡΠ»ΠΈ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ ΡΠ°ΠΊΠΈΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΡΠ°ΠΌΠΎΡΡΠΎΡΡΠ΅Π»ΡΠ½ΠΎ β ΠΏΡΠΈΠ΄ΡΡΡΡ Π²Π»ΠΎΠΆΠΈΡΡ Π² ΡΡΠΎ ΠΌΠ½ΠΎΠ³ΠΎ ΡΡΡΠ½ΠΎΠ³ΠΎ ΡΡΡΠ΄Π°. ΠΡΠ»ΠΈ ΠΆΠ΅ Π³Π΅Π½Π΅ΡΠΈΡΠΎΠ²Π°ΡΡ ΠΈΡ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ β ΡΡΠΎ ΠΌΠΎΠΆΠ΅Ρ Π·Π½Π°ΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠ²Π΅Π»ΠΈΡΠΈΡΡ Π²ΡΠ΅ΠΌΡ ΡΠ±ΠΎΡΠΊΠΈ ΠΏΡΠΎΠ΅ΠΊΡΠ°. ΠΠ±ΡΠ°Π±ΠΎΡΠΊΠ° Π³ΡΠ°ΡΠΈΠΊΠΈ, ΠΊΠ°ΠΊ ΠΈΠ·Π²Π΅ΡΡΠ½ΠΎ, ΡΡΠ°Π½ΠΎΠ²ΠΈΡΡΡ Π²Π΅ΡΡΠΌΠ° ΠΌΠ΅Π΄Π»Π΅Π½Π½ΡΠΌ ΠΏΡΠΎΡΠ΅ΡΡΠΎΠΌ Π² ΡΠΎΠΌ ΡΠ»ΡΡΠ°Π΅, Π΅ΡΠ»ΠΈ ΡΠ΅ΡΡ ΠΈΠ΄ΡΡ ΠΎ ΠΌΠ½ΠΎΠΆΠ΅ΡΡΠ²Π΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ.
ΠΠΈΡΡ ΠΎΡΠ΅Π½Ρ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΈΠ΅ ΠΏΠΎΡΠ΅ΡΠΈΡΠ΅Π»ΠΈ ΠΌΠΎΠ΅Π³ΠΎ Π±Π»ΠΎΠ³Π° ΠΏΠΎΠ»ΡΠ·ΡΡΡΡΡ Internet Explorer (Π·Π° ΠΏΠΎΡΠ»Π΅Π΄Π½ΠΈΠ΅ 7 Π΄Π½Π΅ΠΉ Π΅Π³ΠΎ ΠΏΠΎΠΏΡΡΠ°Π»ΠΈΡΡ ΠΏΠΎΡΠΌΠΎΡΡΠ΅ΡΡ Π»ΠΈΡΡ 3 ΡΠ΅Π»ΠΎΠ²Π΅ΠΊΠ° Ρ IE, ΡΡΠΎ ΡΠΎΡΡΠ°Π²ΠΈΠ»ΠΎ 0.02% ΡΡΠ°ΡΠΈΠΊΠ°). ΠΠΎΡΡΠΎΠΌΡ Ρ ΡΠ΅ΡΠΈΠ» Π²ΠΎΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡΡΡ ΡΠΏΡΠΎΡΡΠ½Π½ΡΠΌ Π²Π°ΡΠΈΠ°Π½ΡΠΎΠΌ Π²ΡΡΠ΅ΠΎΠΏΠΈΡΠ°Π½Π½ΠΎΠ³ΠΎ ΡΠ΅ΡΠ΅Π½ΠΈΡ:
Π― ΠΎΡΠ΄Π°Ρ ΠΊΠΎΠΌΠΏΠ°ΠΊΡΠ½ΠΎΠ΅ webp-ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΡΠ΅ΠΌ Π±ΡΠ°ΡΠ·Π΅ΡΠ°ΠΌ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡ ΡΡΠΎΡ ΡΠΎΡΠΌΠ°Ρ (Chrome, Firefox, Edge), Π° Π±ΡΠ°ΡΠ·Π΅ΡΠ°ΠΌ, ΠΊΠΎΡΠΎΡΡΠ΅ ΡΡΠΎΠ³ΠΎ ΡΠΎΡΠΌΠ°Ρ Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡ (IE, Safari), ΠΏΡΠ΅Π΄Π»Π°Π³Π°Ρ Π½Π°ΡΠ»Π΅Π΄ΠΈΠ΅ ΠΏΡΠΎΡΠ»ΠΎΠ³ΠΎ β jpeg-ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ.
Π‘ ΠΌΠΎΠ΅ΠΉ ΡΠΎΡΠΊΠΈ Π·ΡΠ΅Π½ΠΈΡ ΡΡΠΎ β ΠΏΡΠΈΠΌΠ΅Ρ ΠΏΡΠΎΠ³ΡΠ΅ΡΡΠΈΠ²Π½ΠΎΠ³ΠΎ ΡΠ»ΡΡΡΠ΅Π½ΠΈΡ. ΠΡΠΎΠ΅ΠΊΡ ΠΎΡΡΠ°ΡΡΡΡ ΡΠ°Π±ΠΎΡΠΎΡΠΏΠΎΡΠΎΠ±Π½ΡΠΌ Π½Π° ΡΡΠ°ΡΡΡ Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ , Ρ ΠΎΡΡ Π·Π°Π³ΡΡΠ·ΠΊΠ° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ ΠΈ Π·Π°Π½ΠΈΠΌΠ°Π΅Ρ Π±ΠΎΠ»ΡΡΠ΅ Π²ΡΠ΅ΠΌΠ΅Π½ΠΈ. ΠΡΠΎ β ΠΊΠΎΠΌΠΏΡΠΎΠΌΠΈΡΡ, ΠΊΠΎΡΠΎΡΡΠΉ ΠΌΠ΅Π½Ρ ΡΡΡΡΠ°ΠΈΠ²Π°Π΅Ρ. (ΠΡΠ°Π²Π΄Π°, Ρ Π½Π°Π΄Π΅ΡΡΡ, ΡΡΠΎ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠ° WebP ΡΠΊΠΎΡΠΎ ΠΏΠΎΡΠ²ΠΈΡΡΡ ΠΈ Π² Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ ΠΎΡ Apple).
ΠΡΠΎΠ²Π΅ΡΠΊΠ° ΡΠ°Π±ΠΎΡΠΎΡΠΏΠΎΡΠΎΠ±Π½ΠΎΡΡΠΈ ΡΠ΅ΡΠ΅Π½ΠΈΡ
ΠΡΠ΅ΠΎΠ±ΡΠ°Π·ΠΎΠ²Π°Π½ΠΈΠ΅ Π³ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΡ ΡΠ°ΠΉΠ»ΠΎΠ² Π² ΡΠΎΡΠΌΠ°Ρ WebP
ΠΠΎΠΌΠΏΠ°Π½ΠΈΡ Google ΡΠΎΠ·Π΄Π°Π»Π° Π½Π°Π±ΠΎΡ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠΎΠ², Π½Π°ΠΏΡΠ°Π²Π»Π΅Π½Π½ΡΠΉ Π½Π° ΡΠ°Π±ΠΎΡΡ Ρ webp-ΡΠ°ΠΉΠ»Π°ΠΌΠΈ. ΠΠ΄ΠΈΠ½ ΠΈΠ· ΡΠ°ΠΊΠΈΡ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠΎΠ² Π½Π°Π·ΡΠ²Π°Π΅ΡΡΡ cwebp. ΠΠ½ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΠΏΡΠ΅ΠΎΠ±ΡΠ°Π·ΠΎΠ²ΡΠ²Π°ΡΡ Π² WebP Π³ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠ΅ ΡΠ°ΠΉΠ»Ρ Π΄ΡΡΠ³ΠΈΡ ΡΠΎΡΠΌΠ°ΡΠΎΠ².
ΠΡΠ»ΠΈ Π²Ρ ΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΠ΅ΡΡ MacOS, ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ ΡΡΠΎΡ Π½Π°Π±ΠΎΡ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠΎΠ² ΠΌΠΎΠΆΠ½ΠΎ Ρ ΠΏΠΎΠΌΠΎΡΡΡ Homebrew:
ΠΠ° Π΄ΡΡΠ³ΠΈΡ ΠΏΠ»Π°ΡΡΠΎΡΠΌΠ°Ρ , ΠΏΠΎΠ»Π°Π³Π°Ρ, Π½ΡΠΆΠ½ΠΎ Π±ΡΠ΄Π΅Ρ Π·Π°Π³ΡΡΠ·ΠΈΡΡ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ΡΡΠΈΠΉ libwebp-ΠΏΠ°ΠΊΠ΅Ρ ΠΈΠ· ΡΠ΅ΠΏΠΎΠ·ΠΈΡΠΎΡΠΈΡ.
ΠΠΎΡΠ»Π΅ ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠΈ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠΎΠ² ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡΡΡ ΠΈΠΌΠΈ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ°ΠΊ:
Π Π°ΡΡΠΌΠΎΡΡΠΈΠΌ ΡΡΡ ΠΊΠΎΠΌΠ°Π½Π΄Ρ:
ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΡΡ Π³ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΡ ΡΠΎΡΠΌΠ°ΡΠΎΠ² Π² React-ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡΡ
. Π― ΠΏΠΎΠ»ΡΠ·ΡΡΡΡ Π΄Π»Ρ ΡΡΠΎΠ³ΠΎ React-ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠ°ΠΌΠΈ. ΠΠ° ΠΌΠΎΠΉ Π²Π·Π³Π»ΡΠ΄, ΡΡΠΎ ΠΎΡΠ΅Π½Ρ ΡΠ΄ΠΎΠ±Π½ΠΎ. ΠΠΎΡ ΠΊΠ°ΠΊ ΡΡΠΎ Π²ΡΠ³Π»ΡΠ΄ΠΈΡ:
ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠ° ImgWithFallback ΠΎΡΠ΅Π½Ρ ΠΏΠΎΡ ΠΎΠΆΠ΅ Π½Π° ΡΠ°Π±ΠΎΡΡ Ρ ΠΎΠ±ΡΡΠ½ΡΠΌ ΡΠ΅Π³ΠΎΠΌ img :
ΠΡΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΡΡ Π³ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΡ ΡΠΎΡΠΌΠ°ΡΠΎΠ² ΡΠΎ ΡΡΠΈΠ»ΠΈΠ·ΠΎΠ²Π°Π½Π½ΡΠΌΠΈ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠ°ΠΌΠΈ
ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΏΠ°ΠΊΠ΅ΡΠ° gatsby-image
ΠΡΠ»ΠΈ ΡΡΠΎΡ ΠΏΠ°ΠΊΠ΅Ρ Π²Π°ΠΌ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ΅Π½ β Π²Π·Π³Π»ΡΠ½ΠΈΡΠ΅ Π½Π° Π΅Π³ΠΎ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°ΡΠΈΡ.
ΠΠΈΠ½ΡΡΡ WebP
ΠΠ΄ΠΈΠ½ΡΡΠ²Π΅Π½Π½ΡΠΌ ΡΠ΅Π°Π»ΡΠ½ΡΠΌ Π½Π΅Π΄ΠΎΡΡΠ°ΡΠΊΠΎΠΌ webp, ΠΊΠΎΡΠΎΡΡΠΉ ΠΌΠ½Π΅ ΡΠ΄Π°Π»ΠΎΡΡ ΠΎΠ±Π½Π°ΡΡΠΆΠΈΡΡ, Π·Π°ΠΊΠ»ΡΡΠ°Π΅ΡΡΡ Π² ΡΠΎΠΌ, ΡΡΠΎ Ρ ΡΠ°ΠΉΠ»Π°ΠΌΠΈ ΡΡΠΎΠ³ΠΎ ΡΠΎΡΠΌΠ°ΡΠ° ΠΎΡΠ΅Π½Ρ Π½Π΅ΡΠ΄ΠΎΠ±Π½ΠΎ ΡΠ°Π±ΠΎΡΠ°ΡΡ.
ΠΠΎΠ»ΡΡΠΈΠ½ΡΡΠ²ΠΎ Π½Π°ΡΡΠΎΠ»ΡΠ½ΡΡ ΠΏΠ°ΠΊΠ΅ΡΠΎΠ² Π΄Π»Ρ ΡΠ°Π±ΠΎΡΡ Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡΠΌΠΈ ΠΏΠΎΠΊΠ° Π΅Π³ΠΎ Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡ. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, Ρ Π½Π΅ ΠΌΠΎΠ³Ρ ΠΎΡΠΊΡΡΠ²Π°ΡΡ webp-ΡΠ°ΠΉΠ»Ρ Π² Preview Π½Π° MacOS. ΠΡΠΎ Π·Π½Π°ΡΠΈΡ, ΡΠΊΠ°ΠΆΠ΅ΠΌ, ΡΡΠΎ Π΅ΡΠ»ΠΈ Ρ ΡΠΎΡ ΡΠ°Π½Ρ webp-ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Ρ Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΡ, Ρ Π½Π΅ ΡΠΌΠΎΠ³Ρ ΠΏΡΠΎΡΠΌΠΎΡΡΠ΅ΡΡ Π΅Π³ΠΎ Π½Π° ΠΊΠΎΠΌΠΏΡΡΡΠ΅ΡΠ΅!
ΠΡΠ΅ΠΎΠ±ΡΠ°Π·ΠΎΠ²Π°Π½ΠΈΠ΅ webp-ΡΠ°ΠΉΠ»ΠΎΠ² Π² jpeg-ΡΠ°ΠΉΠ»Ρ β ΠΏΡΠΎΡΠ΅ΡΡ Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ ΠΏΡΠΎΡΡΠΎΠΉ. Π ΠΈΠ½ΡΠ΅ΡΠ½Π΅ΡΠ΅ ΠΌΠΎΠΆΠ½ΠΎ Π½Π°ΠΉΡΠΈ ΠΌΠ½ΠΎΠ³ΠΎ Π±Π΅ΡΠΏΠ»Π°ΡΠ½ΡΡ ΡΠ΅ΡΠ²ΠΈΡΠΎΠ², Π²ΡΠΏΠΎΠ»Π½ΡΡΡΠΈΡ ΠΏΠΎΠ΄ΠΎΠ±Π½ΠΎΠ΅ ΠΏΡΠ΅ΠΎΠ±ΡΠ°Π·ΠΎΠ²Π°Π½ΠΈΠ΅. ΠΠΎ, ΡΡΠΎ, ΠΎΠΏΡΡΡ ΠΆΠ΅, Π½Π΅ ΡΠ°ΠΊ ΡΠ΄ΠΎΠ±Π½ΠΎ, ΠΊΠ°ΠΊ ΡΠ°Π±ΠΎΡΠ° Ρ ΡΡΠ°Π΄ΠΈΡΠΈΠΎΠ½Π½ΡΠΌΠΈ Π³ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠΌΠΈ ΡΠΎΡΠΌΠ°ΡΠ°ΠΌΠΈ. ΠΡΠ»ΠΈ Π²Π°Ρ ΡΠ°ΠΉΡ ΠΏΡΠ΅Π΄Π»Π°Π³Π°Π΅Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΠΌ Π·Π°Π³ΡΡΠΆΠ°ΡΡ Ρ Π½Π΅Π³ΠΎ Π³ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠ΅ ΡΠ°ΠΉΠ»Ρ β Π²Ρ, Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, ΡΠ΅ΡΠΈΡΠ΅, ΡΡΠΎ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄ Π½Π° webp Π²Π°ΠΌ Π½Π΅ Π½ΡΠΆΠ΅Π½.
ΠΡΠΎΠ³ΠΈ
ΠΠ½Π΅ ΠΎΡΠ΅Π½Ρ Π½ΡΠ°Π²ΠΈΡΡΡ ΡΠΎ, ΡΡΠΎ Π±Π»Π°Π³ΠΎΠ΄Π°ΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ webp ΡΠ΄Π°Π»ΠΎΡΡ ΡΠΎΠΊΡΠ°ΡΠΈΡΡ ΡΠ°Π·ΠΌΠ΅Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ Π² ΠΌΠΎΡΠΌ Π±Π»ΠΎΠ³Π΅ ΠΏΡΠΈΠΌΠ΅ΡΠ½ΠΎ Π½Π° 50%. ΠΠΎΠΌΠΈΠΌΠΎ ΡΠΎΠ³ΠΎ, ΡΡΠΎ Π² Π½Π°ΡΠ΅ Π½Π΅ΠΏΡΠΎΡΡΠΎΠ΅ Π²ΡΠ΅ΠΌΡ ΡΡΠΎ ΡΠ»ΡΡΡΠ°Π΅Ρ Π²ΠΏΠ΅ΡΠ°ΡΠ»Π΅Π½ΠΈΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΉ ΠΎΡ ΡΠ°Π±ΠΎΡΡ Ρ Π½ΠΈΠΌ, Ρ Π΅ΡΡ Π½Π°Π΄Π΅ΡΡΡ Π½Π° ΡΠΎ, ΡΡΠΎ ΡΡΠΎ ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΡ ΠΌΠ½Π΅ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΡΡΠΊΠΎΠ½ΠΎΠΌΠΈΡΡ Π½Π° ΠΎΠΏΠ»Π°ΡΠ΅ ΡΡΠ°ΡΠΈΠΊΠ°.
ΠΠΎΠ½Π΅ΡΠ½ΠΎ, ΠΈΠ΄Π΅Ρ ΡΡΡΠ½ΠΎΠ³ΠΎ ΠΏΡΠ΅ΠΎΠ±ΡΠ°Π·ΠΎΠ²Π°Π½ΠΈΡ Π³ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΡ ΡΠ°ΠΉΠ»ΠΎΠ² Π² ΡΠΎΡΠΌΠ°Ρ webp Π²ΡΠ³Π»ΡΠ΄ΠΈΡ Π²Π΅ΡΡΠΌΠ° Π½Π΅ΠΏΡΠ°ΠΊΡΠΈΡΠ½ΠΎΠΉ. Π― ΡΠΆΠ΅ Π·Π°Π½ΠΈΠΌΠ°ΡΡΡ ΠΈΠ·ΡΡΠ΅Π½ΠΈΠ΅ΠΌ Π²ΠΎΠΏΡΠΎΡΠ° ΠΎ ΡΠΎΠΌ, ΠΊΠ°ΠΊ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ ΠΊΠΎΠ½Π²Π΅ΡΡΠΈΡΠΎΠ²Π°ΡΡ Π² ΡΡΠΎΡ ΡΠΎΡΠΌΠ°Ρ jpg- ΠΈ png-ΡΠ°ΠΉΠ»Ρ. Π ΠΈΠ΄Π΅Π°Π»Π΅ ΡΡΠΎΡ ΠΏΡΠΎΡΠ΅ΡΡ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΏΡΠΎΠΈΡΡ ΠΎΠ΄ΠΈΡΡ ΡΠΎΠ²Π΅ΡΡΠ΅Π½Π½ΠΎ Π½Π΅Π·Π°ΠΌΠ΅ΡΠ½ΠΎ Π΄Π»Ρ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠ°, Π²ΠΎ Π²ΡΠ΅ΠΌΡ ΡΠ±ΠΎΡΠΊΠΈ ΡΠ°ΠΉΡΠ°.
Π‘ΠΎΠ·Π΄Π°ΡΠ΅Π»ΠΈ Π²Π΅Π±-ΠΏΡΠΎΠ΅ΠΊΡΠΎΠ² ΠΎΠ±ΡΡΠ½ΠΎ Π½Π΅ ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΡΡΡΡΡ ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎΡΡΡΠΌΠΈ ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½ΠΈΡ Π½ΠΎΠ²ΡΡ Π³ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΡ ΡΠΎΡΠΌΠ°ΡΠΎΠ². ΠΠΎ Ρ ΠΏΠΎΠ»Π°Π³Π°Ρ, ΡΡΠΎ ΡΠ°Π·Π±ΠΈΡΠ°ΡΡΡΡ Π² ΡΡΠΎΠΌ Π²ΠΎΠΏΡΠΎΡΠ΅ Π²Π΅ΡΡΠΌΠ° ΠΏΠΎΠ»Π΅Π·Π½ΠΎ. ΠΠ΅Π΄Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ WebP β ΡΡΠΎ, Π²Π΅ΡΠΎΡΡΠ½ΠΎ, ΡΠ°ΠΌΡΠΉ ΠΏΡΠΎΡΡΠΎΠΉ ΡΠΏΠΎΡΠΎΠ± ΡΠΎΠΊΡΠ°ΡΠΈΡΡ ΡΠ°Π·ΠΌΠ΅ΡΡ Π²Π΅Π±-ΠΏΡΠΎΠ΅ΠΊΡΠ° Π½Π° ΡΠΎΡΠ½ΠΈ ΠΊΠΈΠ»ΠΎΠ±Π°ΠΉΡ.
Π£Π²Π°ΠΆΠ°Π΅ΠΌΡΠ΅ ΡΠΈΡΠ°ΡΠ΅Π»ΠΈ! ΠΠΎΠ»ΡΠ·ΡΠ΅ΡΠ΅ΡΡ Π»ΠΈ Π²Ρ ΡΠΎΡΠΌΠ°ΡΠΎΠΌ WebP?
ΠΠΏΡΠΈΠΌΠΈΠ·Π°ΡΠΈΡ Π²Π΅Π±-Π³ΡΠ°ΡΠΈΠΊΠΈ Π² 2021 Π³ΠΎΠ΄Ρ
ΠΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΡΠ΅ Π½Π° Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΠ°Ρ , ΠΏΡΠΈΠ²Π»Π΅ΠΊΠ°ΡΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΉ, ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΠΈ Π΄ΠΎΠ²ΠΎΠ»ΡΠ½ΠΎ-ΡΠ°ΠΊΠΈ ΠΎΡ ΠΎΡΠ½ΠΎ ΡΡΠ»ΠΊΠ°ΡΡ ΠΏΠΎ Π½ΠΈΠΌ ΠΌΡΡΡΡ. ΠΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π΄Π΅Π»Π°ΡΡ Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΡ Π»ΡΡΡΠ΅ Π²ΠΎ Π²ΡΡΠΌ ΠΊΡΠΎΠΌΠ΅ ΡΠΊΠΎΡΠΎΡΡΠΈ ΡΠ°Π±ΠΎΡΡ ΡΡΡΠ°Π½ΠΈΡ. ΠΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ β ΡΡΠΎ ΠΎΠ³ΡΠΎΠΌΠ½ΡΠ΅ ΠΊΡΡΠΊΠΈ Π±Π°ΠΉΡΠΎΠ², ΠΊΠΎΡΠΎΡΡΠ΅ ΠΎΠ±ΡΡΠ½ΠΎ ΡΠ²Π»ΡΡΡΡΡ ΡΠ΅ΠΌΠΈ ΡΠ°ΡΡΡΠΌΠΈ ΡΠ°ΠΉΡΠΎΠ², ΠΊΠΎΡΠΎΡΡΠ΅ Π·Π°Π³ΡΡΠΆΠ°ΡΡΡΡ ΠΌΠ΅Π΄Π»Π΅Π½Π½Π΅Π΅ Π²ΡΠ΅Π³ΠΎ. Π ΡΡΠΎΠΌ ΠΌΠ°ΡΠ΅ΡΠΈΠ°Π»Π΅ Ρ ΡΠΎΠ±ΡΠ°Π» Π²ΡΡ, ΡΡΠΎ Π½ΡΠΆΠ½ΠΎ Π·Π½Π°ΡΡ Π² 2021 Π³ΠΎΠ΄Ρ ΠΎΠ± ΡΠ»ΡΡΡΠ΅Π½ΠΈΠΈ ΡΠΊΠΎΡΠΎΡΡΠΈ ΡΠ°Π±ΠΎΡΡ Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡ ΡΠ΅ΡΠ΅Π· ΠΎΠΏΡΠΈΠΌΠΈΠ·Π°ΡΠΈΡ ΡΠ°Π±ΠΎΡΡ Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡΠΌΠΈ.
ΠΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΎΠ±ΡΡΠ½ΠΎ ΠΈΠΌΠ΅ΡΡ Π±ΠΎΠ»ΡΡΠΈΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΡ. ΠΠ°ΠΆΠ΅ ΠΎΡΠ΅Π½Ρ Π±ΠΎΠ»ΡΡΠΈΠ΅. Π Π±ΠΎΠ»ΡΡΠΈΠ½ΡΡΠ²Π΅ ΡΠ»ΡΡΠ°Π΅Π² CSS- ΠΈ JavaScript-ΡΠ΅ΡΡΡΡΡ, Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΡΠ΅ Π΄Π»Ρ ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠ΅Π½ΠΈΡ ΡΠ°Π±ΠΎΡΠΎΡΠΏΠΎΡΠΎΠ±Π½ΠΎΡΡΠΈ ΡΡΡΠ°Π½ΠΈΡ β ΡΡΠΎ ΠΌΠ΅Π»ΠΎΡΡ Π² ΡΡΠ°Π²Π½Π΅Π½ΠΈΠΈ Ρ ΡΠ΅ΠΌ ΠΎΠ±ΡΡΠΌΠΎΠΌ Π΄Π°Π½Π½ΡΡ , ΠΊΠΎΡΠΎΡΡΠΉ Π½ΡΠΆΠ½ΠΎ ΠΏΠ΅ΡΠ΅Π΄Π°ΡΡ ΠΏΠΎ ΡΠ΅ΡΠΈ Π΄Π»Ρ Π·Π°Π³ΡΡΠ·ΠΊΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΡΡ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ°Ρ . Β«ΠΠ΅Π΄Π»Π΅Π½Π½ΡΠ΅Β» ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΌΠΎΠ³ΡΡ ΠΏΠΎΠ²ΡΠ΅Π΄ΠΈΡΡ ΠΏΠΎΠΊΠ°Π·Π°ΡΠ΅Π»ΡΠΌ Core Web Vitals ΡΠ°ΠΉΡΠ°, ΠΌΠΎΠ³ΡΡ ΠΎΠΊΠ°Π·Π°ΡΡ Π²ΠΎΠ·Π΄Π΅ΠΉΡΡΠ²ΠΈΠ΅ Π½Π° SEO ΠΈ ΠΏΠΎΡΡΠ΅Π±ΠΎΠ²Π°ΡΡ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΡ Π·Π°ΡΡΠ°Ρ Π½Π° ΡΡΠ°ΡΠΈΠΊ. ΠΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ β ΡΡΠΎ ΠΎΠ±ΡΡΠ½ΠΎ ΡΠΎΡ ΡΠ°ΠΌΡΠΉ ΡΠ΅ΡΡΡΡ ΡΠ°ΠΉΡΠ°, ΠΊΠΎΡΠΎΡΡΠΉ ΠΎΠΊΠ°Π·ΡΠ²Π°Π΅Ρ ΡΠ΅ΡΠ°ΡΡΠ΅Π΅ Π²ΠΎΠ·Π΄Π΅ΠΉΡΡΠ²ΠΈΠ΅ Π½Π° ΠΏΠΎΠΊΠ°Π·Π°ΡΠ΅Π»Ρ Largest Contentful Paint (LCP) ΠΈ Π½Π° Π·Π°Π΄Π΅ΡΠΆΠΊΠΈ Π·Π°Π³ΡΡΠ·ΠΊΠΈ ΡΠ°ΠΉΡΠ°. ΠΠ½ΠΈ ΡΠΏΠΎΡΠΎΠ±Π½Ρ ΡΠ²Π΅Π»ΠΈΡΠΈΡΡ ΠΏΠΎΠΊΠ°Π·Π°ΡΠ΅Π»Ρ Cumulative Layout Shift (CLS). ΠΡΠ»ΠΈ Π²Ρ Π½Π΅ Π·Π½Π°ΠΊΠΎΠΌΡ Ρ ΡΡΠΈΠΌΠΈ ΠΏΠΎΠΊΠ°Π·Π°ΡΠ΅Π»ΡΠΌΠΈ ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΠΈ ΡΠ°ΠΉΡΠΎΠ² β ΠΏΠΎΡΠΈΡΠ°ΠΉΡΠ΅ ΠΎ Π½ΠΈΡ Π² Definitive Guide to Measuring Web Performance.
ΠΠ΄Π΅ΡΡ ΠΌΡ ΠΏΠΎΠ³ΠΎΠ²ΠΎΡΠΈΠΌ ΠΎ ΠΏΠΎΠ΄Π±ΠΎΡΠ΅ Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ΡΡΠ΅Π³ΠΎ ΡΠΎΡΠΌΠ°ΡΠ° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ, ΠΎΠ± ΠΎΠΏΡΠΈΠΌΠΈΠ·Π°ΡΠΈΠΈ ΠΈΡ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ² Π² ΠΏΠΈΠΊΡΠ΅Π»ΡΡ ΠΈ ΠΊΠ°ΡΠ΅ΡΡΠ²Π°, Π° ΡΠ°ΠΊ ΠΆΠ΅ ΠΎ Π²ΡΡΡΠ°ΠΈΠ²Π°Π½ΠΈΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ Π² Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΡ ΠΈ ΠΎ Π»Π΅Π½ΠΈΠ²ΠΎΠΉ Π·Π°Π³ΡΡΠ·ΠΊΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ.
1. Π€ΠΎΡΠΌΠ°Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ
ΠΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, ΠΊΠΎΡΠΎΡΡΠ΅ Π½Π΅ ΠΏΠΎΠ²ΡΠ΅Π΄ΡΡ ΡΠΊΠΎΡΠΎΡΡΠΈ ΡΠ°Π±ΠΎΡΡ ΡΠ°ΠΉΡΠ°, ΠΏΡΠ΅ΠΆΠ΄Π΅ Π²ΡΠ΅Π³ΠΎ, Π΄ΠΎΠ»ΠΆΠ½Ρ ΠΈΠΌΠ΅ΡΡ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ΡΡΠΈΠΉ ΡΠΎΡΠΌΠ°Ρ. ΠΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠ΅ ΡΠΎΡΠΌΠ°ΡΡ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠ°Π½Ρ Ρ ΡΡΡΡΠΎΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΠΈΡ Π΄Π»Ρ Ρ ΡΠ°Π½Π΅Π½ΠΈΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ Π²ΠΈΠ΄ΠΎΠ². Π ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠ΅, Π΅ΡΠ»ΠΈ Π΄Π»Ρ Ρ ΡΠ°Π½Π΅Π½ΠΈΡ ΠΊΡΡΠΏΠ½ΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, ΡΠΏΠΎΡΠΎΠ±Π½ΠΎΠ³ΠΎ Π·Π°ΠΌΠ΅Π΄Π»ΠΈΡΡ Π·Π°Π³ΡΡΠ·ΠΊΡ ΡΠ°ΠΉΡΠ°, ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π½Π΅ΠΏΠΎΠ΄Ρ ΠΎΠ΄ΡΡΠΈΠΉ ΡΠΎΡΠΌΠ°Ρ, ΡΡΠΎ ΠΌΠΎΠΆΠ΅Ρ ΡΡ ΡΠ΄ΡΠΈΡΡ ΡΠΈΡΡΠ°ΡΠΈΡ.
ΠΡΡΡ ΠΎΠ΄Π½ΠΎ Ρ ΠΎΡΠΎΡΠ΅Π΅ ΠΎΠ±ΡΠ΅Π΅ ΠΏΡΠ°Π²ΠΈΠ»ΠΎ, ΠΊΠ°ΡΠ°ΡΡΠ΅Π΅ΡΡ Π²ΡΠ±ΠΎΡΠ° ΡΠΎΡΠΌΠ°ΡΠΎΠ² Π΄Π»Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ. ΠΠ°ΠΊΠ»ΡΡΠ°Π΅ΡΡΡ ΠΎΠ½ΠΎ Π² ΡΠΎΠΌ, ΡΡΠΎ Π΄Π»Ρ ΡΠΎΡΠΎΠ³ΡΠ°ΡΠΈΠΉ ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡΠ΅ΡΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠΎΡΠΌΠ°Ρ JPG, Π° Π΄Π»Ρ ΡΠΈΡΡΠ½ΠΊΠΎΠ², ΡΡ Π΅ΠΌ ΠΈ ΠΏΡΠΎΡΠ΅Π³ΠΎ ΠΏΠΎΠ΄ΠΎΠ±Π½ΠΎΠ³ΠΎ β ΡΠΎΡΠΌΠ°Ρ PNG. ΠΠΎΡ ΠΏΡΠΈΠΌΠ΅Ρ.
Π‘Π»Π΅Π²Π° ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ Π²ΠΈΠ΄Π΅ΡΡ ΡΠΎΡΠΎ Π½Π°ΡΠ΅Π³ΠΎ ΡΠΎΠ²Π°ΡΠΈΡΠ°-Π»Π΅Π½ΠΈΠ²ΡΠ° Π‘ΡΠΌΠ°. ΠΡΠ° ΠΊΠ°ΡΡΠΈΠ½ΠΊΠ° Π² ΡΠΎΡΠΌΠ°ΡΠ΅ JPG Π·Π°Π½ΠΈΠΌΠ°Π΅Ρ Π²ΡΠ΅Π³ΠΎ Π»ΠΈΡΡ 32,7 ΠΠ±. Π Π΅ΡΠ»ΠΈ ΡΠΎ ΠΆΠ΅ ΡΠ°ΠΌΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΏΡΠ΅ΠΎΠ±ΡΠ°Π·ΠΎΠ²Π°ΡΡ Π² ΡΠΎΡΠΌΠ°Ρ PNG β ΡΠ°Π·ΠΌΠ΅Ρ Π³ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠ³ΠΎ ΡΠ°ΠΉΠ»Π° ΡΠ²Π΅Π»ΠΈΡΠΈΡΡΡ Π±ΠΎΠ»Π΅Π΅ ΡΠ΅ΠΌ Π²Π΄Π²ΠΎΠ΅ β Π΄ΠΎ 90,6 ΠΠ±!
Π‘ΠΏΡΠ°Π²Π° Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡ ΡΠΈΡΡΠ½ΠΎΠΊ ΡΠΎ Π²ΡΡ ΡΠ΅ΠΌ ΠΆΠ΅ Π‘ΡΠΌΠΎΠΌ. ΠΡΠΎΡ ΡΠΈΡΡΠ½ΠΎΠΊ Π»ΡΡΡΠ΅ Π²ΡΠ΅Π³ΠΎ Ρ ΡΠ°Π½ΠΈΡΡ Π² ΡΠΎΡΠΌΠ°ΡΠ΅ PNG. Π’Π°ΠΊ ΠΎΠ½ Π·Π°Π½ΠΈΠΌΠ°Π΅Ρ Π²ΡΠ΅Π³ΠΎ 5,5 ΠΠ±. Π Π΅ΡΠ»ΠΈ ΠΏΡΠ΅ΠΎΠ±ΡΠ°Π·ΠΎΠ²Π°ΡΡ Π΅Π³ΠΎ Π² JPG, ΡΠΎ Π΅Π³ΠΎ ΡΠ°Π·ΠΌΠ΅Ρ ΠΏΠΎΠ΄ΡΠΊΠΎΡΠΈΡ Π΄ΠΎ 11,3 ΠΠ±.
ΠΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅: Π²ΡΡ ΡΠΎ, ΡΡΠΎ ΡΠΎΡΠΎΠ³ΡΠ°ΡΠΈΡΠΌΠΈ Π½Π΅ ΡΠ²Π»ΡΠ΅ΡΡΡ, ΠΎΠ±ΡΡΠ½ΠΎ Π·Π°Π½ΠΈΠΌΠ°Π΅Ρ ΠΌΠ΅Π½ΡΡΠ΅ ΠΌΠ΅ΡΡΠ°, ΡΠ΅ΠΌ ΡΠΎΡΠΎΠ³ΡΠ°ΡΠΈΠΈ. ΠΠ΅ Π·Π°Π±ΡΠ²Π°ΠΉΡΠ΅ ΠΎΠ± ΡΡΠΎΠΌ, ΠΏΡΠΎΠ΅ΠΊΡΠΈΡΡΡ ΡΠ²ΠΎΠΈ Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΡ.
Π‘ΡΡΠ΅ΡΡΠ²ΡΠ΅Ρ, ΠΊΠΎΠ½Π΅ΡΠ½ΠΎ, Π΅ΡΡ ΠΌΠ½ΠΎΠ³ΠΎ Π³ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΡ ΡΠΎΡΠΌΠ°ΡΠΎΠ²! ΠΡΠ»ΠΈ Ρ Π²Π°Ρ ΠΈΠΌΠ΅Π΅ΡΡΡ Π½Π΅ΠΊΠΎΠ΅ Π²Π΅ΠΊΡΠΎΡΠ½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ (ΡΠΎΡΡΠΎΡΡΠ΅Π΅ ΠΈΠ· Π²ΡΡΡΠ΅ΡΠΊΠΈΡ Π»ΠΈΠ½ΠΈΠΉ ΠΈ Π³Π΅ΠΎΠΌΠ΅ΡΡΠΈΡΠ΅ΡΠΊΠΈΡ ΡΠΈΠ³ΡΡ), ΡΠΎ Π²Π°ΠΌ Π»ΡΡΡΠ΅ Π²ΡΠ΅Π³ΠΎ ΠΏΠΎΠ΄ΠΎΠΉΠ΄ΡΡ ΡΠΎΡΠΌΠ°Ρ SVG. ΠΠΎΠ»Π΅Π΅ Π½ΠΎΠ²ΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡ ΠΈ Π±ΠΎΠ»Π΅Π΅ ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΡΠ΅ Π³ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠ΅ ΡΠΎΡΠΌΠ°ΡΡ β Π²ΡΠΎΠ΄Π΅ AVIF ΠΈ WebP. ΠΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ Π΄Π»Ρ Ρ ΡΠ°Π½Π΅Π½ΠΈΡ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ΡΡΠΈΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π΄ΠΎΠ±ΠΈΡΡΡΡ Π΅ΡΡ Π±ΠΎΠ»Π΅Π΅ ΡΠ΅ΡΡΡΠ·Π½ΠΎΠ³ΠΎ ΡΠΌΠ΅Π½ΡΡΠ΅Π½ΠΈΡ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ² Π³ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΡ ΡΠ°ΠΉΠ»ΠΎΠ².
2. ΠΡΠ·ΡΠ²ΡΠΈΠ²ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΈ ΠΈΡ ΠΏΠΈΠΊΡΠ΅Π»ΡΠ½ΡΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΡ
ΠΠ΅ Π²ΡΠ΅ ΠΏΠΎΡΠ΅ΡΠΈΡΠ΅Π»ΠΈ ΡΠ°ΠΉΡΠ° Π±ΡΠ΄ΡΡ ΠΏΡΠΎΡΠΌΠ°ΡΡΠΈΠ²Π°ΡΡ Π΅Π³ΠΎ Π² ΠΎΠ΄Π½ΠΈΡ ΠΈ ΡΠ΅Ρ ΠΆΠ΅ ΡΡΠ»ΠΎΠ²ΠΈΡΡ . Π£ ΠΊΠΎΠ³ΠΎ-ΡΠΎ ΠΈΠΌΠ΅Π΅ΡΡΡ ΠΎΠ³ΡΠΎΠΌΠ½ΡΠΉ ΠΌΠΎΠ½ΠΈΡΠΎΡ ΡΠΈΡΠΈΠ½ΠΎΠΉ Π² 1600 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ. Π ΠΊΡΠΎ-ΡΠΎ ΡΠΌΠΎΡΡΠΈΡ ΡΠ°ΠΉΡ Π½Π° ΠΏΠ»Π°Π½ΡΠ΅ΡΠ΅ Ρ ΡΠΈΡΠΈΠ½ΠΎΠΉ ΡΠΊΡΠ°Π½Π° Π² 900 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ, ΠΈΠ»ΠΈ Π½Π° ΡΠ΅Π»Π΅ΡΠΎΠ½Π΅ Ρ ΡΠΊΡΠ°Π½ΠΎΠΌ ΡΠΈΡΠΈΠ½ΠΎΠΉ Π² 600 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ. ΠΡΠ»ΠΈ Π½Π° ΡΠ°ΠΉΡΠ΅ ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΡΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΡΠΈΡΠΈΠ½ΠΎΠΉ Π² 1200 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ β ΡΡΠΎ Π±ΡΠ΄Π΅Ρ ΠΎΠ·Π½Π°ΡΠ°ΡΡ, ΡΡΠΎ ΠΏΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ΅ ΡΠ°ΠΊΠΎΠ³ΠΎ ΡΠ°ΠΉΡΠ° Π½Π° ΡΡΡΡΠΎΠΉΡΡΠ²Π°Ρ Ρ Π½Π΅Π±ΠΎΠ»ΡΡΠΈΠΌΠΈ ΡΠΊΡΠ°Π½Π°ΠΌΠΈ ΡΠ΅ΡΠ΅Π²ΡΠ΅ ΠΈ Π΄ΡΡΠ³ΠΈΠ΅ ΡΠ΅ΡΡΡΡΡ Π±ΡΠ΄ΡΡ ΡΡΠ°ΡΠΈΡΡΡΡ Π²ΠΏΡΡΡΡΡ, ΡΠ°ΠΊ ΠΊΠ°ΠΊ ΡΠ°Π·ΠΌΠ΅Ρ ΡΠ°ΠΊΠΈΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ ΠΏΡΠΈ Π²ΡΠ²ΠΎΠ΄Π΅ Π½Π° ΡΠΊΡΠ°Π½, Π²ΡΡ ΡΠ°Π²Π½ΠΎ, Π±ΡΠ΄Π΅Ρ ΡΠΌΠ΅Π½ΡΡΠ΅Π½.
ΠΡΠΎΡΠΌΠΎΡΡ ΡΠ°ΠΉΡΠ° Π½Π° ΡΡΡΡΠΎΠΉΡΡΠ²Π°Ρ Ρ ΡΠ°Π·Π½ΡΠΌΠΈ ΡΠΊΡΠ°Π½Π°ΠΌΠΈ
ΠΠΎΡΠ΅ΠΌΡ Π±Ρ Π½Π΅ ΡΠΌΠ΅Π½ΡΡΠΈΡΡ ΠΏΠΈΠΊΡΠ΅Π»ΡΠ½ΡΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π΄ΠΎ Π·Π°Π³ΡΡΠ·ΠΊΠΈ ΡΡΠΈΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΠΌΠΈ? ΠΠΎΠ΄Π³ΠΎΡΠΎΠ²ΠΈΠ² ΡΠ°ΠΊΠΈΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, ΠΌΠΎΠΆΠ½ΠΎ Π²ΠΎΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡΡΡ HTML-ΠΌΠ΅Ρ Π°Π½ΠΈΠ·ΠΌΠ°ΠΌΠΈ, Π½Π°ΡΠ΅Π»Π΅Π½Π½ΡΠΌΠΈ Π½Π° ΡΠ°Π±ΠΎΡΡ Ρ ΠΎΡΠ·ΡΠ²ΡΠΈΠ²ΡΠΌΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡΠΌΠΈ, ΠΈ ΡΠΊΠ°Π·Π°ΡΡ, Π² ΠΊΠ°ΠΊΠΈΡ ΡΡΠ»ΠΎΠ²ΠΈΡΡ Π½ΡΠΆΠ½ΠΎ Π²ΡΠ²ΠΎΠ΄ΠΈΡΡ ΠΊΠ°ΠΆΠ΄ΠΎΠ΅ ΠΈΠ· ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ.
Π Π΄Π°Π½Π½ΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ ΡΠΈΡΠΈΠ½Π° Π±Π°Π·ΠΎΠ²ΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΡΠΎΡΡΠ°Π²Π»ΡΠ΅Ρ 1200 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ. ΠΠ½ΠΎ, ΠΊΡΠΎΠΌΠ΅ ΡΠΎΠ³ΠΎ, ΡΠ²Π»ΡΠ΅ΡΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ, Π·Π°ΠΏΠΈΡΠ°Π½Π½ΡΠΌ Π² Π°ΡΡΠΈΠ±ΡΡ src ΡΠ΅Π³Π° ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΡΠΌ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ. Π srcset ΠΎΠΏΠΈΡΠ°Π½Ρ 3 Π²Π°ΡΠΈΠ°Π½ΡΠ° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ β ΡΠΈΡΠΈΠ½ΠΎΠΉ Π² 600, 900 ΠΈ 1200 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ. Π sizes ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΡΡ ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΡ CSS, ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡΡΠΈΠ΅ Π΄Π°ΡΡ Π±ΡΠ°ΡΠ·Π΅ΡΡ ΠΏΠΎΠ΄ΡΠΊΠ°Π·ΠΊΡ, ΠΊΠ°ΡΠ°ΡΡΡΡΡΡ Π²ΠΈΠ΄ΠΈΠΌΠΎΠΉ ΠΎΠ±Π»Π°ΡΡΠΈ, Π΄ΠΎΡΡΡΠΏΠ½ΠΎΠΉ Π΄Π»Ρ Π²ΡΠ²ΠΎΠ΄Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ. ΠΡΠ»ΠΈ ΡΠΈΡΠΈΠ½Π° ΠΎΠΊΠ½Π° ΠΌΠ΅Π½ΡΡΠ΅ 900 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ β ΠΌΠ΅ΡΡΠΎ, Π³Π΄Π΅ Π±ΡΠ΄Π΅Ρ Π²ΡΠ²Π΅Π΄Π΅Π½ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅, Π·Π°ΠΉΠΌΡΡ Π²ΡΡ Π΅Π³ΠΎ ΡΠΈΡΠΈΠ½Ρ β 100vw. Π ΠΏΡΠΎΡΠΈΠ²Π½ΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ ΠΌΠ΅ΡΡΠΎ Π΄Π»Ρ Π²ΡΠ²ΠΎΠ΄Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π½ΠΈΠΊΠΎΠ³Π΄Π° Π½Π΅ ΠΎΠΊΠ°ΠΆΠ΅ΡΡΡ ΡΠΈΡΠ΅ 1200 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ.
ΠΠΎΠ»ΡΡΠΈΠ½ΡΡΠ²ΠΎ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠΎΠ² Π΄Π»Ρ ΡΠ°Π±ΠΎΡΡ Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡΠΌΠΈ, Π²ΡΠΎΠ΄Π΅ Photoshop, Gimp ΠΈ Paint.NET, ΡΠΌΠ΅ΡΡ ΡΠΊΡΠΏΠΎΡΡΠΈΡΠΎΠ²Π°ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π² ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ ΡΠ°Π·ΠΌΠ΅ΡΠ°Ρ . Π‘ΡΠ°Π½Π΄Π°ΡΡΠ½ΡΠ΅ ΡΠΈΡΡΠ΅ΠΌΠ½ΡΠ΅ Π³ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠ΅ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΡ ΡΠΎΠΆΠ΅, Π² ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ½Π½ΡΡ ΠΏΡΠ΅Π΄Π΅Π»Π°Ρ , ΡΠΏΠΎΡΠΎΠ±Π½Ρ ΡΠ΅ΡΠ°ΡΡ ΠΏΠΎΠ΄ΠΎΠ±Π½ΡΠ΅ Π·Π°Π΄Π°ΡΠΈ. Π Π΅ΡΠ»ΠΈ Π½Π°Π΄ΠΎ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΠ·ΠΈΡΠΎΠ²Π°ΡΡ ΠΎΠ±ΡΠ°Π±ΠΎΡΠΊΡ ΠΎΡΠ΅Π½Ρ Π±ΠΎΠ»ΡΡΠΎΠ³ΠΎ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ β Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, Π΅ΡΡΡ ΡΠΌΡΡΠ» Π²Π·Π³Π»ΡΠ½ΡΡΡ Π½Π° ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠΈΠ΅ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΡ ΠΊΠΎΠΌΠ°Π½Π΄Π½ΠΎΠΉ ΡΡΡΠΎΠΊΠΈ β Π²ΡΠΎΠ΄Π΅ ImageMagick.
βΠ‘ΠΊΡΡΡΠΈΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ ΠΏΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ΅ ΡΠ°ΠΉΡΠ° Π½Π° ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ ΡΡΡΡΠΎΠΉΡΡΠ²Π°Ρ
Π’ΡΡ ΡΠΊΠ°Π·Π°Π½ΠΎ, ΡΡΠΎ Π΅ΡΠ»ΠΈ ΡΠΈΡΠΈΠ½Π° ΡΠΊΡΠ°Π½Π° ΠΌΠ΅Π½ΡΡΠ΅ ΡΠ΅ΠΌ 600 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ β ΡΠΈΡΠΈΠ½Π° ΠΎΠ±Π»Π°ΡΡΠΈ Π΄Π»Ρ Π²ΡΠ²ΠΎΠ΄Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π±ΡΠ΄Π΅Ρ ΡΠ°Π²Π½ΡΡΡΡΡ 0. Π ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠ΅ Π±ΡΠ°ΡΠ·Π΅Ρ, ΠΏΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ΅ ΡΠ°ΠΉΡΠ° Π½Π° ΡΡΡΡΠΎΠΉΡΡΠ²Π΅ Ρ ΠΌΠ°Π»Π΅Π½ΡΠΊΠΈΠΌ ΡΠΊΡΠ°Π½ΠΎΠΌ, Π±ΡΠ΄Π΅Ρ Π·Π½Π°ΡΡ ΠΎ ΡΠΎΠΌ, ΡΡΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π΅ΠΌΡ Π²ΡΠ²ΠΎΠ΄ΠΈΡΡ Π½Π΅ Π½ΡΠΆΠ½ΠΎ, Π° Π·Π½Π°ΡΠΈΡ β Π½Π΅ Π½ΡΠΆΠ½ΠΎ ΠΈ Π΅Π³ΠΎ Π·Π°Π³ΡΡΠΆΠ°ΡΡ.
3. ΠΠ°ΡΠ΅ΡΡΠ²ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ
ΠΠΎΠΌΠΈΠΌΠΎ ΡΠΎΡΠΌΠ°ΡΠ°, Π² ΠΊΠΎΡΠΎΡΠΎΠΌ Ρ ΡΠ°Π½ΠΈΡΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅, ΠΈ Π΅Π³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ² Π² ΠΏΠΈΠΊΡΠ΅Π»ΡΡ , ΠΏΡΠΈ ΡΠΎΡ ΡΠ°Π½Π΅Π½ΠΈΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ Π² ΡΠΎΡΠΌΠ°ΡΠ°Ρ , ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡΠΈΡ ΡΠΆΠ°ΡΠΈΠ΅ Π΄Π°Π½Π½ΡΡ Ρ ΠΏΠΎΡΠ΅ΡΡΠΌΠΈ, ΠΎΠ±ΡΡΠ½ΠΎ ΠΌΠΎΠΆΠ½ΠΎ Π½Π°ΡΡΡΠ°ΠΈΠ²Π°ΡΡ ΡΡΠΎΠ²Π΅Π½Ρ ΡΠΆΠ°ΡΠΈΡ ΠΈΠ»ΠΈ ΡΡΠΎΠ²Π΅Π½Ρ ΠΊΠ°ΡΠ΅ΡΡΠ²Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ. ΠΠ»Π³ΠΎΡΠΈΡΠΌΡ ΡΠΆΠ°ΡΠΈΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ Ρ ΠΏΠΎΡΠ΅ΡΡΠΌΠΈ ΡΠ±ΠΈΡΠ°ΡΡ ΠΈΠ· Π½ΠΈΡ Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ Π΄Π°Π½Π½ΡΠ΅, ΠΊΠΎΡΠΎΡΡΠ΅ (Π½Π° Π½ΠΈΠ·ΠΊΠΈΡ ΡΡΠΎΠ²Π½ΡΡ ΡΠΆΠ°ΡΠΈΡ) ΠΌΠΎΠ³ΡΡ ΠΈ Π½Π΅ ΠΏΠΎΠ²Π»ΠΈΡΡΡ Π½Π° Π²Π½Π΅ΡΠ½ΠΈΠΉ Π²ΠΈΠ΄ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ, Π½ΠΎ ΠΏΡΠΈ ΡΡΠΎΠΌ, Π²ΡΡ ΡΠ°Π²Π½ΠΎ, Π·Π°Π½ΠΈΠΌΠ°ΡΡ ΠΌΠ΅ΡΡΠΎ. ΠΠ·Π³Π»ΡΠ½ΠΈΡΠ΅ Π½Π° ΡΠ»Π΅Π΄ΡΡΡΠΈΠΉ ΠΏΡΠΈΠΌΠ΅Ρ.
ΠΡΡ ΠΎΠ΄Π½ΠΎΠ΅ PNG-ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Ρ ΠΏΡΠΎΠ·ΡΠ°ΡΠ½ΡΠΌΠΈ ΡΡΠ°ΡΡΠΊΠ°ΠΌΠΈ ΠΈΠΌΠ΅Π΅Ρ ΡΠ°Π·ΠΌΠ΅Ρ 57 ΠΠ±. Π’Π°ΠΊΠΎΠ΅ ΠΆΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅, Π½ΠΎ ΡΠΆΠ°ΡΠΎΠ΅, ΠΈΠΌΠ΅Π΅Ρ ΡΠ°Π·ΠΌΠ΅Ρ 15 ΠΠ±.
Π£ΠΌΠ΅Π½ΡΡΠ΅Π½ΠΈΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π΄ΠΎΡΡΠΈΠ³Π°Π΅ΡΡΡ ΠΏΡΡΡΠΌ ΡΠ΄Π°Π»Π΅Π½ΠΈΡ ΠΈΠ· Π½Π΅Π³ΠΎ Π½Π΅ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΡΡ ΡΠ²Π΅ΡΠΎΠ², ΠΈΠ»ΠΈ ΠΏΡΡΡΠΌ ΠΊΠΎΠΌΠ±ΠΈΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΡΠ²Π΅ΡΠΎΠ² ΠΈ ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΎΡΠ΅Π½Ρ ΠΏΠΎΡ ΠΎΠΆΠΈ Π΄ΡΡΠ³ Π½Π° Π΄ΡΡΠ³Π°. ΠΠΎ, Π½Π° ΡΠ°ΠΌΠΎΠΌ Π΄Π΅Π»Π΅, Π² ΡΠΎΠ½ΠΊΠΎΡΡΠΈ Π²ΡΠ΅Π³ΠΎ ΡΡΠΎΠ³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΠΈ Π½Π΅ Π²Π΄Π°Π²Π°ΡΡΡΡ. ΠΠΎΠ΄Π±ΠΎΡ ΠΏΡΠΈΠ΅ΠΌΠ»Π΅ΠΌΠΎΠ³ΠΎ ΡΡΠΎΠ²Π½Ρ ΡΠΆΠ°ΡΠΈΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ ΠΌΠΎΠΆΠ½ΠΎ Π΄ΠΎΠ²Π΅ΡΠΈΡΡ ΡΠΏΠ΅ΡΠΈΠ°Π»ΠΈΠ·ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΌ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠ°ΠΌ. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ β ΡΠ°ΠΌΡΠ΅ ΡΠ°Π·Π½ΡΠ΅ Π·Π°Π΄Π°ΡΠΈ ΠΏΠΎ ΡΠΆΠ°ΡΠΈΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ Ρ ΠΎΡΠΎΡΠΎ ΡΠ΅ΡΠ°ΡΡ TinyPNG ΠΈ ImageMin.
4. ΠΡΡΡΠ°ΠΈΠ²Π°Π½ΠΈΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ Π² Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΡ
ΠΠ½ΠΎΠ³Π΄Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΈΠ³ΡΠ°Π΅Ρ ΠΊΡΠ°ΠΉΠ½Π΅ Π²Π°ΠΆΠ½ΡΡ ΡΠΎΠ»Ρ Π΄Π»Ρ ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠ΅Π½ΠΈΡ ΡΠ°Π±ΠΎΡΠΎΡΠΏΠΎΡΠΎΠ±Π½ΠΎΡΡΠΈ Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΡ. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ β ΠΎΠ½ΠΎ ΠΌΠΎΠΆΠ΅Ρ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΡΡ ΡΠΎΠ±ΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΡ, Π»ΠΎΠ³ΠΎΡΠΈΠΏ ΠΈΠ»ΠΈ ΠΊΠ°ΠΊΡΡ-Π½ΠΈΠ±ΡΠ΄Ρ ΠΈΠΊΠΎΠ½ΠΊΡ. ΠΠΎΡΠ»Π΅ ΡΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ ΡΠ°Π·ΠΌΠ΅Ρ ΡΠ°ΠΊΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π΄ΠΎΠ²Π΅Π΄ΡΠ½ Π΄ΠΎ ΠΌΠΈΠ½ΠΈΠΌΡΠΌΠ°, Π΅Π΄ΠΈΠ½ΡΡΠ²Π΅Π½Π½ΡΠΉ ΡΠΏΠΎΡΠΎΠ± Π΄Π°Π»ΡΠ½Π΅ΠΉΡΠ΅Π³ΠΎ ΡΡΠΊΠΎΡΠ΅Π½ΠΈΡ Π΅Π³ΠΎ Π·Π°Π³ΡΡΠ·ΠΊΠΈ Π·Π°ΠΊΠ»ΡΡΠ°Π΅ΡΡΡ Π²ΠΎ Π²ΡΡΡΠ°ΠΈΠ²Π°Π½ΠΈΠΈ ΠΊΠΎΠ΄Π° ΡΡΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π² ΠΊΠΎΠ΄ ΡΡΡΠ°Π½ΠΈΡΡ. ΠΡΠΎ ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΡ ΡΠΌΠ΅Π½ΡΡΠΈΡΡ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ Π·Π°ΠΏΡΠΎΡΠΎΠ², Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΡΡ Π½Π° Π·Π°Π³ΡΡΠ·ΠΊΡ ΠΌΠ°ΡΠ΅ΡΠΈΠ°Π»ΠΎΠ² ΡΡΡΠ°Π½ΠΈΡΡ, ΠΈ ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΡ Π²ΡΠ²Π΅ΡΡΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π² Ρ ΠΎΠ΄Π΅ ΡΠ΅Π½Π΄Π΅ΡΠΈΠ½Π³Π° ΡΡΡΠ°Π½ΠΈΡΡ.
ΠΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅, Π²ΡΡΡΠΎΠ΅Π½Π½ΠΎΠ΅ Π² ΡΡΡΠ°Π½ΠΈΡΡ
ΠΠΎΠΆΠ΅Ρ, Π²ΡΠ³Π»ΡΠ΄ΠΈΡ ΡΡΠΎ ΠΈ ΡΡΡΠ°Π½Π½ΠΎΠ²Π°ΡΠΎ, Π½ΠΎ ΡΡΡ ΠΏΠ΅ΡΠ΅Π΄ Π½Π°ΠΌΠΈ ΡΠ°ΠΊ Π½Π°Π·ΡΠ²Π°Π΅ΠΌΡΠΉ Β«Data URLΒ». Π’Π°ΠΊΠΈΠ΅ URL ΠΏΠΎΠ»ΡΠ·ΡΡΡΡΡ ΠΏΠΎΠ»Π½ΠΎΠΉ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠΎΠΉ Π²ΡΠ΅Ρ Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠ². Π Π°ΡΡΠΈΠ±ΡΡΠ΅ src ΡΠΊΠ°Π·Π°Π½ΠΎ, ΡΡΠΎ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠΈΠ΅ Π΄Π°Π½Π½ΡΠ΅ Π½Π°Π΄ΠΎ Π²ΠΎΡΠΏΡΠΈΠ½ΠΈΠΌΠ°ΡΡ ΠΊΠ°ΠΊ PNG-ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π² ΠΊΠΎΠ΄ΠΈΡΠΎΠ²ΠΊΠ΅ base64. ΠΠΎΡΠ»Π΅ ΠΎΠΏΠΈΡΠ°Π½ΠΈΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΈΠ΄ΡΡ Π½Π°Π±ΠΎΡ ΡΠΈΠΌΠ²ΠΎΠ»ΠΎΠ², ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΡΡΠΈΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ ΡΡΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ. Π Π΄Π°Π½Π½ΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ ΡΡΠΎ β ΠΌΠ°Π»Π΅Π½ΡΠΊΠ°Ρ ΠΊΡΠ°ΡΠ½Π°Ρ ΡΠΎΡΠΊΠ°.
Google ΡΠ°ΡΡΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ Π²ΡΡΡΠΎΠ΅Π½Π½ΡΠ΅ Π² ΡΡΡΠ°Π½ΠΈΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΏΡΠΈ Π²ΡΠ²ΠΎΠ΄Π΅ ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠΎΠ² ΠΏΠΎΠΈΡΠΊΠ°. ΠΡΠΎ β ΠΎΠ΄Π½Π° ΠΈΠ· ΠΏΡΠΈΡΠΈΠ½ ΡΠΎΠ³ΠΎ, ΡΡΠΎ ΠΏΠΎΠΈΡΠΊ Google ΠΊΠ°ΠΆΠ΅ΡΡΡ ΡΠ°ΠΊΠΈΠΌ Π±ΡΡΡΡΡΠΌ.
ΠΠΎΡ ΠΌΠ°ΡΠ΅ΡΠΈΠ°Π», Π² ΠΊΠΎΡΠΎΡΠΎΠΌ ΠΏΡΠΎΠ°Π½Π°Π»ΠΈΠ·ΠΈΡΠΎΠ²Π°Π½Ρ ΠΏΠΎΠ΄Ρ ΠΎΠ΄Ρ ΠΊ ΠΏΠΎΠ²ΡΡΠ΅Π½ΠΈΡ ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΠΈ Π²Π΅Π±-ΡΠ΅ΡΡΡΡΠΎΠ², ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΡΠ΅ Google. ΠΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, Π²Ρ Π½Π°ΠΉΠ΄ΡΡΠ΅ ΡΡΡ ΡΡΠΎ-ΡΠΎ ΡΠ°ΠΊΠΎΠ΅, ΡΡΠΎ Π²Π°ΠΌ ΠΏΡΠΈΠ³ΠΎΠ΄ΠΈΡΡΡ.
Π Π²ΠΎΡ β ΡΠ΄ΠΎΠ±Π½ΡΠΉ Π²Π΅Π±-ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½Ρ Π΄Π»Ρ ΠΏΡΠ΅ΠΎΠ±ΡΠ°Π·ΠΎΠ²Π°Π½ΠΈΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ Π² ΡΠΎΡΠΌΠ°Ρ base64.
5. ΠΠ΅Π½ΠΈΠ²Π°Ρ Π·Π°Π³ΡΡΠ·ΠΊΠ° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ
ΠΠ±ΡΡΠ½ΠΎ Π½Π° Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΠ°Ρ Π΅ΡΡΡ Π½Π΅ΠΌΠ°Π»ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ, ΠΊΠΎΡΠΎΡΡΠ΅ Π½Π΅ Π½ΡΠΆΠ½ΠΎ Π·Π°Π³ΡΡΠΆΠ°ΡΡ Π²ΠΎ Π²ΡΠ΅ΠΌΡ Π·Π°Π³ΡΡΠ·ΠΊΠΈ ΠΎΡΠ½ΠΎΠ²Π½ΡΡ ΠΌΠ°ΡΠ΅ΡΠΈΠ°Π»ΠΎΠ² ΡΡΡΠ°Π½ΠΈΡ. ΠΠΎ Π±ΡΠ°ΡΠ·Π΅ΡΡ Π½Π΅ Π·Π½Π°ΡΡ ΠΎ ΡΠΎΠΌ, ΠΊΠ°ΠΊΠΈΠ΅ ΠΈΠΌΠ΅Π½Π½ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΈΠΌ ΠΏΠΎΠ½Π°Π΄ΠΎΠ±ΡΡΡΡ Π΄Π»Ρ ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎΠ³ΠΎ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΡΡΡΠ°Π½ΠΈΡ, ΠΏΠΎΡΡΠΎΠΌΡ ΠΏΡΠΎΡΡΠΎ Π·Π°Π³ΡΡΠΆΠ°ΡΡ Π²ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, ΠΊΠΎΡΠΎΡΡΠ΅ Π΅ΡΡΡ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ°Ρ . ΠΠ°Π³ΡΡΠ·ΠΊΠ° Π±ΠΎΠ»ΡΡΠΎΠ³ΠΎ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ Π·Π°ΠΌΠ΅Π΄Π»ΡΠ΅Ρ ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ ΡΡΡΠ°Π½ΠΈΡ Π² ΡΠ°Π±ΠΎΡΠΎΡΠΏΠΎΡΠΎΠ±Π½ΠΎΠ΅ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ ΠΈ ΡΡ ΡΠ΄ΡΠ°Π΅Ρ ΡΠΊΠΎΡΠΎΡΡΡ Π·Π°Π³ΡΡΠ·ΠΊΠΈ ΡΠ΅Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ, ΠΊΠΎΡΠΎΡΡΠ΅ Π΄Π΅ΠΉΡΡΠ²ΠΈΡΠ΅Π»ΡΠ½ΠΎ Π²Π°ΠΆΠ½Ρ Π΄Π»Ρ ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎΠΉ ΡΠ°Π±ΠΎΡΡ ΡΡΡΠ°Π½ΠΈΡ.
ΠΠΌΠ΅ΡΡΠΎ ΡΠΎΠ³ΠΎ, ΡΡΠΎΠ±Ρ Π·Π°ΡΡΠ°Π²Π»ΡΡΡ Π±ΡΠ°ΡΠ·Π΅Ρ ΡΡΠ°Π·Ρ Π·Π°Π³ΡΡΠΆΠ°ΡΡ Π²ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΡΠΎΠ²Π΅ΡΠΎΠ²Π°ΡΡ Π΅ΠΌΡ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΠΏΠΎΠ»Π΅Π½ΠΈΡΡΡΡ. ΠΠ΅Π½ΠΈΠ²Π°Ρ Π·Π°Π³ΡΡΠ·ΠΊΠ° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ β ΡΡΠΎ ΡΠ°ΠΊΠΎΠΉ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ ΠΊ ΡΠ°Π±ΠΎΡΠ΅ Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡΠΌΠΈ, ΠΊΠΎΠ³Π΄Π° Π±ΡΠ°ΡΠ·Π΅ΡΡ ΠΏΡΠ΅Π΄Π»Π°Π³Π°ΡΡ Π·Π°Π³ΡΡΠΆΠ°ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΡΠΎΠ»ΡΠΊΠΎ ΡΠΎΠ³Π΄Π°, ΠΊΠΎΠ³Π΄Π° ΠΎΠ½ΠΈ ΠΌΠΎΠ³ΡΡ ΠΏΠΎΠ½Π°Π΄ΠΎΠ±ΠΈΡΡΡΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ. ΠΡΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ Π»Π΅Π½ΠΈΠ²ΠΎΠΉ Π·Π°Π³ΡΡΠ·ΠΊΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ ΡΠΏΠΎΡΠΎΠ±Π½ΠΎ ΠΎΠΊΠ°Π·Π°ΡΡ ΠΎΠ³ΡΠΎΠΌΠ½ΠΎΠ΅ ΠΏΠΎΠ»ΠΎΠΆΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅ Π²Π»ΠΈΡΠ½ΠΈΠ΅ Π½Π° ΠΏΠΎΠΊΠ°Π·Π°ΡΠ΅Π»Ρ Largest Contentful Paint (LCP), ΡΠ°ΠΊ ΠΊΠ°ΠΊ Π±Π»Π°Π³ΠΎΠ΄Π°ΡΡ ΡΡΠΎΠΌΡ Π±ΡΠ°ΡΠ·Π΅Ρ, ΠΏΡΠΈ Π·Π°Π³ΡΡΠ·ΠΊΠ΅ ΡΡΡΠ°Π½ΠΈΡΡ, ΠΌΠΎΠΆΠ΅Ρ ΡΠ΄Π΅Π»ΠΈΡΡ ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ ΡΠΎΠ»ΡΠΊΠΎ ΡΠ°ΠΌΡΠΌ Π²Π°ΠΆΠ½ΡΠΌ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡΠΌ.
Π ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΠΈ HTML Π΅ΡΡΡ Π°ΡΡΠΈΠ±ΡΡ loading, ΠΊΠΎΡΠΎΡΡΠΌ ΠΌΠΎΠΆΠ½ΠΎ Π²ΠΎΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡΡΡ Π΄Π»Ρ ΠΎΡΠ³Π°Π½ΠΈΠ·Π°ΡΠΈΠΈ Π»Π΅Π½ΠΈΠ²ΠΎΠΉ Π·Π°Π³ΡΡΠ·ΠΊΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ, Π½ΠΎ ΠΎΠ½ ΠΏΠΎΠΊΠ° ΠΈΠΌΠ΅Π΅Ρ ΡΡΠ°ΡΡΡ ΡΠΊΡΠΏΠ΅ΡΠΈΠΌΠ΅Π½ΡΠ°Π»ΡΠ½ΠΎΠ³ΠΎ. Π Safari Π΅ΡΡ Π΄Π°ΠΆΠ΅ Π΅Π³ΠΎ Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅Ρ. Π ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠ΅ ΠΎ Π΅Π³ΠΎ ΡΠΈΡΠΎΠΊΠΎΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ Π³ΠΎΠ²ΠΎΡΠΈΡΡ ΠΏΠΎΠΊΠ° Π½Π΅Π»ΡΠ·Ρ. ΠΠΎ, ΠΊ ΡΡΠ°ΡΡΡΡ, Π»Π΅Π½ΠΈΠ²ΡΡ Π·Π°Π³ΡΡΠ·ΠΊΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ ΠΌΠΎΠΆΠ½ΠΎ ΠΎΡΠ³Π°Π½ΠΈΠ·ΠΎΠ²Π°ΡΡ ΡΡΠ΅Π΄ΡΡΠ²Π°ΠΌΠΈ JavaScript.
Π‘ΡΡΠ΅ΡΡΠ²ΡΡΡ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠΈΠ΅ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΈ. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ β lazysizes. Π ΡΡΠΎΠΉ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ΅ ΠΎΠ±ΡΠ°Π±Π°ΡΡΠ²Π°ΡΡΡΡ ΡΠ°Π·Π»ΠΈΡΠ½ΡΠ΅ ΠΏΠΎΠ³ΡΠ°Π½ΠΈΡΠ½ΡΠ΅ ΡΠ»ΡΡΠ°ΠΈ, ΠΎΠ½Π° ΡΠ΄Π΅Π»ΡΠ΅Ρ Π½Π΅ΠΌΠ°Π»ΠΎ Π²Π½ΠΈΠΌΠ°Π½ΠΈΡ Π²ΠΎΠΏΡΠΎΡΠ°ΠΌ ΡΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΠΎΡΡΠΈ Ρ ΡΠ°Π·Π½ΡΠΌΠΈ Π±ΡΠ°ΡΠ·Π΅ΡΠ°ΠΌΠΈ. ΠΠΎ, Π² ΡΠ΅Π»ΠΎΠΌ, ΠΊΠΎΠ΄, ΠΎΡΠ²Π΅ΡΡΡΠ²Π΅Π½Π½ΡΠΉ Π·Π° Π»Π΅Π½ΠΈΠ²ΡΡ Π·Π°Π³ΡΡΠ·ΠΊΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ, Π²ΡΠ³Π»ΡΠ΄ΠΈΡ ΡΠ°ΠΊ, ΠΊΠ°ΠΊ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ Π½ΠΈΠΆΠ΅.
Π’ΡΡ, Π΄Π»Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΡ ΡΠΎΠ³ΠΎ ΠΌΠΎΠΌΠ΅Π½ΡΠ°, ΠΊΠΎΠ³Π΄Π° Π½Π°Π΄ΠΎ Π·Π°Π³ΡΡΠΆΠ°ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ ΠΎΠ±ΡΠ΅ΠΊΡ IntersectionObserver. ΠΠΎΠ³Π΄Π° Π½Π°ΡΡΡΠΏΠ°Π΅Ρ Π½ΡΠΆΠ½ΡΠΉ ΠΌΠΎΠΌΠ΅Π½Ρ β ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ Π°ΡΡΠΈΠ±ΡΡΠ° data-src ΠΊΠΎΠΏΠΈΡΡΠ΅ΡΡΡ Π² Π°ΡΡΠΈΠ±ΡΡ src ΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π·Π°Π³ΡΡΠΆΠ°Π΅ΡΡΡ. Π’ΠΎΡ ΠΆΠ΅ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡΠΈΠΌΠ΅Π½ΠΈΡΡ ΠΊ Π°ΡΡΠΈΠ±ΡΡΡ srcset ΠΈ Π²ΠΎΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡΡΡ ΠΈΠΌ ΠΏΡΠΈ ΡΠ°Π±ΠΎΡΠ΅ Ρ Π»ΡΠ±ΡΠΌ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎΠΌ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ.
βΠΠ°ΡΡΡΠΎΠΉΠΊΠ° ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ² ΠΎΠ±Π»Π°ΡΡΠΈ, ΠΊΠΎΡΠΎΡΡΡ Π·Π°ΠΉΠΌΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅
ΠΡΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ, ΠΊΠΎΡΠΎΡΡΠ΅ Π·Π°Π³ΡΡΠΆΠ°ΡΡΡΡ ΡΠ΅ΡΠ΅Π· Π½Π΅ΠΊΠΎΡΠΎΡΠΎΠ΅ Π²ΡΠ΅ΠΌΡ ΠΏΠΎΡΠ»Π΅ Π·Π°Π³ΡΡΠ·ΠΊΠΈ ΠΎΡΠ½ΠΎΠ²Π½ΡΡ ΠΌΠ°ΡΠ΅ΡΠΈΠ°Π»ΠΎΠ² ΡΡΡΠ°Π½ΠΈΡ, ΠΎΡΠ΅Π½Ρ Π²Π°ΠΆΠ½ΠΎ Π·Π°ΡΠ°Π½Π΅Π΅ ΡΠΊΠ°Π·ΡΠ²Π°ΡΡ ΠΈΡ ΡΠ°Π·ΠΌΠ΅ΡΡ, ΡΡΠΎ ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΡ ΠΈΠ·Π±Π΅ΠΆΠ°ΡΡ ΡΠ΄Π²ΠΈΠ³Π° ΠΌΠ°ΠΊΠ΅ΡΠ° ΡΡΡΠ°Π½ΠΈΡΡ. Π‘Π΄Π²ΠΈΠ³ΠΈ ΠΌΠ°ΠΊΠ΅ΡΠΎΠ² ΡΡΡΠ°Π½ΠΈΡ ΠΏΡΠΎΠΈΡΡ ΠΎΠ΄ΡΡ ΡΠΎΠ³Π΄Π°, ΠΊΠΎΠ³Π΄Π° ΠΌΠ΅Π½ΡΠ΅ΡΡΡ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΎΠ΄Π½ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΡΡΡΠ°Π½ΠΈΡ ΠΏΡΠΈ Π·Π°Π³ΡΡΠ·ΠΊΠ΅ Π΄ΡΡΠ³ΠΈΡ ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ², ΡΠ°Π·ΠΌΠ΅ΡΡ ΠΊΠΎΡΠΎΡΡΡ Π½Π°ΡΡΡΠ°ΠΈΠ²Π°ΡΡΡΡ Π΄ΠΈΠ½Π°ΠΌΠΈΡΠ΅ΡΠΊΠΈ. ΠΠΎΠ΄ΡΠΎΠ±Π½ΠΎΡΡΠΈ ΠΎ ΡΠ΄Π²ΠΈΠ³Π°Ρ ΠΌΠ°ΠΊΠ΅ΡΠ° ΠΈ ΠΎ Π²Π»ΠΈΡΠ½ΠΈΠΈ ΠΈΡ Π½Π° ΡΠΊΠΎΡΠΎΡΡΡ ΡΠ°Π±ΠΎΡΡ ΡΡΡΠ°Π½ΠΈΡ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΡΠΈΡΠ°ΡΡ Π·Π΄Π΅ΡΡ.
Π’ΠΎ Π΅ΡΡΡ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, Π΅ΡΠ»ΠΈ ΠΌΠ°ΠΊΠ΅Ρ ΡΡΡΠ°Π½ΠΈΡΡ ΠΈΠΌΠ΅Π΅Ρ Π² ΡΠΈΡΠΈΠ½Ρ Π²ΡΠ΅Π³ΠΎ 800px, ΡΠΎ Π±ΡΠ°ΡΠ·Π΅Ρ, Π½Π΅ Π·Π°Π³ΡΡΠΆΠ°Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅, Π±ΡΠ΄Π΅Ρ Π·Π½Π°ΡΡ ΠΎ ΡΠΎΠΌ, ΡΡΠΎ Π΅ΠΌΡ Π½Π°Π΄ΠΎ Π·Π°ΡΠ΅Π·Π΅ΡΠ²ΠΈΡΠΎΠ²Π°ΡΡ 600px Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²Π° Π΄Π»Ρ Π²ΡΠ²ΠΎΠ΄Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Ρ ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΡΠΌ ΡΠΎΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΠ΅ΠΌ ΡΡΠΎΡΠΎΠ½.
ΠΡΠΎΠ³ΠΈ
ΠΡΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΡΠ΅Ρ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ΠΎΠ² ΠΊ ΠΎΠΏΡΠΈΠΌΠΈΠ·Π°ΡΠΈΠΈ ΡΠ°Π±ΠΎΡΡ Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡΠΌΠΈ, ΠΎ ΠΊΠΎΡΠΎΡΡΡ ΠΌΡ Π³ΠΎΠ²ΠΎΡΠΈΠ»ΠΈ, ΡΠΏΠΎΡΠΎΠ±Π½ΠΎ Π·Π½Π°ΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΡΠΊΠΎΡΠΈΡΡ ΡΠ°Π±ΠΎΡΡ Π²Π°ΡΠΈΡ Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡ. ΠΠΎΠ΄Π±ΠΎΡ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ΡΡΠ΅Π³ΠΎ ΡΠΎΡΠΌΠ°ΡΠ° Π΄Π»Ρ Ρ ΡΠ°Π½Π΅Π½ΠΈΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ, Π½Π°ΡΡΡΠΎΠΉΠΊΠ° ΠΈΡ ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎΠ³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ°, ΠΊΠ°ΡΠ΅ΡΡΠ²Π°, ΠΏΠΎΡΡΠ΄ΠΊΠ° Π·Π°Π³ΡΡΠ·ΠΊΠΈ, ΡΠΏΠΎΡΠΎΠ±Π½Ρ Π·Π½Π°ΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠ»ΡΡΡΠΈΡΡ Π²ΠΏΠ΅ΡΠ°ΡΠ»Π΅Π½ΠΈΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΉ ΠΎΡ ΡΠ°Π±ΠΎΡΡ Ρ ΡΠ°ΠΉΡΠΎΠΌ.
ΠΠ°ΠΊ Π²Ρ ΠΎΠΏΡΠΈΠΌΠΈΠ·ΠΈΡΡΠ΅ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΡΠ΅ Π² Π²Π°ΡΠΈΡ Π²Π΅Π±-ΠΏΡΠΎΠ΅ΠΊΡΠ°Ρ ?
ΠΠ°ΠΊΠΎΠΉ ΡΠΎΡΠΌΠ°Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π»ΡΡΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π½Π° ΡΠ°ΠΉΡΠ΅ 9
ΠΠ΄ΡΠ°Π²ΡΡΠ²ΡΠΉΡΠ΅, ΡΠ²Π°ΠΆΠ°Π΅ΠΌΡΠ΅ Π΄ΡΡΠ·ΡΡ. Π‘Π΅Π³ΠΎΠ΄Π½Ρ ΠΏΠΎΠ³ΠΎΠ²ΠΎΡΠΈΠΌ ΠΎ ΡΠΎΠΌ, ΠΊΠ°ΠΊΠΎΠΉ ΡΠΎΡΠΌΠ°Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π»ΡΡΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π½Π° ΡΠ°ΠΉΡΠ΅, ΠΊΠ°ΠΊΠΈΠ΅ ΡΠ΅Π³ΠΎΠ΄Π½Ρ Π΄ΠΎΡΡΡΠΏΠ½Ρ ΡΠΎΡΠΌΠ°ΡΡ Π³ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΡ ΡΠ°ΠΉΠ»ΠΎΠ² Π΄Π»Ρ ΡΠ°ΠΉΡΠ° ΠΈ Π½ΡΠΆΠ½ΠΎ Π»ΠΈ Π³Π½Π°ΡΡΡΡ Π·Π° Π½ΠΎΠ²ΠΈΠ½ΠΊΠ°ΠΌΠΈ Π³ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΡ ΡΠΎΡΠΌΠ°ΡΠΎΠ².
Π’Π°ΠΊΠΈΡ Π²ΠΎΠΏΡΠΎΡΠΎΠ² Ρ ΠΏΠΎΠ»ΡΡΠ°Ρ Π΄ΠΎΠ²ΠΎΠ»ΡΠ½ΠΎ ΠΌΠ½ΠΎΠ³ΠΎ, ΠΌΠ½ΠΎΠ³ΠΈΠ΅ ΠΈΠ· ΠΌΠΎΠΈΡ ΡΡΠ΅Π½ΠΈΠΊΠΎΠ² ΡΠΏΡΠ°ΡΠΈΠ²Π°ΡΡ ΠΌΠΎΠΆΠ½ΠΎ Π»ΠΈ ΠΈΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π½ΠΎΠ²ΡΠ΅ ΡΠΎΡΠΌΠ°ΡΡ SVG ΠΈ WebP, ΠΈ Π³Π΄Π΅ Π»ΡΡΡΠ΅ ΠΏΡΠΈΠΌΠ΅Π½ΠΈΡΡ ΡΡΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ. Π Π°Π·ΡΠΌΠ΅Π΅ΡΡΡ, ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΈ Π½ΠΎΠ²ΡΠ΅ ΡΠΎΡΠΌΠ°ΡΡ, ΡΠΎΠ»ΡΠΊΠΎ Π½ΡΠΆΠ½ΠΎ ΠΏΠΎΠ½ΠΈΠΌΠ°ΡΡ ΠΊΠ°ΠΊΠΎΠΉ ΡΠΎΡΠΌΠ°Ρ ΠΈ Π΄Π»Ρ ΡΠ΅Π³ΠΎ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ΠΈΡ Π»ΡΡΡΠ΅.
ΠΠ° ΡΠ΅Π³ΠΎΠ΄Π½ΡΡΠ½ΠΈΠΉ Π΄Π΅Π½Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π½Π° ΡΠ°ΠΉΡΠ΅ ΡΠ²Π»ΡΡΡΡΡ Π½Π΅ΠΎΡΡΠ΅ΠΌΠ»Π΅ΠΌΠΎΠΉ ΡΠ°ΡΡΡΡ. ΠΠ°ΡΠΈΠ½Π°Ρ ΠΎΡ Π³ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠ³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π° ΠΈ Π·Π°ΠΊΠ°ΡΠΈΠ²Π°Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡΠΌΠΈ Π² ΡΡΠ°ΡΡΡΡ , Π³ΡΠ°ΡΠΈΠΊΠ° ΡΠΎΠΏΡΠΎΠ²ΠΎΠΆΠ΄Π°Π΅Ρ Π±ΠΎΠ»ΡΡΠΈΠ½ΡΡΠ²ΠΎ ΡΠ°ΠΉΡΠΎΠ² Π² ΡΠ΅ΡΠΈ. ΠΠΎ Π·Π° ΠΊΡΠ°ΡΠΎΡΡ ΠΏΡΠΈΡ ΠΎΠ΄ΠΈΡΡΡ ΡΠ°ΡΠΏΠ»Π°ΡΠΈΠ²Π°ΡΡΡΡ ΡΠΊΠΎΡΠΎΡΡΡΡ Π·Π°Π³ΡΡΠ·ΠΊΠΈ ΡΠ°ΠΉΡΠ°.
ΠΠ΅ ΠΎΠΏΡΠΈΠΌΠΈΠ·ΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΡΠ²Π»ΡΡΡΡΡ ΠΎΠ΄Π½ΠΈΠΌ ΠΈΠ· ΡΠ°ΠΊΡΠΎΡΠΎΠ² Π·Π°ΠΌΠ΅Π΄Π»Π΅Π½ΠΈΡ ΡΠ°ΠΉΡΠ°, Π½Π° ΡΡΠΎ ΡΠΊΠ°Π·ΡΠ²Π°ΡΡ ΡΠ΅ΡΠ²ΠΈΡΡ ΠΏΡΠΎΠ²Π΅ΡΠΊΠΈ.
ΠΠΎΡΡΠΎΠΌΡ Π²Ρ Π±ΡΠ΄Π΅ΡΠ΅ Π²ΡΠ΅Π³Π΄Π° ΠΏΠ΅ΡΠ΅Π΄ Π²ΡΠ±ΠΎΡΠΎΠΌ, ΠΊΠ°ΠΊΠΎΠΉ ΡΠΎΡΠΌΠ°Ρ Π²ΡΠ±ΡΠ°ΡΡ Π΄Π»Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ. ΠΡ ΡΡΠΎΠ³ΠΎ Π±ΡΠ΄Π΅Ρ Π·Π°Π²ΠΈΡΠ΅ΡΡ Π΅Π³ΠΎ ΡΠ°Π·ΠΌΠ΅Ρ ΠΈ ΠΊΠ°ΡΠ΅ΡΡΠ²ΠΎ. Π ΡΡΠΎΠ±Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΌΠ΅Π½ΡΡΠ΅Π³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΠΈ Π±Π΅Π· ΠΏΠΎΡΠ΅ΡΠΈ ΠΊΠ°ΡΠ΅ΡΡΠ²Π°, Π²Ρ Π΄ΠΎΠ»ΠΆΠ½Ρ Π·Π½Π°ΡΡ Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ Π²Π΅ΡΠΈ.
ΠΠ°ΠΊΠΈΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π΄Π»Ρ ΡΠ°ΠΉΡΠΎΠ² ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ ΡΠ΅Π³ΠΎΠ΄Π½Ρ
ΠΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π΄Π»Ρ ΡΠ°ΠΉΡΠΎΠ², ΠΏΠΎΠ΄ΡΠ°Π·Π΄Π΅Π»ΡΡΡΡΡ:
Π Π°ΡΡΡΠΎΠ²ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΡΠΎΡΡΠΎΡΡ ΠΈΠ· ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ, Π² ΠΊΠΎΡΠΎΡΡΡ Ρ ΡΠ°Π½ΠΈΡΡΡ ΡΠ²Π΅Ρ ΠΈ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΡΠΎΠ·ΡΠ°ΡΠ½ΠΎΡΡΠΈ. Π’Π°ΠΊΠΈΠΌΠΈ ΡΠΎΡΠΌΠ°ΡΠ°ΠΌΠΈ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π² ΡΡΠ°ΡΡΡΡ , ΠΊΠ½ΠΎΠΏΠΊΠ°ΠΌΠΈ, ΠΈΠΊΠΎΠ½ΠΊΠ°ΠΌΠΈ ΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ Π΄ΠΈΠ·Π°ΠΉΠ½Π°. ΠΡΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΏΠΎΠΏΡΠ»ΡΡΠ½Ρ ΡΡΠ΅Π΄ΠΈ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΎΠ² ΠΈ Π²Π»Π°Π΄Π΅Π»ΡΡΠ΅Π² ΡΠ°ΠΉΡΠΎΠ². ΠΡΠ½ΠΎΠ²Π½ΠΎΠΉ ΠΌΠΈΠ½ΡΡ ΡΠ°ΡΡΡΠΎΠ²ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ β ΠΎΠ½ΠΈ ΠΏΠ»ΠΎΡ ΠΎ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΡΡΡΡΡ.
Π’ΠΎ Π΅ΡΡΡ ΠΏΡΠΈ ΡΠ²Π΅Π»ΠΈΡΠ΅Π½ΠΈΠΈ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ, ΠΈΠ΄ΡΡ ΠΏΠΎΡΠ΅ΡΡ ΠΊΠ°ΡΠ΅ΡΡΠ²Π°.
ΠΠ΅ΠΊΡΠΎΡΠ½ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΡΠΎΡΡΠΎΡΡ ΠΈΠ· Π»ΠΈΠ½ΠΈΠΉ ΠΈ ΡΠΎΡΠ΅ΠΊ ΠΌΠ°ΡΡΡΡΡΠΎΠ². ΠΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ ΠΎΠ± ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΈ Ρ ΡΠ°Π½ΠΈΡΡΡ Π² ΠΌΠ°ΡΠ΅ΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΡ ΠΈΠ½ΡΡΡΡΠΊΡΠΈΡΡ ΠΏΠΎ ΠΎΡΡΠΈΡΠΎΠ²ΠΊΠ΅, ΡΡΠΎ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°ΡΡ ΡΠ°ΠΊΠΈΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠ³ΠΎΠ΄Π½ΠΎ Π±Π΅Π· ΠΏΠΎΡΠ΅ΡΠΈ ΠΊΠ°ΡΠ΅ΡΡΠ²Π°.
ΠΡΠ΅ ΡΡΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΌΠΎΠ³ΡΡ ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΡΡ Π½Π° ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΡΡ ΡΠ°ΠΉΡΠ°Ρ . Π’ΠΎΠ»ΡΠΊΠΎ Π½ΡΠΆΠ½ΠΎ ΠΏΠΎΠ½ΠΈΠΌΠ°ΡΡ, ΡΡΠΎ ΠΏΠ΅ΡΠ΅Π΄ Π·Π°Π³ΡΡΠ·ΠΊΠΎΠΉ Π½Π° ΡΠ°ΠΉΡ, ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π½ΡΠΆΠ½ΠΎ ΠΎΠΏΡΠΈΠΌΠΈΠ·ΠΈΡΠΎΠ²Π°ΡΡ!
ΠΠΏΠΈΡΠ°Π½ΠΈΠ΅ ΠΏΠΎΠΏΡΠ»ΡΡΠ½ΡΡ ΡΠΎΡΠΌΠ°ΡΠΎΠ² ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π΄Π»Ρ ΡΠ°ΠΉΡΠ°
ΠΠ· ΠΎΠΏΠΈΡΠ°Π½ΠΈΡ ΡΡΠΈΡ ΡΠΎΡΠΌΠ°ΡΠΎΠ² Π²Ρ ΠΏΠΎΠΉΠΌΡΡΠ΅, Π³Π΄Π΅ ΠΈ ΠΊΠ°ΠΊΠΎΠΉ ΡΠΎΡΠΌΠ°Ρ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡ Π»ΡΡΡΠ΅ Π²ΡΠ΅Π³ΠΎ Π½Π° ΡΠ°ΠΉΡΠ΅.
JPEG ΠΈΠ»ΠΈ JPG β ΠΎΠ΄ΠΈΠ½ ΠΈΠ· ΡΠ°ΠΌΡΡ ΠΏΠΎΠΏΡΠ»ΡΡΠ½ΡΡ ΡΠΎΡΠΌΠ°ΡΠΎΠ² ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ Π΄Π»Ρ ΡΠ°ΠΉΡΠΎΠ². Π€ΠΎΡΠΌΠ°Ρ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅Ρ ΠΌΠΈΠ»Π»ΠΈΠΎΠ½Ρ ΡΠ²Π΅ΡΠΎΠ², ΡΡΠΎ ΠΈ Π΄Π°ΡΡ Π΅ΠΌΡ Π»ΠΈΠ΄ΠΈΡΡΡΡΡΡ ΠΏΠΎΠ·ΠΈΡΠΈΡ Π² ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½ΠΈΠΈ ΡΠΎΡΠΎΠ³ΡΠ°ΡΠΈΠΉ ΠΈ ΠΊΠ°ΡΡΠΈΠ½ΠΎΠΊ Π½Π° ΡΠ°ΠΉΡΠ΅.
ΠΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π² ΡΡΠΎΠΌ ΡΠΎΡΠΌΠ°ΡΠ΅ Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ Ρ ΠΎΡΠΎΡΠΎ ΠΎΠΏΡΠΈΠΌΠΈΠ·ΠΈΡΡΡΡΡΡ ΠΏΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈ Π±Π΅Π· ΠΏΠΎΡΠ΅ΡΠΈ ΠΊΠ°ΡΠ΅ΡΡΠ²Π°, ΡΡΠΎ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΠΏΠΎΠ»ΡΡΠΈΡΡ ΡΠ°ΠΉΠ» ΠΌΠ΅Π½ΡΡΠ΅Π³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ° Π±Π΅Π· Π²ΠΈΠ·ΡΠ°Π»ΡΠ½ΠΎΠΉ ΠΏΠΎΡΠ΅ΡΠΈ ΠΊΠ°ΡΠ΅ΡΡΠ²Π°. Π‘Π»Π΅Π΄ΡΠ΅Ρ ΠΏΠΎΠΌΠ½ΠΈΡΡ, ΡΡΠΎ ΠΊΠ°ΠΆΠ΄Π°Ρ ΠΏΠΎΡΠ»Π΅Π΄ΡΡΡΠ°Ρ ΠΎΠΏΡΠΈΠΌΠΈΠ·Π°ΡΠΈΡ ΡΠ½ΠΈΠΆΠ°Π΅Ρ ΠΊΠ°ΡΠ΅ΡΡΠ²ΠΎ.
Π€Π°ΠΉΠ»Ρ ΡΡΠΎΠ³ΠΎ ΡΠΎΡΠΌΠ°ΡΠ° ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡΡΡ Π²ΡΠ΅ΠΌ ΡΡΡΡΠΎΠΉΡΡΠ²Π°ΠΌΠΈ ΠΈ Π±ΡΠ°ΡΠ·Π΅ΡΠ°ΠΌΠΈ, ΡΡΠΎ Π΅ΡΡ ΡΠ°Π· ΠΏΠΎΠ΄ΡΠ²Π΅ΡΠΆΠ΄Π°Π΅Ρ Π΅Π³ΠΎ ΠΏΠΎΠΏΡΠ»ΡΡΠ½ΠΎΡΡΡ ΠΈ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π½Π΅ Π±Π΅ΡΠΏΠΎΠΊΠΎΠΈΡΡΡΡ Π·Π° ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ Π½Π° ΡΠ°ΠΉΡΠ°Ρ .
ΠΠΎΠ»ΡΡΠΈΠΌ Π½Π΅Π΄ΠΎΡΡΠ°ΡΠΊΠΎΠΌ ΡΡΠΎΠ³ΠΎ ΡΠΎΡΠΌΠ°ΡΠ° ΡΠ²Π»ΡΠ΅ΡΡΡ ΠΎΡΡΡΡΡΡΠ²ΠΈΠ΅ ΠΏΡΠΎΠ·ΡΠ°ΡΠ½ΠΎΡΡΠΈ. Π’ΠΎ Π΅ΡΡΡ, ΠΊΠΎΠΌΠ±ΠΈΠ½ΠΈΡΠΎΠ²Π°ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π² ΡΠ°ΠΊΠΎΠΌ ΡΠΎΡΠΌΠ°ΡΠ΅ Π½Π΅ ΠΏΠΎΠ»ΡΡΠΈΡΡΡ. ΠΠ»Ρ ΡΠ°ΠΊΠΈΡ Π·Π°Π΄Π°Ρ Π»ΡΡΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΉ ΡΠΎΡΠΌΠ°Ρ.
ΠΡΠΎΡ ΡΠΎΡΠΌΠ°Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ Π°Π»Π³ΠΎΡΠΈΡΠΌ ΡΠΆΠ°ΡΠΈΡ Π±Π΅Π· ΠΏΠΎΡΠ΅ΡΠΈ ΠΊΠ°ΡΠ΅ΡΡΠ²Π°. ΠΠΎ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²Ρ ΡΠ²Π΅ΡΠΎΠ² ΠΈ ΡΡΠΎΠ²Π½Ρ ΠΏΡΠΎΠ·ΡΠ°ΡΠ½ΠΎΡΡΠΈ Π΄ΠΎΡΡΡΠΏΠ΅Π½ Π² Π΄Π²ΡΡ Π²ΠΈΠ΄Π°Ρ 8 ΠΈ 24-Π±ΠΈΡ. ΠΠ±Π° ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡ ΠΏΡΠΎΠ·ΡΠ°ΡΠ½ΠΎΡΡΡ.
8-Π±ΠΈΡΠ½ΡΠΉ ΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ ΠΌΠ°Π»ΠΎΠΉ ΠΏΠΎΠΏΡΠ»ΡΡΠ½ΠΎΡΡΡΡ, Π° Π²ΠΎΡ 24-Π±ΠΈΡΠ½ΡΠΉ ΡΠΈΡΠΎΠΊΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π΄Π»Ρ ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ Π½Π° ΡΠ°ΠΉΡΠ΅. ΠΠ° ΡΡΡΡ ΠΏΡΠΎΠ·ΡΠ°ΡΠ½ΠΎΡΡΠΈ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ ΠΊΠΎΠΌΠ±ΠΈΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ. Π§Π°ΡΡΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ Π°Π½ΠΈΠΌΠΈΡΠΎΠ²Π°Π½Π½ΡΡ ΠΊΠ½ΠΎΠΏΠΎΠΊ, ΠΈΠΊΠΎΠ½ΠΎΠΊ, css-ΡΠΏΡΠ°ΠΉΡΠΎΠ², Π³Π΄Π΅ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌ ΡΡΡΠ΅ΠΊΡ ΠΏΡΠΎΠ·ΡΠ°ΡΠ½ΠΎΡΡΠΈ.
ΠΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π² ΡΠΎΡΠΌΠ°ΡΠ΅ PNG ΠΌΠΎΠΆΠ½ΠΎ ΠΌΠ½ΠΎΠ³ΠΎ ΡΠ°Π· ΠΎΠΏΡΠΈΠΌΠΈΠ·ΠΈΡΠΎΠ²Π°ΡΡ, ΡΠ΅Π΄Π°ΠΊΡΠΈΡΠΎΠ²Π°ΡΡ β ΠΎΠ½ΠΎ ΡΠΎΡ ΡΠ°Π½ΠΈΡ ΠΏΠ΅ΡΠ²ΠΎΠ½Π°ΡΠ°Π»ΡΠ½ΠΎΠ΅ ΠΊΠ°ΡΠ΅ΡΡΠ²ΠΎ.
Π€ΠΎΡΠΌΠ°Ρ ΡΠ°ΠΊΠΆΠ΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅ΡΡΡ Π²ΡΠ΅ΠΌΠΈ Π±ΡΠ°ΡΠ·Π΅ΡΠ°ΠΌΠΈ ΠΈ ΡΡΡΡΠΎΠΉΡΡΠ²Π°ΠΌΠΈ, ΡΡΠΎ Π³Π°ΡΠ°Π½ΡΠΈΡΡΠ΅Ρ Π΅Π³ΠΎ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π° Π»ΡΠ±ΠΎΠΌ ΡΠΊΡΠ°Π½Π΅.
ΠΠΎ ΠΊΠ°ΡΠ΅ΡΡΠ²Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π²ΡΠ³Π»ΡΠ΄ΡΡ Π»ΡΡΡΠ΅, ΡΠ΅ΠΌ JPG, Π½ΠΎ Π²Π΅Ρ ΡΠ°ΠΉΠ»Π° Π±ΡΠ΄Π΅Ρ Π±ΠΎΠ»ΡΡΠ΅. ΠΡΠΎ Π½ΡΠΆΠ½ΠΎ ΡΡΠΈΡΡΠ²Π°ΡΡ ΠΏΡΠΈ ΡΠ°Π·ΠΌΠ΅ΡΠ΅Π½ΠΈΠΈ ΡΠ°ΠΉΠ»ΠΎΠ² Π½Π° ΡΠ°ΠΉΡΠ΅.
ΠΡΠΎ 8-Π±ΠΈΡΠ½ΡΠΉ ΡΠΎΡΠΌΠ°Ρ, ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡΠΈΠΉ 256 ΡΠ²Π΅ΡΠΎΠ², ΠΏΡΠΎΠ·ΡΠ°ΡΠ½ΠΎΡΡΡ ΠΈ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ. ΠΠ° ΡΡΡΡ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠΈ ΠΌΠ°Π»ΠΎΠ³ΠΎ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²Π° ΡΠ²Π΅ΡΠΎΠ², Π²Π΅Ρ ΡΠ°ΠΉΠ»Π° ΡΠΎΠΆΠ΅ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΡΠΉ.
Π€ΠΎΡΠΌΠ°Ρ Π½Π΅ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ΠΈΡ Π΄Π»Ρ ΡΠΎΡΠΎΠ³ΡΠ°ΡΠΈΠΉ ΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ Ρ ΡΠΈΡΠΎΠΊΠΈΠΌ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½ΠΎΠΌ ΡΠ²Π΅ΡΠΎΠ².
ΠΠ°ΡΠΎ ΡΠΈΡΠΎΠΊΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ ΠΏΡΠΈ ΡΠΎΠ·Π΄Π°Π½ΠΈΠΈ GIF-Π°Π½ΠΈΠΌΠ°ΡΠΈΠΉ, Π±Π°Π½Π½Π΅ΡΠΎΠ², ΠΊΠ½ΠΎΠΏΠΎΠΊ, ΠΈΠΊΠΎΠ½ΠΎΠΊ ΠΈ ΡΠ°ΠΊ Π΄Π°Π»Π΅Π΅.
Π ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΡΡ ΡΠ°ΠΉΡΠ°Ρ ΡΡΠΎΡ ΡΠΎΡΠΌΠ°Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π²ΡΡ ΡΠ΅ΠΆΠ΅.
ΠΠ°Π»Π΅Π΅ ΠΏΠΎΠ³ΠΎΠ²ΠΎΡΠΈΠΌ ΠΎΠ± ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠ²Π΅ΠΆΠΈΡ ΡΠΎΡΠΌΠ°ΡΠ°Ρ SVG ΠΈ WebP, ΠΊΠΎΡΠΎΡΡΠ΅ Π½Π΅ ΡΠ°ΠΊ ΠΏΠΎΠΏΡΠ»ΡΡΠ½Ρ, Π½ΠΎ Π½Π°Π±ΠΈΡΠ°ΡΡ ΠΏΠΎΠΏΡΠ»ΡΡΠ½ΠΎΡΡΡ ΠΈ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΡ, ΠΈ ΠΊΠ°ΠΊ Π½Π΅Π»ΡΠ·Ρ Π»ΡΡΡΠ΅ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ΡΡ ΠΏΠΎΠ΄ ΡΡΠ΅Π±ΠΎΠ²Π°Π½ΠΈΡ ΡΠΊΠΎΡΠΎΡΡΠΈ Π·Π°Π³ΡΡΠ·ΠΊΠΈ ΠΈ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΡΡΠΈ ΡΠ°ΠΉΡΠΎΠ².
ΠΡΠΎ ΡΠΎΡΠΌΠ°Ρ Π²Π΅ΠΊΡΠΎΡΠ½ΡΡ ΡΠ°ΠΉΠ»ΠΎΠ² Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ XML. Π€ΠΎΡΠΌΠ°Ρ ΡΡΠ°Π» Π½Π°Π±ΠΈΡΠ°ΡΡ ΠΏΠΎΠΏΡΠ»ΡΡΠ½ΠΎΡΡΡ ΡΠΎΠ²ΡΠ΅ΠΌ Π½Π΅Π΄Π°Π²Π½ΠΎ, ΡΠ°ΠΊ ΠΊΠ°ΠΊ ΡΠ°Π½Π΅Π΅ ΠΎΠ½ ΡΠ»Π°Π±ΠΎ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π»ΡΡ Π² Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ . Π ΠΈΠ·-Π·Π° ΠΏΡΠΎΠ±Π»Π΅ΠΌ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π½ΠΈΠΊΡΠΎ Π½Π΅ ΡΠΎΡΠΎΠΏΠΈΠ»ΡΡ Π΅Π³ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ.
ΠΠ° ΡΠ΅Π³ΠΎΠ΄Π½ΡΡΠ½ΠΈΠΉ Π΄Π΅Π½Ρ SVG ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅ΡΡΡ Π²ΡΠ΅ΠΌΠΈ ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΡΠΌΠΈ Π±ΡΠ°ΡΠ·Π΅ΡΠ°ΠΌΠΈ. ΠΠΎ, ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ Π²ΡΠ΅, ΠΆΠ΅ Π²ΡΡΡΠ΅ΡΠ°ΡΡΡΡ.
ΠΠ°ΠΈΠ±ΠΎΠ»Π΅Π΅ ΡΠ°ΡΡΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡ ΡΡΠΎΡ ΡΠΎΡΠΌΠ°Ρ Π΄Π»Ρ ΠΏΡΠΎΡΡΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ, ΡΠ°ΠΊΠΈΡ ΠΊΠ°ΠΊ Π»ΠΎΠ³ΠΎΡΠΈΠΏΡ, ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π΄ΠΈΠ·Π°ΠΉΠ½Π° ΠΈ ΡΠ°ΠΊ Π΄Π°Π»Π΅Π΅. ΠΠ΅ΠΏΡΠΈΠΌΠ΅Π½ΠΈΠΌ Π΄Π»Ρ ΡΠΎΡΠΎΠ³ΡΠ°ΡΠΈΠΉ.
Π€ΠΎΡΠΌΠ°Ρ SVG ΠΈΠΌΠ΅Π΅Ρ ΠΌΠ°Π»ΡΠΉ Π²Π΅Ρ, ΠΎΡΠ»ΠΈΡΠ½ΠΎ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΡΡΡΡΡ, ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠΈΠ²Π°Ρ ΡΡΡΠΊΠΎΡΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π½Π° Π»ΡΠ±ΠΎΠΌ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΠΈ ΡΠΊΡΠ°Π½Π°, ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅Ρ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ, ΠΌΠΎΠΆΠ½ΠΎ ΡΠΏΡΠ°Π²Π»ΡΡΡ ΡΠ΅ΡΠ΅Π· CSS ΠΈ ΡΠ°Π·ΠΌΠ΅ΡΠ°ΡΡ Π² HTML, ΡΠΎΠΊΡΠ°ΡΠ°Ρ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ Π·Π°ΠΏΡΠΎΡΠΎΠ².
Π€ΠΎΡΠΌΠ°Ρ Ρ ΠΎΡΠΊΡΡΡΡΠΌ ΠΈΡΡ ΠΎΠ΄Π½ΡΠΌ ΠΊΠΎΠ΄ΠΎΠΌ, ΡΠ°Π·ΡΠ°Π±ΠΎΡΠ°Π½ Google ΡΠΏΠ΅ΡΠΈΠ°Π»ΡΠ½ΠΎ Π΄Π»Ρ ΠΈΠ½ΡΠ΅ΡΠ½Π΅ΡΠ°. Π‘Π΅Π³ΠΎΠ΄Π½Ρ YouTube ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ ΠΏΡΠ΅ΠΎΠ±ΡΠ°Π·ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΌΠΈΠ½ΠΈΠ°ΡΡΡ Π΄Π»Ρ Π²ΠΈΠ΄Π΅ΠΎ Π² ΡΠΎΡΠΌΠ°Ρ WebP.
Π€ΠΎΡΠΌΠ°Ρ ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠΈΠ²Π°Π΅Ρ ΠΏΡΠ΅Π²ΠΎΡΡ ΠΎΠ΄Π½ΠΎΠ΅ ΡΠΆΠ°ΡΠΈΠ΅ ΠΈ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅Ρ ΠΏΡΠΎΠ·ΡΠ°ΡΠ½ΠΎΡΡΡ. ΠΠ½ ΡΠΎΡΠ΅ΡΠ°Π΅Ρ Π² ΡΠ΅Π±Π΅ ΠΏΡΠ΅ΠΈΠΌΡΡΠ΅ΡΡΠ²Π° JPG ΠΈ PNG ΡΠΎΡΠΌΠ°ΡΠΎΠ² Π±Π΅Π· ΡΠ²Π΅Π»ΠΈΡΠ΅Π½ΠΈΡ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΡΠ°ΠΉΠ»Π°.
ΠΠΎ, Π½Π΅ΡΠΌΠΎΡΡΡ Π½Π° ΠΏΡΠ΅ΠΈΠΌΡΡΠ΅ΡΡΠ²Π° ΡΠΎΡΠΌΠ°ΡΠ°, ΠΎΠ½ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅ΡΡΡ Π½Π΅ Π²ΡΠ΅ΠΌ Π±ΡΠ°ΡΠ·Π΅ΡΠ°ΠΌΠΈ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, IE, Edge, Firefox ΠΈ Safari.
Π‘ΡΡΠ΅ΡΡΠ²ΡΡΡ ΡΠΏΠΎΡΠΎΠ±Ρ ΠΎΠ±Ρ ΠΎΠ΄Π° ΡΡΠΈΡ ΠΎΠ³ΡΠ°Π½ΠΈΡΠ΅Π½ΠΈΠΉ, Π½ΠΎ ΠΎΠ½ΠΈ Π½Π΅ Π΄Π°ΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠΎΡΠΌΠ°Ρ ΠΏΠΎΠ²ΡΠ΅ΠΌΠ΅ΡΡΠ½ΠΎ.
ΠΠ°ΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅
ΠΡΡΠ·ΡΡ, Π½Π°Π΄Π΅ΡΡΡ, ΠΎΠ±ΡΡΡΠ½ΠΈΠ» Π²ΡΡ ΠΏΠΎΠ½ΡΡΠ½ΠΎ, ΠΈ Π²Ρ ΡΠ΅ΠΏΠ΅ΡΡ Π·Π½Π°Π΅ΡΠ΅, ΠΊΠ°ΠΊΠΎΠΉ ΡΠΎΡΠΌΠ°Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ Π»ΡΡΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π½Π° ΡΠ°ΠΉΡΠ΅, ΠΈ ΠΏΠΎΡΠ΅ΠΌΡ Ρ Π½Π΅ Π½Π°ΡΡΠ°ΠΈΠ²Π°Ρ Π½Π° ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΊΠ°ΠΊΠΎΠ³ΠΎ-ΡΠΎ ΡΠΎΡΠΌΠ°ΡΠ°, Π° ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡΡ ΠΊΠΎΠΌΠΏΠ»Π΅ΠΊΡΠ½ΡΠΉ ΠΏΠΎΠ΄Ρ ΠΎΠ΄.
ΠΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, ΠΊΠΎΠ³Π΄Π° WebP ΠΏΠΎΠ»ΡΡΠΈΡ ΡΠΈΡΠΎΠΊΡΡ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΡ, ΠΌΡ Π²ΡΠ΅ ΠΏΠ΅ΡΠ΅ΠΉΠ΄ΡΠΌ Π½Π° Π½Π΅Π³ΠΎ ΠΈ Π·Π°ΠΌΠ΅Π½ΠΈΠΌ jpg ΠΈ png Π½Π° ΡΠ²ΠΎΠΈΡ ΡΠ°ΠΉΡΠ°Ρ .
ΠΠ°Π²Π°ΠΉΡΠ΅ ΠΎΠ±ΡΡΠ΄ΠΈΠΌ Π² ΠΊΠΎΠΌΠΌΠ΅Π½ΡΠ°ΡΠΈΡΡ , ΠΊΠ°ΠΊΠΈΠ΅ Π²Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΠ΅ ΡΠΎΡΠΌΠ°ΡΡ Π½Π° ΡΠ²ΠΎΠΈΡ ΡΠ°ΠΉΡΠ°Ρ , ΡΡΠΎ Π½ΡΠ°Π²ΠΈΡΡΡ ΠΈ ΡΡΠΎ Π½Π΅ Π½ΡΠ°Π²ΠΈΡΡΡ.
ΠΠ° ΡΠ΅Π³ΠΎΠ΄Π½Ρ Ρ ΠΌΠ΅Π½Ρ Π²ΡΡ, ΠΆΠ΄Ρ Π²Π°ΡΠΈΡ ΠΊΠΎΠΌΠΌΠ΅Π½ΡΠ°ΡΠΈΠ΅Π².







