ΠΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎΠ΅ ΠΏΠΎΡΡΡΠΎΠ΅Π½ΠΈΠ΅ html ΡΡΡΠ»ΠΊΠΈ Ρ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΎΠΉ
Π‘Π°ΠΌΠ°Ρ ΠΏΡΠΎΡΡΠ°Ρ ΠΊΠΎΠ½ΡΡΡΡΠΊΡΠΈΡ ΠΎΠ±ΡΡΠ½ΠΎΠΉ ΡΡΡΠ»ΠΊΠΈ:
<a href="/images/favicon.png">ΡΠ°Π²ΠΈΠΊΠΎΠ½<a/>
Π Π΅Π·ΡΠ»ΡΡΠ°Ρ — ΡΠ°Π²ΠΈΠΊΠΎΠ½
ΠΡΠΎΠΏΠΈΡΠ΅ΠΌ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ «title», Π΄Π»Ρ ΠΏΠΎΠΈΡΠΊΠΎΠ²ΠΈΠΊΠΎΠ², ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π²ΡΠ²ΠΎΠ΄ΠΈΡΡΡ ΠΏΠΎΡΡΠ½ΡΡΡΠ°Ρ Π½Π°Π΄ΠΏΠΈΡΡ (Π±Π΅Π·Π±ΠΎΠ»Π΅Π·Π½Π΅Π½Π½ΠΎ ΡΠ»ΡΡΡΠ°Π΅Ρ ΠΊΠ»ΡΡΠ΅Π²ΡΡ ΠΌΠ°ΡΡΡ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅):
<a href="/images/favicon.png " title="ΠΈΠΊΠΎΠ½ΠΊΠ° ΡΠ°ΠΉΡΠ°">ΡΠ°Π²ΠΈΠΊΠΎΠ½<a/>
Π Π΅Π·ΡΠ»ΡΡΠ°Ρ ΡΠ°Π²ΠΈΠΊΠΎΠ½ — Π½Π°Π²Π΅Π΄ΠΈΡΠ΅ ΠΌΡΡΠΊΡ Π½Π° ΡΡΡΠ»ΠΊΡ.
ΠΡΡΠ°Π²ΠΈΠΌ ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ Π² ΡΡΡΠ»ΠΊΡ:
<a href="/images/favicon.png " title="ΠΈΠΊΠΎΠ½ΠΊΠ° ΡΠ°ΠΉΡΠ°"><img src="/images/favicon.png"/><a/>
Π Π΅Π·ΡΠ»ΡΡΠ°Ρ —
ΠΡΠΎΠΏΠΈΡΡΠ²Π°Π΅ΠΌ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ «alt», Π΄Π»Ρ ΡΠ²Π΅Π»ΠΈΡΠ΅Π½ΠΈΡ ΠΊΠ»ΡΡΠ΅Π²ΠΎΠΉ ΠΌΠ°ΡΡΡ + Π΅ΡΠ»ΠΈ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ ΠΎΡΠΊΠ»ΡΡΠ΅Π½Ρ Π±ΡΠ΄Π΅Ρ Π΅Π΅ ΡΠ»ΠΎΠ²Π΅ΡΠ½ΠΎΠ΅ ΠΎΠΏΠΈΡΠ°Π½ΠΈΠ΅:
<a href="/images/favicon.png" title="ΠΈΠΊΠΎΠ½ΠΊΠ° ΡΠ°ΠΉΡΠ°"> <img src="/images/favicon.png" alt="Π·Π΄Π΅ΡΡ Π΄ΠΎΠ»ΠΆΠ½Π° Π±ΡΡΡ ΠΈΠΊΠΎΠ½ΠΊΠ° Π΄Π»Ρ ΡΠ°ΠΉΡΠ°"/> <a/>
Π Π΅Π·ΡΠ»ΡΡΠ°Ρ: , Π΅ΡΠ»ΠΈ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠ° Π½Π΅ Π·Π°Π³ΡΡΠ·ΠΈΠ»Π°ΡΡ:
ΠΠΎΠΏΡΠΎΠ±ΡΠ΅ΠΌ ΠΏΡΠΎΠΏΠΈΡΠ°ΡΡ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ «alt» Π² ΡΠ΅Π³ <a> ΠΈ ΠΏΠΎΡΠΌΠΎΡΡΠΈΠΌ ΡΡΠΎ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡΡΡ:
<a href="/images/favicon.png" title="ΠΈΠΊΠΎΠ½ΠΊΠ° ΡΠ°ΠΉΡΠ°" alt="Π·Π΄Π΅ΡΡ Π΄ΠΎΠ»ΠΆΠ½Π° Π±ΡΡΡ ΠΈΠΊΠΎΠ½ΠΊΠ° Π΄Π»Ρ ΡΠ°ΠΉΡΠ°"> <img src="/images/favicon.png" /> <a/>
Π Π΅Π·ΡΠ»ΡΡΠ°Ρ: , Π΅ΡΠ»ΠΈ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠ° Π½Π΅ Π·Π°Π³ΡΡΠ·ΠΈΠ»Π°ΡΡ:
ΠΠ΅Π»Π°Π΅ΠΌ Π²ΡΠ²ΠΎΠ΄ ΡΡΠΎ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ «alt» Π½Π°Π΄ΠΎ ΠΏΡΠΎΠΏΠΈΡΡΠ²Π°ΡΡ ΡΠΎΠ»ΡΠΊΠΎ Π²Π½ΡΡΡΠΈ ΡΠ΅Π³Π° <img>
ΠΠ°ΡΠΎ, Π½Π°ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΌΠ½Π΅ ΠΈΠ·Π²Π΅ΡΡΠ½ΠΎ, ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ «title» ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡΠΎΠΏΠΈΡΠ°ΡΡ ΠΈ ΡΠ°ΠΌ ΠΈ ΡΠ°ΠΌ. ΠΡΠΎΠ²Π΅ΡΠΈΠΌ.
Π ΠΏΡΠΎΡΠ»ΡΡ Π²Π°ΡΠΈΠ°Π½ΡΠ°Ρ ΠΌΡ ΠΏΠΎΡΠΌΠΎΡΡΠ΅Π»ΠΈ Π² ΡΠ΅Π»Π΅ ΡΡΡΠ»ΠΊΠΈ — ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ.
Π’Π΅ΠΏΠ΅ΡΡ ΡΠ΄Π΅Π»Π°Π΅ΠΌ Π΅Π³ΠΎ Π² ΡΠ΅Π»Π΅ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ -
<a href="/images/favicon.png"><img src="/images/favicon.png" title="ΠΈΠΊΠΎΠ½ΠΊΠ° ΡΠ°ΠΉΡΠ°"></a>
Π Π΅Π·ΡΠ»ΡΡΠ°Ρ — ΡΠ°Π±ΠΎΡΠ°Π΅Ρ.
ΠΠ°ΠΊ ΡΠ΄Π΅Π»Π°ΡΡ ΡΠ°ΠΊ ΡΡΠΎΠ±Ρ ΡΡΡΠ»ΠΊΠ° ΠΎΡΠΊΡΡΠ²Π°Π»Π°ΡΡ Π² Π½ΠΎΠ²ΠΎΠΉ Π²ΠΊΠ»Π°Π΄ΠΊΠ΅ — ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ «target»
Π£Π΄Π΅Π»ΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ Π΄Π°Π½Π½ΠΎΠΉ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠΈ, ΠΎΠ½Π° ΡΠ²Π΅Π»ΠΈΡΠΈΠ²Π°Π΅Ρ Π²ΡΠ΅ΠΌΡ Π½Π°Ρ
ΠΎΠΆΠ΄Π΅Π½ΠΈΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ Π½Π° ΡΠ°ΠΉΡΠ΅, Π° ΡΠ»Π΅Π΄ΠΎΠ²Π°ΡΠ΅Π»ΡΠ½ΠΎ ΡΠ»ΡΡΡΠ°Π΅Ρ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΡΠ΅ΡΠΊΠΈΠ΅ ΡΠ°ΠΊΡΠΎΡΡ.
<a href="/images/favicon.png " title="ΠΈΠΊΠΎΠ½ΠΊΠ° ΡΠ°ΠΉΡΠ°" target="_blank">ΡΠ°Π²ΠΈΠΊΠΎΠ½</a>
Π Π΅Π·ΡΠ»ΡΡΠ°Ρ — ΡΠ°Π²ΠΈΠΊΠΎΠ½ Π½Π°ΠΆΠΌΠΈΡΠ΅ ΠΈ Ρ Π²Π°Ρ ΠΎΡΠΊΡΠΎΠ΅ΡΡΡ Π½ΠΎΠ²Π°Ρ Π²ΠΊΠ»Π°Π΄ΠΊΠ° Ρ ΠΈΠΊΠΎΠ½ΠΊΠΎΠΉ.
ΠΠ°ΠΊ ΡΠ΄Π΅Π»Π°ΡΡ ΡΠ°ΠΊ ΡΡΠΎΠ±Ρ Π²ΡΠ΅ ΡΡΡΠ»ΠΊΠΈ Π½Π° ΡΠ°ΠΉΡΠ΅ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ ΠΎΡΠΊΡΡΠ²Π°Π»ΠΈΡΡ Π² Π½ΠΎΠ²ΡΡ Π²ΠΊΠ»Π°Π΄ΠΊΠ°Ρ :
ΠΠ»Ρ ΡΡΠΎΠ³ΠΎ Π½ΡΠΆΠ½ΠΎ Π²ΡΠ΅Π³ΠΎ-Π»ΠΈΡΡ Π² ΡΠ΅ΠΊΡΠΈΠΈ head ΡΡΡΠ°Π½ΠΈΡΡ ΠΏΡΠΎΠΏΠΈΡΠ°ΡΡ ΡΠ»Π΅Π΄ΡΡΡΠ΅Π΅:
<head> <base target='_blank' />
ΠΠΎΠ΄Π²Π΅Π΄Π΅ΠΌ ΠΈΡΠΎΠ³ΠΈ:
ΠΡΠ°Π²ΠΈΠ»ΡΠ½Π°Ρ ΡΡΡΠ»ΠΊΠ° Π²ΡΠ³Π»ΡΠ΄ΠΈΡ:
<a href="/images/favicon.png " title="ΠΈΠΊΠΎΠ½ΠΊΠ° ΡΠ°ΠΉΡΠ°">ΡΠ°Π²ΠΈΠΊΠΎΠ½<a/>
ΠΡΠ°Π²ΠΈΠ»ΡΠ½Π°Ρ ΡΡΡΠ»ΠΊΠ° ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΎΠΉ:
<a href="/images/favicon.png" title="ΠΈΠΊΠΎΠ½ΠΊΠ° ΡΠ°ΠΉΡΠ°">
<img src="/images/favicon.png" alt="Π·Π΄Π΅ΡΡ Π΄ΠΎΠ»ΠΆΠ½Π° Π±ΡΡΡ ΠΈΠΊΠΎΠ½ΠΊΠ° Π΄Π»Ρ ΡΠ°ΠΉΡΠ°"/>
<a/>
ΡΡΠΊΠΎΠ²ΠΎΠ΄ΡΡΠ²ΠΎ ΠΏΠΎ ΠΎΡΠ»ΠΎΠΆΠ΅Π½Π½ΠΎΠΉ Π·Π°Π³ΡΡΠ·ΠΊΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ β ΠΠΈΠ·Π°ΠΉΠ½ Π½Π° vc.ru
ΠΠ΅ΡΠ΅Π²ΠΎΠ΄ ΠΌΠ°ΡΠ΅ΡΠΈΠ°Π»Π° ΡΠΎΠΎΡΠ½ΠΎΠ²Π°ΡΠ΅Π»Ρ ΡΠ΅ΡΠ²ΠΈΡΠ° Π΄Π»Ρ ΠΎΠΏΡΠΈΠΌΠΈΠ·Π°ΡΠΈΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ ImageKit Π Π°Ρ ΡΠ»Π° ΠΠ°Π½Π²Π°Π½ΠΈ.
58Β 320 ΠΏΡΠΎΡΠΌΠΎΡΡΠΎΠ²
ΠΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π²Π°ΠΆΠ½Ρ Π΄Π»Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΡΠ°ΠΉΡΠ° ΠΈ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ. ΠΠ΅Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡΠ΅Π΄ΡΡΠ°Π²ΠΈΡΡ ΡΠ΅Π±Π΅ ΡΠ°ΠΉΡ Π±Π΅Π· ΡΠ΅ΠΊΠ»Π°ΠΌΠ½ΠΎΠ³ΠΎ Π±Π°Π½Π½Π΅ΡΠ°, ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΏΡΠΎΠ΄ΡΠΊΡΠ° ΠΈΠ»ΠΈ Π»ΠΎΠ³ΠΎΡΠΈΠΏΠ°.
ΠΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΡΠ°ΡΡΠΎ ΠΌΠ½ΠΎΠ³ΠΎ Π²Π΅ΡΡΡ, ΠΈ ΡΡΠΎ Π² ΠΏΠ΅ΡΠ²ΡΡ ΠΎΡΠ΅ΡΠ΅Π΄Ρ Π²Π»ΠΈΡΠ΅Ρ Π½Π° ΡΠ°Π·ΠΌΠ΅Ρ ΡΡΡΠ°Π½ΠΈΡΡ. Π‘ΠΎΠ³Π»Π°ΡΠ½ΠΎ Π΄Π°Π½Π½ΡΠΌ ΡΠ°ΠΉΡΠ° HTTP Archive, ΡΡΠ΅Π΄Π½ΠΈΠΉ Π²Π΅Ρ ΡΡΡΠ°Π½ΠΈΡΡ Π½Π° ΠΊΠΎΠΌΠΏΡΡΡΠ΅ΡΠ΅ ΡΠΎΡΡΠ°Π²Π»ΡΠ΅Ρ 1511 ΠΠ. ΠΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π·Π°Π½ΠΈΠΌΠ°ΡΡ ΠΏΠΎΡΡΠΈ 650 ΠΠ, ΡΡΠΎ ΠΏΡΠΈΠΌΠ΅ΡΠ½ΠΎ 45% ΠΎΡ ΠΎΠ±ΡΠ΅Π³ΠΎ ΡΠΈΡΠ»Π°.
Π’Π΅ΠΏΠ΅ΡΡ Π²Π°ΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°ΡΡ Π±ΡΡΡΡΡΡ Π·Π°Π³ΡΡΠ·ΠΊΡ ΡΡΡΠ°Π½ΠΈΡΡ Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡΠΌΠΈ. Π ΡΡΠΎΠΌ ΠΌΠ°ΡΠ΅ΡΠΈΠ°Π»Π΅ ΡΠ°ΡΡΠΊΠ°ΠΆΡ ΠΎΠ± ΠΎΡΠ»ΠΎΠΆΠ΅Π½Π½ΠΎΠΉ Π·Π°Π³ΡΡΠ·ΠΊΠ΅ β ΠΌΠ΅ΡΠΎΠ΄Π΅, ΠΊΠΎΡΠΎΡΡΠΉ ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ ΡΠΎΠΊΡΠ°ΡΠΈΡΡ Π²ΡΠ΅ΠΌΡ Π·Π°Π³ΡΡΠ·ΠΊΠΈ ΡΡΡΠ°Π½ΠΈΡΡ ΠΈ ΡΠΌΠ΅Π½ΡΡΠΈΡΡ Π΅Ρ ΡΠ°Π·ΠΌΠ΅Ρ, Π½Π΅ ΠΆΠ΅ΡΡΠ²ΡΡ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠ°ΠΌΠΈ.
ΠΡΠ½ΠΎΠ²Π½ΡΠ΅ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠΈ β Π²ΠΊΡΠ°ΡΡΠ΅
ΠΠΎΡ Π²ΠΈΠ΄Π΅ΠΎ, Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠΈΡΡΡΡΠ΅Π΅ ΠΏΡΠΈΠ½ΡΠΈΠΏ ΡΠ°Π±ΠΎΡΡ. ΠΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, ΠΊΠ°ΠΊ ΠΏΡΠΈ ΠΏΡΠΎΠΊΡΡΡΠΊΠ΅ ΡΡΡΠ°Π½ΠΈΡΡ ΡΠ΅ΡΡΠΉ ΠΏΠ»Π΅ΠΉΡΡ ΠΎΠ»Π΄Π΅Ρ Π·Π°ΠΌΠ΅Π½ΡΠ΅Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅.
Π§ΡΠΎ ΡΠ°ΠΊΠΎΠ΅ ΠΎΡΠ»ΠΎΠΆΠ΅Π½Π½Π°Ρ Π·Π°Π³ΡΡΠ·ΠΊΠ°
ΠΡΠΎ ΠΌΠ΅ΡΠΎΠ΄, ΠΊΠΎΡΠΎΡΡΠΉ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡ ΠΏΡΠΈ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠ΅ ΡΠ°ΠΉΡΠΎΠ² ΠΈ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ, ΠΎΠ½ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΠΎΡΠ»ΠΎΠΆΠΈΡΡ Π·Π°Π³ΡΡΠ·ΠΊΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅ Π½Π° Π±ΠΎΠ»Π΅Π΅ ΠΏΠΎΠ·Π΄Π½ΠΈΠΉ ΠΌΠΎΠΌΠ΅Π½Ρ Π²ΡΠ΅ΠΌΠ΅Π½ΠΈ. ΠΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π·Π°Π³ΡΡΠΆΠ°ΡΡΡΡ Π½Π΅ ΡΡΠ°Π·Ρ ΠΏΡΠΈ ΠΎΡΠΊΡΡΡΠΈΠΈ ΡΡΡΠ°Π½ΠΈΡΡ, Π° ΡΠΎΠ»ΡΠΊΠΎ ΠΊΠΎΠ³Π΄Π° ΠΏΠΎΡΠ²Π»ΡΠ΅ΡΡΡ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎΡΡΡ. ΠΡΠΎ ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ ΡΠ»ΡΡΡΠΈΡΡ ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΡ ΠΈ ΡΠΊΠΎΠ½ΠΎΠΌΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠ΅ΡΡΡΡΡ ΡΡΡΡΠΎΠΉΡΡΠ²Π°.
ΠΠ΅ΡΠΎΠ΄ ΠΎΡΠ»ΠΎΠΆΠ΅Π½Π½ΠΎΠΉ Π·Π°Π³ΡΡΠ·ΠΊΠΈ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡΠΈΠΌΠ΅Π½ΠΈΡΡ ΠΏΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈ ΠΊΠΎ Π²ΡΠ΅ΠΌΡ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, Π΅ΡΠ»ΠΈ Π² ΠΎΠ΄Π½ΠΎΡΡΡΠ°Π½ΠΈΡΠ½ΠΎΠΌ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ JavaScript-ΡΠ°ΠΉΠ» Π½Π΅ Π½ΡΠΆΠ΅Π½ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ Π΄ΠΎ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ½Π½ΠΎΠ³ΠΎ ΠΌΠΎΠΌΠ΅Π½ΡΠ°, ΡΠΎ Π»ΡΡΡΠ΅ Π²ΠΎΠΎΠ±ΡΠ΅ Π½Π΅ Π·Π°Π³ΡΡΠΆΠ°ΡΡ Π΅Π³ΠΎ. ΠΡΠ»ΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π΅ ΡΡΠ΅Π±ΡΠ΅ΡΡΡ ΡΡΠ°Π·Ρ, ΠΊΠ°ΠΊ ΡΠΎΠ»ΡΠΊΠΎ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ ΠΎΡΠΊΡΡΠ» ΡΡΡΠ°Π½ΠΈΡΡ, Π·Π°Π³ΡΡΠ·ΠΈΡΠ΅ Π΅Π³ΠΎ ΠΏΠΎΠ·ΠΆΠ΅, ΠΊΠΎΠ³Π΄Π° ΠΎΠ½ΠΎ Π΄Π΅ΠΉΡΡΠ²ΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΏΠΎΠ½Π°Π΄ΠΎΠ±ΠΈΡΡΡ.
ΠΡΠΎΠ±Π΅Π½Π½ΠΎ ΠΏΠΎΠ»Π΅Π·Π½ΠΎ ΡΡΠΎ Π±ΡΠ΄Π΅Ρ Π΄Π»Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΉ, ΠΊΠΎΡΠΎΡΡΠ΅ ΡΡΡ ΠΆΠ΅ Π·Π°ΠΊΡΡΠ²Π°ΡΡ ΡΡΡΠ°Π½ΠΈΡΡ ΠΈΠ»ΠΈ Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡΠ²ΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ Ρ Π΅Ρ Π²Π΅ΡΡ
Π½Π΅ΠΉ ΡΠ°ΡΡΡΡ.
ΠΠ½ΡΡΡΡΠΌΠ΅Π½ΡΡ
ΠΡΠ½ΠΎΠ²Π½Π°Ρ ΠΈΠ΄Π΅Ρ ΠΏΡΠΎΡΡΠ° β ΠΎΡΠ»ΠΎΠΆΠΈΡΡ Π·Π°Π³ΡΡΠ·ΠΊΡ Π²ΡΠ΅Π³ΠΎ, ΡΡΠΎ Π½Π΅ Π½ΡΠΆΠ½ΠΎ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ ΠΏΡΡΠΌΠΎ ΡΠ΅ΠΉΡΠ°Ρ. Π Π»ΡΠ±ΠΎΠΌΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ Π½Π΅ Π²ΠΈΠ΄ΠΈΡ ΠΈΠ·Π½Π°ΡΠ°Π»ΡΠ½ΠΎ, ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡΠΈΠΌΠ΅Π½ΠΈΡΡ ΡΡΠΎΡ ΠΌΠ΅ΡΠΎΠ΄.
ΠΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°Π΅Ρ ΡΡΡΠ°Π½ΠΈΡΡ Π²Π½ΠΈΠ·, ΠΏΠ»Π΅ΠΉΡΡ ΠΎΠ»Π΄Π΅ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄ΡΡ Π² ΠΎΠ±Π»Π°ΡΡΡ ΠΏΡΠΎΡΠΌΠΎΡΡΠ° (Π²ΠΈΠ΄ΠΈΠΌΠ°Ρ ΡΠ°ΡΡΡ ΡΡΡΠ°Π½ΠΈΡΡ). Π ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π·Π°Π³ΡΡΠΆΠ°ΡΡΡΡ, ΠΊΠΎΠ³Π΄Π° ΡΡΠ°Π½ΠΎΠ²ΡΡΡΡ Π²ΠΈΠ΄ΠΈΠΌΡΠΌΠΈ.
Π‘ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ°ΡΡΠΈΡΠ΅Π½ΠΈΡ Lighthouse Π΄Π»Ρ Π±ΡΠ°ΡΠ·Π΅ΡΠ° Google Chrome ΠΌΠΎΠΆΠ½ΠΎ ΡΠ·Π½Π°ΡΡ, ΠΊΠ°ΠΊΠΈΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ΡΡ Π΄Π»Ρ ΠΎΡΠ»ΠΎΠΆΠ΅Π½Π½ΠΎΠΉ Π·Π°Π³ΡΡΠ·ΠΊΠΈ ΠΈ ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΡΠ°ΡΠΈΠΊΠ° ΠΌΠΎΠΆΠ½ΠΎ ΡΡΠΊΠΎΠ½ΠΎΠΌΠΈΡΡ. Π ΡΠ°ΡΡΠΈΡΠ΅Π½ΠΈΠΈ Π΅ΡΡΡ ΡΠ°Π·Π΄Π΅Π», ΠΏΠΎΡΠ²ΡΡΡΠ½Π½ΡΠΉ Π·Π°ΠΊΠ°Π΄ΡΠΎΠ²ΡΠΌ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡΠΌ.
Π’Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π°Π½Π°Π»ΠΈΠ·Π°ΡΠΎΡ ΡΠ°ΠΉΡΠΎΠ² ΠΎΡ ImageKit, ΡΡΠΎΠ±Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΠΈΡΡ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ ΡΠ°ΠΉΡ ΠΎΡΠ»ΠΎΠΆΠ΅Π½Π½ΡΡ Π·Π°Π³ΡΡΠ·ΠΊΡ ΠΈΠ»ΠΈ Π½Π΅Ρ.
Π‘ΠΏΠΎΡΠΎΠ±Ρ ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΠΈ
ΠΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅ ΠΌΠΎΠΆΠ½ΠΎ Π·Π°Π³ΡΡΠΆΠ°ΡΡ Π΄Π²ΡΠΌΡ ΡΠΏΠΎΡΠΎΠ±Π°ΠΌΠΈ β Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ΅Π³Π° <img> ΠΈΠ»ΠΈ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS-ΡΠ²ΠΎΠΉΡΡΠ²Π° Β«backgroundΒ», ΠΊΠΎΡΠΎΡΠΎΠ΅ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ ΠΎΠ΄Π½ΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΠΎ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ Ρ
Π°ΡΠ°ΠΊΡΠ΅ΡΠΈΡΡΠΈΠΊ ΡΠΎΠ½Π°.
Π’Π΅Π³ <img>
ΠΡΠ»ΠΎΠΆΠ΅Π½Π½ΡΡ Π·Π°Π³ΡΡΠ·ΠΊΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ°Π·Π΄Π΅Π»ΠΈΡΡ Π½Π° Π΄Π²Π° ΡΡΠ°ΠΏΠ°.
Π¨Π°Π³ ΠΏΠ΅ΡΠ²ΡΠΉ β ΠΏΡΠ΅Π΄ΠΎΡΠ²ΡΠ°ΡΠΈΡΡ ΠΈΠ·Π½Π°ΡΠ°Π»ΡΠ½ΡΡ Π·Π°Π³ΡΡΠ·ΠΊΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ. ΠΠ»Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ, Π·Π°Π³ΡΡΠΆΠ΅Π½Π½ΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ΅Π³Π° <img />, Π±ΡΠ°ΡΠ·Π΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ Π°ΡΡΠΈΠ±ΡΡ ΡΠ΅Π³Π° Β«srcΒ» Π΄Π»Ρ Π·Π°ΠΏΡΡΠΊΠ° Π·Π°Π³ΡΡΠ·ΠΊΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ. ΠΠ΅ ΠΈΠΌΠ΅Π΅Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΡ, ΠΏΠ΅ΡΠ²ΠΎΠ΅ ΡΡΠΎ ΠΈΠ»ΠΈ ΡΡΡΡΡΠ½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π² HTML ΠΈ Π·Π°ΠΊΠ°Π΄ΡΠΎΠ²ΠΎΠ΅ Π»ΠΈ ΠΎΠ½ΠΎ. ΠΡΠ»ΠΈ Π±ΡΠ°ΡΠ·Π΅Ρ ΠΏΠΎΠ»ΡΡΠΈΡ Π°ΡΡΠΈΠ±ΡΡ Β«srcΒ», ΡΡΠΎ Π²ΡΠ·ΠΎΠ²Π΅Ρ Π·Π°Π³ΡΡΠ·ΠΊΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ.
Π§ΡΠΎΠ±Ρ Π·Π°Π³ΡΡΠ·ΠΈΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΡΠ΅ΡΠ΅Π· ΠΎΡΠ»ΠΎΠΆΠ΅Π½Π½ΡΡ Π·Π°Π³ΡΡΠ·ΠΊΡ, Π½ΡΠΆΠ½ΠΎ ΠΏΠΎΠΌΠ΅ΡΡΠΈΡΡ URL-Π°Π΄ΡΠ΅Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π² Π°ΡΡΠΈΠ±ΡΡ Β«srcΒ». ΠΠΎΠΏΡΡΡΠΈΠΌ, ΡΠΊΠ°Π·ΡΠ²Π°Π΅ΠΌ URL-Π°Π΄ΡΠ΅Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π² Π°ΡΡΠΈΠ±ΡΡΠ΅ Β«data-srcΒ» ΡΠ΅Π³Π° Β«imageΒ». Π’Π΅ΠΏΠ΅ΡΡ, ΠΊΠΎΠ³Π΄Π° Β«srcΒ» ΠΏΡΡΡ, Π±ΡΠ°ΡΠ·Π΅Ρ Π½Π΅ Π½Π°ΡΠΈΠ½Π°Π΅Ρ Π·Π°Π³ΡΡΠ·ΠΊΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ.
ΠΡΠΎΡΠΎΠΉ ΡΠ°Π³ β Π½ΡΠΆΠ½ΠΎ Π΄Π°ΡΡ ΡΡΡΠ°Π½ΠΎΠ²ΠΊΡ Π±ΡΠ°ΡΠ·Π΅ΡΡ, ΠΊΠΎΠ³Π΄Π° Π·Π°Π³ΡΡΠΆΠ°ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅. ΠΠ»Ρ ΡΡΠΎΠ³ΠΎ ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅ΠΌ, ΡΡΠΎ ΠΊΠ°ΠΊ ΡΠΎΠ»ΡΠΊΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ (ΡΠΎ Π΅ΡΡΡ Π΅Π³ΠΎ ΠΏΠ»Π΅ΠΉΡΡ
ΠΎΠ»Π΄Π΅Ρ) ΠΏΠΎΠΏΠ°Π΄Π°Π΅Ρ Π² ΠΎΠΊΠ½ΠΎ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°, Π½Π°ΡΠΈΠ½Π°Π΅ΡΡΡ Π·Π°Π³ΡΡΠ·ΠΊΠ°.
Π§ΡΠΎΠ±Ρ ΠΏΡΠΎΠ²Π΅ΡΠΈΡΡ, ΠΏΠΎΠΏΠ°Π»ΠΎ Π»ΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π² ΠΎΠΊΠ½ΠΎ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°, ΡΡΡΠ΅ΡΡΠ²ΡΠ΅Ρ Π΄Π²Π° ΡΠΏΠΎΡΠΎΠ±Π°. Π Π°ΡΡΠΌΠΎΡΡΠΈΠΌ ΠΎΠ±Π° Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ°Π±ΠΎΡΠΈΡ
ΠΏΡΠΈΠΌΠ΅ΡΠΎΠ² ΠΊΠΎΠ΄Π°.
ΠΠ°Π³ΡΡΠ·ΠΊΠ° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠΎΠ±ΡΡΠΈΠΉ JavaScript
Π ΡΡΠΎΠΌ ΠΌΠ΅ΡΠΎΠ΄Π΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌ ΠΎΡΡΠ»Π΅ΠΆΠΈΠ²Π°Π½ΠΈΠ΅ ΡΠΎΠ±ΡΡΠΈΠΉ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ (scroll), ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ ΡΠ°Π·ΠΌΠ΅ΡΠ° (resize), ΡΠΌΠ΅Π½Ρ ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΠΈ (orientationChange) Π² Π±ΡΠ°ΡΠ·Π΅ΡΠ΅.
ΠΠΎΠ³Π΄Π° ΠΏΡΠΎΠΈΡΡ ΠΎΠ΄ΠΈΡ ΠΎΠ΄Π½ΠΎ ΠΈΠ· ΡΡΠΈΡ ΡΠΎΠ±ΡΡΠΈΠΉ, Π½Π°Ρ ΠΎΠ΄ΠΈΠΌ Π²ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅, ΠΊΠΎΡΠΎΡΡΠ΅ Π΅ΡΡ Π½Π΅ Π·Π°Π³ΡΡΠΆΠ΅Π½Ρ. ΠΡΠΎΠ²Π΅ΡΡΠ΅ΠΌ, ΠΊΠ°ΠΊΠΈΠ΅ ΠΈΠ· Π½ΠΈΡ ΡΠ΅ΠΏΠ΅ΡΡ Π½Π°Ρ ΠΎΠ΄ΡΡΡΡ Π² ΠΎΠΊΠ½Π΅ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°. ΠΡΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΠΈΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ²ΠΎΠΉΡΡΠ² Β«offset topΒ», Β«scroll topΒ» ΠΈ Β«window heightΒ».
ΠΡΠ»ΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π²ΠΎΡΠ»ΠΎ Π² ΠΎΠΊΠ½ΠΎ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°, Π±Π΅ΡΡΠΌ URL ΠΈΠ· Π°ΡΡΠΈΠ±ΡΡΠ° Β«data-srcΒ» ΠΈ ΠΏΠΎΠΌΠ΅ΡΠ°Π΅ΠΌ Π΅Π³ΠΎ Π² Π°ΡΡΠΈΠ±ΡΡ Β«srcΒ». ΠΡΠΎ Π·Π°ΠΏΡΡΠΊΠ°Π΅Ρ Π·Π°Π³ΡΡΠ·ΠΊΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ. Π’Π°ΠΊΠΆΠ΅ ΡΠ΄Π°Π»ΡΠ΅ΠΌ ΠΊΠ»Π°ΡΡ Β«lazyΒ», ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΡΡΠΈΠΉ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, ΠΊΠΎΡΠΎΡΡΠ΅ Π±ΡΠ΄ΡΡ Π·Π°Π³ΡΡΠΆΠ°ΡΡΡΡ ΠΏΠΎΠ·ΠΆΠ΅. ΠΠΎΡΠ»Π΅ Π·Π°Π³ΡΡΠ·ΠΊΠΈ Π²ΡΠ΅Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ ΡΠ΄Π°Π»ΡΠ΅ΠΌ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΡ Π΄Π»Ρ ΠΎΡΡΠ»Π΅ΠΆΠΈΠ²Π°Π½ΠΈΡ ΡΠΎΠ±ΡΡΠΈΠΉ.
ΠΠΎΠ³Π΄Π° ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°Π΅ΠΌ, ΡΠΎΠ±ΡΡΠΈΠ΅ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ Π±ΡΡΡΡΠΎ ΡΡΠ°Π±Π°ΡΡΠ²Π°Π΅Ρ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠ°Π·. ΠΠ»Ρ ΠΏΠΎΠ²ΡΡΠ΅Π½ΠΈΡ ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΠΈ Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅ΠΌ Π½Π΅Π±ΠΎΠ»ΡΡΠΎΠΉ ΡΠ°ΠΉΠΌ-Π°ΡΡ, ΡΠ΅Π³ΡΠ»ΠΈΡΡΡΡΠΈΠΉ ΠΎΡΠ»ΠΎΠΆΠ΅Π½Π½ΠΎΠ΅ Π²ΡΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ ΡΡΠ½ΠΊΡΠΈΠΈ Π·Π°Π³ΡΡΠ·ΠΊΠΈ.
ΠΠΈΠΆΠ΅ ΡΠ°Π±ΠΎΡΠΈΠΉ ΠΏΡΠΈΠΌΠ΅Ρ ΡΠ°ΠΊΠΎΠ³ΠΎ ΠΏΠΎΠ΄Ρ
ΠΎΠ΄Π°.
See the Pen Lazy loading images using event handlers — example code by ImageKit.io (@imagekit_io) on CodePen.
ΠΠ΅ΡΠ²ΡΠ΅ ΡΡΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π² ΠΏΡΠΈΠΌΠ΅ΡΠ΅ Π·Π°Π³ΡΡΠΆΠ°ΡΡΡΡ Π·Π°ΡΠ°Π½Π΅Π΅. URL-Π°Π΄ΡΠ΅Ρ ΠΏΡΠΈΡΡΡΡΡΠ²ΡΠ΅Ρ Π½Π΅ΠΏΠΎΡΡΠ΅Π΄ΡΡΠ²Π΅Π½Π½ΠΎ Π² Π°ΡΡΠΈΠ±ΡΡΠ΅ Β«srcΒ» Π²ΠΌΠ΅ΡΡΠΎ Π°ΡΡΠΈΠ±ΡΡΠ° Β«data-srcΒ». ΠΡΠΎ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ Π΄Π»Ρ Ρ ΠΎΡΠΎΡΠ΅Π³ΠΎ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΠΎΠΏΡΡΠ°. ΠΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΡΡΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π½Π°Ρ ΠΎΠ΄ΡΡΡΡ Π² Π²Π΅ΡΡ Π½Π΅ΠΉ ΡΠ°ΡΡΠΈ ΡΡΡΠ°Π½ΠΈΡΡ, ΠΈΡ ΡΠ»Π΅Π΄ΡΠ΅Ρ ΡΠ΄Π΅Π»Π°ΡΡ Π²ΠΈΠ΄ΠΈΠΌΡΠΌΠΈ ΠΊΠ°ΠΊ ΠΌΠΎΠΆΠ½ΠΎ ΡΠΊΠΎΡΠ΅Π΅. ΠΡ Π½Π΅ Π΄ΠΎΠ»ΠΆΠ½Ρ ΠΆΠ΄Π°ΡΡ ΡΠΎΠ±ΡΡΠΈΡ ΠΈΠ»ΠΈ Π²ΡΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ JavaScript, ΡΡΠΎΠ±Ρ Π·Π°Π³ΡΡΠ·ΠΈΡΡ ΠΈΡ .
ΠΠ°Π³ΡΡΠ·ΠΊΠ° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ Ρ ΠΏΠΎΠΌΠΎΡΡΡ Intersection Observer API
Intersection Observer API β ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π½ΠΎΠ²ΡΠΉ API Π² Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ
. ΠΠ½ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ, ΠΊΠΎΠ³Π΄Π° ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π²Ρ
ΠΎΠ΄ΠΈΡ Π² ΠΎΠΊΠ½ΠΎ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°, ΠΈ Π½Π°ΡΠΈΠ½Π°Π΅Ρ Π΄Π΅ΠΉΡΡΠ²ΠΎΠ²Π°ΡΡ. Π ΠΏΡΠ΅Π΄ΡΠ΄ΡΡΠ΅ΠΌ ΠΌΠ΅ΡΠΎΠ΄Π΅ ΠΏΡΠΈΡ
ΠΎΠ΄ΠΈΠ»ΠΎΡΡ ΡΠ²ΡΠ·ΡΠ²Π°ΡΡ ΡΠΎΠ±ΡΡΠΈΡ, ΡΡΠΈΡΡΠ²Π°ΡΡ ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΡ ΠΈ ΠΏΠΎΠ΄ΡΡΠΈΡΡΠ²Π°ΡΡ Π²ΡΠ΅ΠΌΡ ΠΏΠΎΡΠ²Π»Π΅Π½ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π² ΠΎΠΊΠ½Π΅ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°.
Intersection Observer API Π΄Π΅Π»Π°Π΅Ρ ΠΏΡΠΎΡΠ΅ΡΡ ΠΏΡΠΎΡΠ΅, ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ ΠΈΠ·Π±Π΅ΠΆΠ°ΡΡ Π²ΡΡΠΈΡΠ»Π΅Π½ΠΈΠΉ ΠΈ ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠΈΠ²Π°Π΅Ρ Ρ ΠΎΡΠΎΡΡΡ ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΡ.
ΠΠΈΠΆΠ΅ β ΠΏΡΠΈΠΌΠ΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ Intersection Observer API Π΄Π»Ρ ΠΎΡΠ»ΠΎΠΆΠ΅Π½Π½ΠΎΠΉ Π·Π°Π³ΡΡΠ·ΠΊΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ.
ΠΠ°ΠΊ ΡΠΎΠ»ΡΠΊΠΎ API ΠΎΠ±Π½Π°ΡΡΠΆΠΈΠ²Π°Π΅Ρ, ΡΡΠΎ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π²ΠΎΡΡΠ» Π² ΠΎΠΊΠ½ΠΎ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ Β«isIntersectingΒ», Π²ΡΠ±ΠΈΡΠ°Π΅ΠΌ URL ΠΈΠ· Π°ΡΡΠΈΠ±ΡΡΠ° Β«data-srcΒ» ΠΈ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°Π΅ΠΌ Π΅Π³ΠΎ Π² Π°ΡΡΠΈΠ±ΡΡ Β«srcΒ», ΡΡΠΎΠ±Ρ Π·Π°ΠΏΡΡΡΠΈΡΡ ΠΎΡΠ»ΠΎΠΆΠ΅Π½Π½ΡΡ Π·Π°Π³ΡΡΠ·ΠΊΡ. ΠΠ°ΠΊ ΡΠΎΠ»ΡΠΊΠΎ ΡΡΠΎ Π±ΡΠ΄Π΅Ρ ΡΠ΄Π΅Π»Π°Π½ΠΎ, ΡΠ΄Π°Π»ΡΠ΅ΠΌ ΠΊΠ»Π°ΡΡ Β«lazyΒ» ΠΈΠ· ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, Π° ΡΠ°ΠΊΠΆΠ΅ ΡΠ΄Π°Π»ΡΠ΅ΠΌ ΠΎΡΡΡΠ΄Π° ΠΎΠ±ΡΠ΅ΡΠ²Π΅Ρ.
See the Pen Lazy loading images using IntersectionObserver — example code by ImageKit.io (@imagekit_io) on CodePen.
ΠΡΠ»ΠΈ Π²Ρ ΡΡΠ°Π²Π½ΠΈΡΠ΅ Π²ΡΠ΅ΠΌΡ Π·Π°Π³ΡΡΠ·ΠΊΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π΄Π²ΡΡ
ΠΌΠ΅ΡΠΎΠ΄ΠΎΠ² β Ρ ΠΎΡΡΠ»Π΅ΠΆΠΈΠ²Π°Π½ΠΈΠ΅ΠΌ ΡΠΎΠ±ΡΡΠΈΠΉ ΠΈ Intersection Observer API, β ΡΠΎ ΠΎΠ±Π½Π°ΡΡΠΆΠΈΡΠ΅, ΡΡΠΎ Ρ ΠΏΠΎΠΌΠΎΡΡΡ Intersection Observer API Π·Π°Π³ΡΡΠ·ΠΊΠ° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π·Π°ΠΏΡΡΠΊΠ°Π΅ΡΡΡ Π³ΠΎΡΠ°Π·Π΄ΠΎ Π±ΡΡΡΡΠ΅Π΅, ΠΈ ΡΠ°ΠΉΡ ΡΠΆΠ΅ Π½Π΅ ΡΠΌΠΎΡΡΠΈΡΡΡ Β«Π²ΡΠ»ΡΠΌΒ» ΠΏΡΠΈ ΡΠΊΡΠΎΠ»Π»ΠΈΠ½Π³Π΅.
Π ΠΌΠ΅ΡΠΎΠ΄, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΠΈΠΉ ΠΎΡΡΠ»Π΅ΠΆΠΈΠ²Π°Π½ΠΈΠ΅ ΡΠΎΠ±ΡΡΠΈΠΉ, ΠΏΡΠΈΡΠ»ΠΎΡΡ Π²ΠΊΠ»ΡΡΠΈΡΡ ΡΠ°ΠΉΠΌ-Π°ΡΡ, ΡΡΠΎΠ±Ρ ΡΠ΄Π΅Π»Π°ΡΡ Π΅Π³ΠΎ ΡΠ°Π±ΠΎΡΠΎΡΠΏΠΎΡΠΎΠ±Π½ΡΠΌ, ΡΡΠΎ Π½Π΅Π³Π°ΡΠΈΠ²Π½ΠΎ Π²Π»ΠΈΡΠ΅Ρ Π½Π° ΡΠ°Π±ΠΎΡΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ, ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π·Π°Π³ΡΡΠΆΠ°ΡΡΡΡ Ρ Π½Π΅Π±ΠΎΠ»ΡΡΠΎΠΉ Π·Π°Π΄Π΅ΡΠΆΠΊΠΎΠΉ.
ΠΠ΄Π½Π°ΠΊΠΎ, ΠΊΠ°ΠΊ ΠΈ Π²ΡΡ Π½ΠΎΠ²ΠΎΠ΅, ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠ° Intersection Observer API Π΄ΠΎΡΡΡΠΏΠ½Π° Π½Π΅ Π²ΠΎ Π²ΡΠ΅Ρ Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ . Π’Π°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ, ΠΏΡΠΈΡ ΠΎΠ΄ΠΈΡΡΡ Π²ΠΎΠ·Π²ΡΠ°ΡΠ°ΡΡΡΡ ΠΊ ΠΌΠ΅ΡΠΎΠ΄Ρ ΠΎΡΡΠ»Π΅ΠΆΠΈΠ²Π°Π½ΠΈΡ ΡΠΎΠ±ΡΡΠΈΠΉ Π² Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ , Π³Π΄Π΅ Intersection Observer API Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅ΡΡΡ. Π£ΡΠ»ΠΈ ΡΡΠΎΡ ΠΌΠΎΠΌΠ΅Π½Ρ Π² ΠΏΡΠΈΠ²Π΅Π΄ΡΠ½Π½ΠΎΠΌ Π²ΡΡΠ΅ ΠΏΡΠΈΠΌΠ΅ΡΠ΅.
ΠΡΠ»ΠΎΠΆΠ΅Π½Π½Π°Ρ Π·Π°Π³ΡΡΠ·ΠΊΠ° ΡΠΎΠ½ΠΎΠ²ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ CSS
ΠΠΎΡΠ»Π΅ ΡΠ΅Π³ΠΎΠ² <img /> ΡΠΎΠ½ΠΎΠ²ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΡΠ²Π»ΡΡΡΡΡ Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ ΡΠ°ΡΠΏΡΠΎΡΡΡΠ°Π½ΡΠ½Π½ΡΠΌ ΡΠΏΠΎΡΠΎΠ±ΠΎΠΌ Π·Π°Π³ΡΡΠ·ΠΊΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ Π΄Π»Ρ ΡΡΡΠ°Π½ΠΈΡ. ΠΠ»Ρ ΡΠ΅Π³ΠΎΠ² <img /> Π² Π±ΡΠ°ΡΠ·Π΅ΡΠ΅ ΠΏΡΠΎΡΡΠΎΠΉ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ β Π΅ΡΠ»ΠΈ URL-Π°Π΄ΡΠ΅Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π΄ΠΎΡΡΡΠΏΠ΅Π½, ΡΠΎ ΠΌΠΎΠΆΠ½ΠΎ Π΅Π³ΠΎ Π·Π°Π³ΡΡΠ·ΠΈΡΡ.
Π‘ ΡΠΎΠ½ΠΎΠ²ΡΠΌΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡΠΌΠΈ CSS Π½Π΅ Π²ΡΡ ΡΠ°ΠΊ ΠΏΡΠΎΡΡΠΎ. Π§ΡΠΎΠ±Ρ Π·Π°Π³ΡΡΠ·ΠΈΡΡ ΡΠΎΠ½ΠΎΠ²ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ CSS, Π±ΡΠ°ΡΠ·Π΅Ρ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΡΠΎΠ·Π΄Π°ΡΡ Π΄Π΅ΡΠ΅Π²ΠΎ DOM (ΠΎΠ±ΡΠ΅ΠΊΡΠ½Π°Ρ ΠΌΠΎΠ΄Π΅Π»Ρ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°), Π° ΡΠ°ΠΊΠΆΠ΅ Π΄Π΅ΡΠ΅Π²ΠΎ CSSOM (ΠΎΠ±ΡΠ΅ΠΊΡΠ½Π°Ρ ΠΌΠΎΠ΄Π΅Π»Ρ CSS), ΡΡΠΎΠ±Ρ ΡΠ΅ΡΠΈΡΡ, ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΡΡΡ Π»ΠΈ ΡΡΠΈΠ»Ρ CSS ΠΊ ΡΠ·Π»Ρ DOM Π² ΡΠ΅ΠΊΡΡΠ΅ΠΌ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ΅.
ΠΡΠ»ΠΈ ΠΏΡΠ°Π²ΠΈΠ»ΠΎ CSS, ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΡΡΠ΅Π΅ ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅, Π½Π΅ ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΡΡΡ ΠΊ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π² Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ΅, ΡΠΎ Π±ΡΠ°ΡΠ·Π΅Ρ Π½Π΅ Π·Π°Π³ΡΡΠΆΠ°Π΅Ρ ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅. ΠΡΠ»ΠΈ ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΡΡΡ β Π·Π°Π³ΡΡΠΆΠ°Π΅Ρ.
ΠΠΎΠ½Π°ΡΠ°Π»Ρ ΡΡΠΎ ΠΌΠΎΠΆΠ΅Ρ ΠΏΠΎΠΊΠ°Π·Π°ΡΡΡΡ ΡΠ»ΠΎΠΆΠ½ΡΠΌ, Π½ΠΎ ΡΠ°ΠΊΠΎΠΉ ΠΆΠ΅ ΠΏΡΠΈΠ½ΡΠΈΠΏ Π»Π΅ΠΆΠΈΡ Π² ΠΎΡΠ½ΠΎΠ²Π΅ ΡΠ΅Ρ Π½ΠΈΠΊΠΈ ΠΎΡΠ»ΠΎΠΆΠ΅Π½Π½ΠΎΠΉ Π·Π°Π³ΡΡΠ·ΠΊΠΈ ΡΠΎΠ½ΠΎΠ²ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ. Π’Π°ΠΊ ΠΌΡ ΠΎΠ±ΠΌΠ°Π½ΡΠ²Π°Π΅ΠΌ Π±ΡΠ°ΡΠ·Π΅Ρ, Π½Π΅ ΠΏΡΠΈΠΌΠ΅Π½ΡΡ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ CSS Β«background-imageΒ» ΠΊ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ, ΠΏΠΎΠΊΠ° ΡΡΠΎΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π½Π΅ ΠΏΠΎΠΏΠ°Π΄ΡΡ Π² ΠΎΠΊΠ½ΠΎ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°. ΠΠΈΠΆΠ΅ ΡΠ°Π±ΠΎΡΠΈΠΉ ΠΏΡΠΈΠΌΠ΅Ρ ΠΎΡΠ»ΠΎΠΆΠ΅Π½Π½ΠΎΠΉ Π·Π°Π³ΡΡΠ·ΠΊΠΈ ΡΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ CSS.
See the Pen Lazy Loading background images in CSS by ImageKit.io (@imagekit_io) on CodePen.
ΠΠ΄Π΅ΡΡ ΡΠ»Π΅Π΄ΡΠ΅Ρ ΠΎΡΠΌΠ΅ΡΠΈΡΡ, ΡΡΠΎ ΠΊΠΎΠ΄ JavaScript Π΄Π»Ρ ΠΎΡΠ»ΠΎΠΆΠ΅Π½Π½ΠΎΠΉ Π·Π°Π³ΡΡΠ·ΠΊΠΈ ΠΎΡΡΠ°ΡΡΡΡ ΠΏΡΠ΅ΠΆΠ½ΠΈΠΌ. ΠΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌ Intersection Observer API, Π²ΠΎΠ·Π²ΡΠ°ΡΠ°ΡΡΡ Π·Π°ΡΠ΅ΠΌ ΠΊ ΠΎΡΡΠ»Π΅ΠΆΠΈΠ²Π°Π½ΠΈΡ ΡΠΎΠ±ΡΡΠΈΠΉ. Π₯ΠΈΡΡΠΎΡΡΡ Π·Π°ΠΊΠ»ΡΡΠ°Π΅ΡΡΡ Π² CSS.
ΠΠ»Π΅ΠΌΠ΅Π½Ρ Ρ ΠΈΠ΄Π΅Π½ΡΠΈΡΠΈΠΊΠ°ΡΠΎΡΠΎΠΌ Β«bg-imageΒ» ΠΈΠΌΠ΅Π΅Ρ Π·Π°Π΄Π°Π½Π½ΠΎΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ Β«background-imageΒ» Π² CSS.
ΠΠ΄Π½Π°ΠΊΠΎ ΠΊΠΎΠ³Π΄Π° ΠΊΠ»Π°ΡΡ Β«lazyΒ» Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅ΡΡΡ ΠΊ ΡΡΠΎΠΌΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ, Π² CSS ΠΌΡ ΠΏΠ΅ΡΠ΅ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅ΠΌ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ Β«background-imageΒ» ΠΈ ΠΌΠ΅Π½ΡΠ΅ΠΌ Π΅Π³ΠΎ Π½Π° Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Β«noneΒ».
Π’Π°ΠΊ ΠΊΠ°ΠΊ ΠΏΠΎ ΠΏΡΠ°Π²ΠΈΠ»Π°ΠΌ ΠΊΠΎΠΌΠ±ΠΈΠ½Π°ΡΠΈΡ Β«bg-imageΒ» Ρ Β«.lazyΒ» ΠΈΠΌΠ΅Π΅Ρ Π±ΠΎΠ»Π΅Π΅ Π²ΡΡΠΎΠΊΠΎΠ΅ ΠΏΡΠ΅Π΄ΠΏΠΎΡΡΠ΅Π½ΠΈΠ΅ Π² CSS, ΡΠ΅ΠΌ ΠΏΡΠΎΡΡΠΎ Β«bg-imageΒ», Π±ΡΠ°ΡΠ·Π΅Ρ ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅Ρ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ Β«background-image: noneΒ» ΠΊ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΈΠ·Π½Π°ΡΠ°Π»ΡΠ½ΠΎ.
ΠΠΎΠ³Π΄Π° ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°Π΅ΠΌ ΡΡΡΠ°Π½ΠΈΡΡ Π²Π½ΠΈΠ·, the Intersection Observer (ΠΈΠ»ΠΈ ΠΎΡΡΠ»Π΅ΠΆΠΈΠ²Π°Π½ΠΈΠ΅ ΡΠΎΠ±ΡΡΠΈΠΉ) ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ, ΡΡΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡ Π² ΠΎΠΊΠ½Π΅ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°, ΠΈ ΡΠ΄Π°Π»ΡΠ΅Ρ ΠΊΠ»Π°ΡΡ Β«lazyΒ». ΠΡΠΎ ΠΈΠ·ΠΌΠ΅Π½ΡΠ΅Ρ ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΠΌΡΠΉ ΡΠ΅ΠΉΡΠ°Ρ CSS ΠΈ ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅Ρ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ Β«background-imageΒ» ΠΊ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ, Π½Π°ΡΠ°Π²ΡΠ΅ΠΌΡ Π·Π°Π³ΡΡΠ·ΠΊΡ ΡΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ.
Π£Π»ΡΡΡΠΈΡΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΈΠΉ ΠΎΠΏΡΡ
ΠΠ»Ρ ΠΊΠΎΠΌΠΏΠ°Π½ΠΈΠΉ Π² ΡΡΠ΅ΡΠ΅ ΡΠ»Π΅ΠΊΡΡΠΎΠ½Π½ΠΎΠΉ ΠΊΠΎΠΌΠΌΠ΅ΡΡΠΈΠΈ, ΠΊΠΎΡΠΎΡΡΠ΅ Π·Π°Π³ΡΡΠΆΠ°ΡΡ ΡΠΎΡΠ½ΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ ΠΏΡΠΎΠ΄ΡΠΊΡΠΎΠ² Π½Π° ΡΡΡΠ°Π½ΠΈΡΡ, ΠΎΡΠ»ΠΎΠΆΠ΅Π½Π½Π°Ρ Π·Π°Π³ΡΡΠ·ΠΊΠ° ΠΌΠΎΠΆΠ΅Ρ Π·Π½Π°ΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠ»ΡΡΡΠΈΡΡ ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΡ Π½Π°ΡΠ°Π»ΡΠ½ΠΎΠΉ Π·Π°Π³ΡΡΠ·ΠΊΠΈ ΡΡΡΠ°Π½ΠΈΡΡ.
Π’Π΅ΠΌ Π½Π΅ ΠΌΠ΅Π½Π΅Π΅ ΠΌΠ½ΠΎΠ³ΠΈΠ΅ ΠΊΠΎΠΌΠΏΠ°Π½ΠΈΠΈ Π½Π΅ Π²ΡΠ±ΠΈΡΠ°ΡΡ ΠΎΡΠ»ΠΎΠΆΠ΅Π½Π½ΡΡ Π·Π°Π³ΡΡΠ·ΠΊΡ, ΠΏΠΎΡΠΎΠΌΡ ΡΡΠΎ ΡΡΠΈΡΠ°ΡΡ, ΡΡΠΎ ΡΡΠΎ ΠΏΡΠΎΡΠΈΠ²ΠΎΡΠ΅ΡΠΈΡ ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠ΅Π½ΠΈΡ Ρ
ΠΎΡΠΎΡΠ΅Π³ΠΎ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΠΎΠΏΡΡΠ° β ΠΏΠ»Π΅ΠΉΡΡ
ΠΎΠ»Π΄Π΅ΡΡ Π²ΡΠ³Π»ΡΠ΄ΡΡ Π½Π΅ΠΏΡΠΈΠ²Π»Π΅ΠΊΠ°ΡΠ΅Π»ΡΠ½ΠΎ, Π²ΡΠ΅ΠΌΡ Π·Π°Π³ΡΡΠ·ΠΊΠΈ ΠΊΠ°ΠΆΠ΅ΡΡΡ Π΄ΠΎΠ²ΠΎΠ»ΡΠ½ΠΎ ΠΏΡΠΎΠ΄ΠΎΠ»ΠΆΠΈΡΠ΅Π»ΡΠ½ΡΠΌ ΠΈ ΡΠ°ΠΊ Π΄Π°Π»Π΅Π΅.
Π ΡΡΠΎΠΌ ΡΠ°Π·Π΄Π΅Π»Π΅ ΠΏΠΎΡΡΠ°ΡΠ°Π΅ΠΌΡΡ ΡΠ΅ΡΠΈΡΡ Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ ΠΎΡΠ»ΠΎΠΆΠ΅Π½Π½ΠΎΠΉ Π·Π°Π³ΡΡΠ·ΠΊΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ, ΡΠ²ΡΠ·Π°Π½Π½ΡΠ΅ Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΈΠΌ ΠΎΠΏΡΡΠΎΠΌ.
1. ΠΡΠ°Π²ΠΈΠ»ΡΠ½ΡΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½ ΠΏΠ»Π΅ΠΉΡΡ ΠΎΠ»Π΄Π΅ΡΠΎΠ²
ΠΠ»Π΅ΠΉΡΡ ΠΎΠ»Π΄Π΅Ρ β ΡΠΎ, ΡΡΠΎ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΡΡΡ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅ Π΄ΠΎ Π·Π°Π³ΡΡΠ·ΠΊΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ. ΠΠ±ΡΡΠ½ΠΎ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡ ΠΎΠ΄Π½ΠΎΡΠ²Π΅ΡΠ½ΡΠΉ ΠΏΠ»Π΅ΠΉΡΡ ΠΎΠ»Π΄Π΅Ρ Π΄Π»Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ ΠΈΠ»ΠΈ ΠΎΠ΄Π½ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ ΠΏΠ»Π΅ΠΉΡΡ ΠΎΠ»Π΄Π΅ΡΠ° Π΄Π»Ρ Π²ΡΠ΅Ρ ΠΊΠ°ΡΡΠΈΠ½ΠΎΠΊ.
ΠΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π»ΠΈ ΠΏΠΎΠ΄ΠΎΠ±Π½ΡΠΉ ΠΏΠ»Π΅ΠΉΡΡ ΠΎΠ»Π΄Π΅Ρ Π² Π½Π°ΡΠ΅ΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ β Π²Π΅Π·Π΄Π΅ ΠΎΠ½ Π²ΡΠΊΡΠ°ΡΠ΅Π½ Π² ΡΠΏΠ»ΠΎΡΠ½ΠΎΠΉ ΡΠ²Π΅ΡΠ»ΠΎ-ΡΠ΅ΡΡΠΉ ΡΠ²Π΅Ρ. Π’Π΅ΠΌ Π½Π΅ ΠΌΠ΅Π½Π΅Π΅ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°ΡΡ Π»ΡΡΡΠ΅. ΠΠΈΠΆΠ΅ β ΠΏΡΠΈΠΌΠ΅ΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ Π±ΠΎΠ»Π΅Π΅ ΡΠ΄Π°ΡΠ½ΡΡ Π²Π°ΡΠΈΠ°Π½ΡΠΎΠ² ΠΏΠ»Π΅ΠΉΡΡ ΠΎΠ»Π΄Π΅ΡΠΎΠ².
ΠΠ»Π΅ΠΉΡΡ ΠΎΠ»Π΄Π΅Ρ Π΄ΠΎΠΌΠΈΠ½ΠΈΡΡΡΡΠ΅Π³ΠΎ ΡΠ²Π΅ΡΠ°
ΠΡΠΎΡ ΠΌΠ΅ΡΠΎΠ΄ Π΄Π°Π²Π½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π΄Π»Ρ ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠΎΠ² ΠΏΠΎΠΈΡΠΊΠ° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ Π² Google ΠΈ Pinterest.
ΠΡΠΈΠΌΠ΅Ρ Ρ Manu ninja
ΠΠΎΠΆΠ΅Ρ ΠΏΠΎΠΊΠ°Π·Π°ΡΡΡΡ, ΡΡΠΎ ΡΡΠΎ ΡΠ»ΠΎΠΆΠ½ΠΎ ΡΠ΅Π°Π»ΠΈΠ·ΠΎΠ²Π°ΡΡ. ΠΠΎ Π΅ΡΡΡ ΠΏΡΠΎΡΡΠΎΠΉ ΡΠΏΠΎΡΠΎΠ± β ΡΠ½Π°ΡΠ°Π»Π° ΡΠΌΠ΅Π½ΡΡΠΈΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π΄ΠΎ ΠΏΠΈΠΊΡΠ΅Π»Ρ 1Γ1, Π° Π·Π°ΡΠ΅ΠΌ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°ΡΡ Π΅Π³ΠΎ Π΄ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΠΏΠ»Π΅ΠΉΡΡ
ΠΎΠ»Π΄Π΅ΡΠ° β Π³ΡΡΠ±ΠΎΠ΅ ΠΏΡΠΈΠ±Π»ΠΈΠΆΠ΅Π½ΠΈΠ΅, Π½ΠΎ ΠΎΠ½ΠΎ ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ Π»Π΅Π³ΠΊΠΎ ΠΏΠΎΠ»ΡΡΠΈΡΡ ΠΎΠ΄ΠΈΠ½ Π΄ΠΎΠΌΠΈΠ½ΠΈΡΡΡΡΠΈΠΉ ΡΠ²Π΅Ρ.
ΠΡΠΏΠΎΠ»ΡΠ·ΡΡ ImageKit, ΠΏΠ»Π΅ΠΉΡΡ
ΠΎΠ»Π΄Π΅Ρ Π΄ΠΎΠΌΠΈΠ½ΠΈΡΡΡΡΠ΅Π³ΠΎ ΡΠ²Π΅ΡΠ° ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΠ»ΡΡΠΈΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ΅ΠΏΠ½ΠΎΠ³ΠΎ ΠΏΡΠ΅ΠΎΠ±ΡΠ°Π·ΠΎΠ²Π°Π½ΠΈΡ, ΠΊΠ°ΠΊ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ Π½ΠΈΠΆΠ΅.
Π Π°Π·ΠΌΠ΅Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ-ΠΏΠ»Π΅ΠΉΡΡ ΠΎΠ»Π΄Π΅ΡΠ° ΡΠΎΡΡΠ°Π²Π»ΡΠ΅Ρ Π²ΡΠ΅Π³ΠΎ 661 Π±Π°ΠΉΡ, ΠΏΠΎ ΡΡΠ°Π²Π½Π΅Π½ΠΈΡ Ρ ΠΈΡΡ ΠΎΠ΄Π½ΡΠΌ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΠΈΠΌΠ΅Π΅Ρ ΡΠ°Π·ΠΌΠ΅Ρ 12 700 Π±Π°ΠΉΡ β Π² 19 ΡΠ°Π· ΠΌΠ΅Π½ΡΡΠ΅. Π ΡΡΠΎ ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠΈΠ²Π°Π΅Ρ Π±ΠΎΠ»Π΅Π΅ ΠΏΡΠΈΡΡΠ½ΡΠΉ ΠΎΠΏΡΡ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄Π° ΠΎΡ ΠΏΠ»Π΅ΠΉΡΡ ΠΎΠ»Π΄Π΅ΡΠ° ΠΊ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ.
Π Π°Π±ΠΎΡΠΈΠΉ ΠΏΡΠΈΠΌΠ΅Ρ ΠΈ ΠΊΠΎΠ΄ Π΄Π»Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΠΏΠ»Π΅ΠΉΡΡ ΠΎΠ»Π΄Π΅ΡΠ° Π΄ΠΎΠΌΠΈΠ½ΠΈΡΡΡΡΠ΅Π³ΠΎ ΡΠ²Π΅ΡΠ° β ΠΏΠΎ ΡΡΡΠ»ΠΊΠ΅.
ΠΠ»Π΅ΠΉΡΡ ΠΎΠ»Π΄Π΅Ρ Π½ΠΈΠ·ΠΊΠΎΠ³ΠΎ ΠΊΠ°ΡΠ΅ΡΡΠ²Π° (LQIP)
ΠΡΡΡ ΡΠΏΠΎΡΠΎΠ± ΡΠ°ΡΡΠΈΡΠΈΡΡ ΠΏΡΠΈΠ²Π΅Π΄ΡΠ½Π½ΡΡ Π²ΡΡΠ΅ ΠΈΠ΄Π΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΠΏΠ»Π΅ΠΉΡΡ ΠΎΠ»Π΄Π΅ΡΠ° Π΄ΠΎΠΌΠΈΠ½ΠΈΡΡΡΡΠ΅Π³ΠΎ ΡΠ²Π΅ΡΠ°. ΠΠΌΠ΅ΡΡΠΎ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΡΠ²Π΅ΡΠ° ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π½Π΅ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅Π½Π½ΡΡ ΡΠ°Π·ΠΌΡΡΡΡ Π²Π΅ΡΡΠΈΡ ΠΈΡΡ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ.
ΠΡΠΎ Π½Π΅ ΡΠΎΠ»ΡΠΊΠΎ Π²ΡΠ³Π»ΡΠ΄ΠΈΡ Π»ΡΡΡΠ΅, Π½ΠΎ ΡΠΎΠΎΠ±ΡΠ°Π΅Ρ ΠΎ Π·Π°Π³ΡΡΠ·ΠΊΠ΅ ΠΈ Π΄Π°ΡΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½ΠΈΠ΅ ΠΎ ΡΠΎΠΌ, ΡΠ΅Π³ΠΎ ΠΆΠ΄Π°ΡΡ Π² ΡΠ΅Π°Π»ΡΠ½ΠΎΠΌ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΈ. ΠΡΠΎΡ ΠΌΠ΅ΡΠΎΠ΄ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡ Facebook ΠΈ Medium Π΄Π»Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ Π½Π° ΡΠ°ΠΉΡΠ°Ρ ΠΈ Π² ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡΡ .
Π Π°Π·ΠΌΠ΅Ρ LQIP ΡΠΎΡΡΠ°Π²Π»ΡΠ΅Ρ 1300 Π±Π°ΠΉΡ, ΡΡΠΎ ΠΏΠΎΡΡΠΈ Π² Π΄Π΅ΡΡΡΡ ΡΠ°Π· ΠΌΠ΅Π½ΡΡΠ΅ ΠΈΡΡ
ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΈ Π·Π½Π°ΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π»ΡΡΡΠ΅ Ρ ΡΠΎΡΠΊΠΈ Π·ΡΠ΅Π½ΠΈΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΠΎΠΏΡΡΠ° ΠΏΠΎ ΡΡΠ°Π²Π½Π΅Π½ΠΈΡ Ρ Π»ΡΠ±ΡΠΌ Π΄ΡΡΠ³ΠΈΠΌ Π²ΠΈΠ΄ΠΎΠΌ ΠΏΠ»Π΅ΠΉΡΡ
ΠΎΠ»Π΄Π΅ΡΠΎΠ².
Π Π°Π±ΠΎΡΠΈΠΉ ΠΏΡΠΈΠΌΠ΅Ρ ΠΈ ΠΊΠΎΠ΄ Π΄Π»Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΡΠ΅Ρ Π½ΠΈΠΊΠΈ LQIP β ΠΏΠΎ ΡΡΡΠ»ΠΊΠ΅.
2. ΠΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ Π±ΡΡΠ΅ΡΠ½ΠΎΠ³ΠΎ Π²ΡΠ΅ΠΌΠ΅Π½ΠΈ
Π§Π°ΡΡΠΎ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΠΈ Π±ΡΡΡΡΠΎ ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°ΡΡ ΡΡΡΠ°Π½ΠΈΡΡ, ΠΈ Π΄Π»Ρ Π·Π°Π³ΡΡΠ·ΠΊΠΈ ΠΈ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ Π½Π° ΡΠΊΡΠ°Π½Π΅ ΡΡΠ΅Π±ΡΠ΅ΡΡΡ Π½Π΅ΠΊΠΎΡΠΎΡΠΎΠ΅ Π²ΡΠ΅ΠΌΡ. Π‘ΠΎΠ±ΡΡΠΈΠ΅ Β«load imageΒ» ΠΌΠΎΠΆΠ΅Ρ ΡΡΠ°Π±ΠΎΡΠ°ΡΡ Ρ Π·Π°Π΄Π΅ΡΠΆΠΊΠΎΠΉ, ΠΊΠ°ΠΊ ΠΈ ΠΏΠ»Π΅ΠΉΡΡ ΠΎΠ»Π΄Π΅ΡΡ. ΠΡΠΎ ΠΏΠ»ΠΎΡ ΠΎ Π²Π»ΠΈΡΠ΅Ρ Π½Π° ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΈΠΉ ΠΎΠΏΡΡ.
Π Π΅ΡΠ΅Π½ΠΈΠ΅
ΠΠΌΠ΅ΡΡΠΎ ΡΠΎΠ³ΠΎ ΡΡΠΎΠ±Ρ Π·Π°Π³ΡΡΠΆΠ°ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΡΠΎΠ»ΡΠΊΠΎ ΡΠΎΠ³Π΄Π°, ΠΊΠΎΠ³Π΄Π° ΠΎΠ½ΠΈ ΡΠΎΡΠ½ΠΎ Π²Ρ ΠΎΠ΄ΡΡ Π² ΠΎΠΊΠ½ΠΎ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°, Π·Π°Π³ΡΡΠ·ΠΈΡΠ΅ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ, ΠΊΠΎΠ³Π΄Π° ΠΎΠ½ΠΈ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, Π² 500 px ΠΎΡ ΠΊΡΠ°Ρ.
Π‘ ΠΏΠΎΠΌΠΎΡΡΡ Intersection Observer API ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡ Β«`root`Β» Π²ΠΌΠ΅ΡΡΠ΅ Ρ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΠΎΠΌ Β«rootMarginΒ» (ΡΠ°Π±ΠΎΡΠ°Π΅Ρ ΠΏΠΎ ΡΡΠ°Π½Π΄Π°ΡΡΠ½ΠΎΠΌΡ ΠΏΡΠΈΠ½ΡΠΈΠΏΡ ΠΏΠΎΠ»Ρ CSS), ΡΡΠΎΠ±Ρ ΡΠ²Π΅Π»ΠΈΡΠΈΡΡ Π³ΡΠ°Π½ΠΈΡΡ ΡΠ°ΠΌΠΊΠΈ.
ΠΠΌΠ΅ΡΡΠΎ ΡΠΎΠ³ΠΎ ΡΡΠΎΠ±Ρ ΠΏΡΠΎΠ²Π΅ΡΡΡΡ, ΡΠ°Π²Π½Π° Π»ΠΈ ΡΠ°Π·Π½ΠΈΡΠ° ΠΌΠ΅ΠΆΠ΄Ρ ΠΊΡΠ°Π΅ΠΌ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΈ ΠΊΡΠ°Π΅ΠΌ ΠΎΠΊΠ½Π° Π½ΡΠ»Ρ, Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΌΠ΅ΡΠΎΠ΄Π° ΠΎΡΡΠ»Π΅ΠΆΠΈΠ²Π°Π½ΠΈΡ ΡΠΎΠ±ΡΡΠΈΠΉ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΏΠΎΠ»ΠΎΠΆΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅ ΡΠΈΡΠ»ΠΎ Π΄Π»Ρ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΡ Π½Π΅ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎ ΠΏΠΎΡΠΎΠ³ΠΎΠ²ΠΎΠ³ΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΡ.
Π ΡΡΠΎΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ ΠΏΠΎΡΠΎΠ³ΠΎΠ²ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ 500 px Π΄Π»Ρ Π·Π°Π³ΡΡΠ·ΠΊΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ.
ΠΠ°ΠΊ ΠΏΠΎΠ½ΡΡΠ½ΠΎ ΠΈΠ· Π²ΠΈΠ΄Π΅ΠΎ Π½ΠΈΠΆΠ΅ (Π²Π½ΠΈΠΌΠ°ΡΠ΅Π»ΡΠ½ΠΎ ΡΠ»Π΅Π΄ΠΈΡΠ΅ Π·Π° ΡΠ΅ΡΠ΅Π²ΡΠΌΠΈ Π·Π°ΠΏΡΠΎΡΠ°ΠΌΠΈ, ΠΏΠΎΡΠ²Π»ΡΡΡΠΈΠΌΠΈΡΡ Π²Π½ΠΈΠ·Ρ), ΠΏΡΠΈ ΠΏΡΠΎΠΊΡΡΡΠΊΠ΅, ΠΊΠΎΠ³Π΄Π° ΡΡΠ΅ΡΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡ Π² ΠΏΠΎΠ»Π΅ Π·ΡΠ΅Π½ΠΈΡ, Π·Π°Π³ΡΡΠΆΠ°Π΅ΡΡΡ ΠΏΡΡΠΎΠ΅. ΠΠΎΠ³Π΄Π° ΡΠ΅ΡΠ²ΡΡΡΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΏΠΎΡΠ²Π»ΡΠ΅ΡΡΡ Π² ΠΎΠΊΠ½Π΅ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°, Π·Π°Π³ΡΡΠΆΠ°Π΅ΡΡΡ ΡΠ΅ΡΡΠΎΠ΅.
Π’Π°ΠΊ ΠΌΡ Π΄Π°ΡΠΌ Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ Π²ΡΠ΅ΠΌΠ΅Π½ΠΈ Π΄Π»Ρ ΠΏΠΎΠ»Π½ΠΎΠΉ Π·Π°Π³ΡΡΠ·ΠΊΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ, ΠΈ Π² Π±ΠΎΠ»ΡΡΠΈΠ½ΡΡΠ²Π΅ ΡΠ»ΡΡΠ°Π΅Π² ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ Π²ΠΎΠΎΠ±ΡΠ΅ Π½Π΅ ΡΠ²ΠΈΠ΄ΠΈΡ ΠΏΠ»Π΅ΠΉΡΡ ΠΎΠ»Π΄Π΅Ρ.
ΠΡΠ»ΠΈ Π½Π΅ Π·Π°ΠΌΠ΅ΡΠΈΠ»ΠΈ ΡΠ°Π½Π΅Π΅, Π²ΠΎ Π²ΡΠ΅Ρ ΠΏΡΠΈΠΌΠ΅ΡΠ°Ρ ΡΡΠ΅ΡΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ (image3.jpg) Π²ΡΠ΅Π³Π΄Π° Π·Π°Π³ΡΡΠΆΠ°Π΅ΡΡΡ ΡΡΠ°Π·Ρ, Π΄Π°ΠΆΠ΅ Π΅ΡΠ»ΠΈ ΠΎΠ½ΠΎ Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡ Π²Π½Π΅ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°. ΠΡΠΎ Π±ΡΠ»ΠΎ ΡΠ΄Π΅Π»Π°Π½ΠΎ Π² ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΠΈ Ρ ΡΠ΅ΠΌ ΠΆΠ΅ ΠΏΡΠΈΠ½ΡΠΈΠΏΠΎΠΌ: Π²ΡΠΏΠΎΠ»Π½ΠΈΡΡ Π·Π°Π³ΡΡΠ·ΠΊΡ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ Π·Π°ΡΠ°Π½Π΅Π΅ Π΄Π»Ρ Π»ΡΡΡΠ΅Π³ΠΎ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΠΎΠΏΡΡΠ°.
3. ΠΠ°ΠΊ ΠΈΠ·Π±Π΅ΠΆΠ°ΡΡ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ
ΠΡΠΈ ΠΎΡΡΡΡΡΡΠ²ΠΈΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π±ΡΠ°ΡΠ·Π΅Ρ Π½Π΅ Π·Π½Π°Π΅Ρ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ² ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ, ΠΊΠΎΡΠΎΡΠΎΠ΅ Π΄ΠΎΠ»ΠΆΠ½ΠΎ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ Π² ΠΏΡΠ΅Π΄Π΅Π»Π°Ρ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ°. ΠΡΠ»ΠΈ Π½Π΅ Π·Π°Π΄Π°ΡΡ Π΅Π³ΠΎ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS, ΠΊΠΎΠ½Π΅ΡΠ½ΡΠΉ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ Π½Π΅ Π±ΡΠ΄Π΅Ρ ΠΈΠΌΠ΅ΡΡ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ², ΡΠΎ Π΅ΡΡΡ Π΅Π³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΡ Π±ΡΠ΄ΡΡ ΡΠ°Π²Π½Ρ 0 x 0 px.
ΠΠ°ΡΠ΅ΠΌ, ΠΊΠΎΠ³Π΄Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π±ΡΠ΄Π΅Ρ Π·Π°Π³ΡΡΠΆΠ΅Π½ΠΎ, Π±ΡΠ°ΡΠ·Π΅Ρ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ ΡΠ°Π·ΠΌΠ΅Ρ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ°, ΡΡΠΎΠ±Ρ ΠΎΠ½ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΎΠ²Π°Π» ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ.
ΠΡΠΎ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΠΏΡΠΈΠ²ΠΎΠ΄ΠΈΡ ΠΊ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ΅Π½ΠΈΡ Π΄ΡΡΠ³ΠΈΡ
ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΠΈ Π½Π°Π·ΡΠ²Π°Π΅ΡΡΡ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ΠΌ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ.
ΠΠ°ΠΊ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ Π² ΡΡΠΎΠΌ ΠΌΠ°ΡΠ΅ΡΠΈΠ°Π»Π΅ Smashing Magazine, ΡΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ° ΠΈ Π²ΠΈΠ΄Π΅ΠΎ β Π΄ΠΎΠ²ΠΎΠ»ΡΠ½ΠΎ Π½Π΅ΠΏΡΠΈΡΡΠ½ΡΠΉ ΠΎΠΏΡΡ Π΄Π»Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ.
Π Π΅ΡΠ΅Π½ΠΈΠ΅
ΠΡΠΎΠ³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΠ·Π±Π΅ΠΆΠ°ΡΡ, ΡΠΊΠ°Π·Π°Π² Π²ΡΡΠΎΡΡ ΠΈ (ΠΈΠ»ΠΈ) ΡΠΈΡΠΈΠ½Ρ Π΄Π»Ρ ΠΊΠΎΠ½Π΅ΡΠ½ΠΎΠ³ΠΎ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ°, ΡΡΠΎΠ±Ρ Π±ΡΠ°ΡΠ·Π΅Ρ ΠΌΠΎΠ³ Π½Π°ΡΠΈΡΠΎΠ²Π°ΡΡ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Ρ ΠΈΠ·Π²Π΅ΡΡΠ½ΠΎΠΉ Π²ΡΡΠΎΡΠΎΠΉ ΠΈ ΡΠΈΡΠΈΠ½ΠΎΠΉ.
ΠΠΎΠ·ΠΆΠ΅, ΠΊΠΎΠ³Π΄Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π·Π°Π³ΡΡΠΆΠ°Π΅ΡΡΡ, ΡΠ°ΠΊ ΠΊΠ°ΠΊ ΡΠ°Π·ΠΌΠ΅Ρ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ° ΡΠΆΠ΅ Π·Π°Π΄Π°Π½ ΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π²ΠΏΠΈΡΡΠ²Π°Π΅ΡΡΡ Π² Π½Π΅Π³ΠΎ, ΠΎΡΡΠ°Π»ΡΠ½Π°Ρ ΡΠ°ΡΡΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ Π²ΠΎΠΊΡΡΠ³ ΡΡΠΎΠ³ΠΎ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ° Π½Π΅ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°Π΅ΡΡΡ.
4. ΠΠ΅ ΡΡΠΎΠΈΡ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡ ΠΎΡΠ»ΠΎΠΆΠ΅Π½Π½ΡΡ Π·Π°Π³ΡΡΠ·ΠΊΡ Π΄Π»Ρ Π²ΡΠ΅Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ
ΠΡΡ ΠΎΠ΄Π½Π° ΠΎΡΠΈΠ±ΠΊΠ°, ΠΊΠΎΡΠΎΡΡΡ ΡΠ°ΡΡΠΎ ΡΠΎΠ²Π΅ΡΡΠ°ΡΡ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΈ, β Π·Π°Π³ΡΡΠΆΠ°ΡΡ Π²ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π½Π° ΡΡΡΠ°Π½ΠΈΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΎΡΠ»ΠΎΠΆΠ΅Π½Π½ΠΎΠΉ Π·Π°Π³ΡΡΠ·ΠΊΠΈ. ΠΡΠΎ ΠΌΠΎΠΆΠ΅Ρ ΡΠΎΠΊΡΠ°ΡΠΈΡΡ Π²ΡΠ΅ΠΌΡ Π½Π° Π½Π°ΡΠ°Π»ΡΠ½ΡΡ Π·Π°Π³ΡΡΠ·ΠΊΡ ΡΡΡΠ°Π½ΠΈΡΡ, Π½ΠΎ ΡΠ°ΠΊΠΆΠ΅ ΠΏΡΠΈΠ²Π΅Π΄ΡΡ ΠΊ ΠΏΠ»ΠΎΡ
ΠΎΠΌΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΎΠΌΡ ΠΎΠΏΡΡΡ, ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΠΌΠ½ΠΎΠ³ΠΈΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π΄Π°ΠΆΠ΅ Π² Π²Π΅ΡΡ
Π½Π΅ΠΉ ΡΠ°ΡΡΠΈ ΡΡΡΠ°Π½ΠΈΡΡ Π½Π΅ Π±ΡΠ΄ΡΡ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ Π΄ΠΎ ΡΠ΅Ρ
ΠΏΠΎΡ, ΠΏΠΎΠΊΠ° JavaScript Π½Π΅ Π±ΡΠ΄Π΅Ρ Π²ΡΠΏΠΎΠ»Π½Π΅Π½.
ΠΠΎΠΆΠ½ΠΎ ΡΠ»Π΅Π΄ΠΎΠ²Π°ΡΡ ΠΎΠ±ΡΠΈΠΌ ΠΏΡΠΈΠ½ΡΠΈΠΏΠ°ΠΌ, ΡΡΠΎΠ±Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΠΈΡΡ, ΠΊΠ°ΠΊΠΈΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π΄ΠΎΠ»ΠΆΠ½Ρ Π±ΡΡΡ Π·Π°Π³ΡΡΠΆΠ΅Π½Ρ ΠΏΠΎΡΠ»Π΅.
- ΠΡΠ±ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΠΏΡΠΈΡΡΡΡΡΠ²ΡΠ΅Ρ Π² ΠΎΠΊΠ½Π΅ ΠΏΡΠΎΡΠΌΠΎΡΡΠ° ΠΈΠ»ΠΈ Π² Π½Π°ΡΠ°Π»Π΅ ΡΡΡΠ°Π½ΠΈΡΡ, Π½Π΅ Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π·Π°Π³ΡΡΠΆΠ°ΡΡΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΎΡΠ»ΠΎΠΆΠ΅Π½Π½ΠΎΠΉ Π·Π°Π³ΡΡΠ·ΠΊΠΈ. ΠΡΠΎ ΠΊΠ°ΡΠ°Π΅ΡΡΡ Π»ΡΠ±ΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ-Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ°, ΡΠ΅ΠΊΠ»Π°ΠΌΠ½ΡΡ Π±Π°Π½Π½Π΅ΡΠΎΠ², Π»ΠΎΠ³ΠΎΡΠΈΠΏΠΎΠ². ΠΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π²ΠΈΠ΄Π΅ΡΡ ΠΈΡ , ΠΊΠ°ΠΊ ΡΠΎΠ»ΡΠΊΠΎ ΡΡΡΠ°Π½ΠΈΡΠ° Π·Π°Π³ΡΡΠ·ΠΈΡΡΡ. ΠΠΎΠΌΠ½ΠΈΡΠ΅, ΡΡΠΎ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΠ΅ ΠΈ Π΄Π΅ΡΠΊΡΠΎΠΏΠ½ΡΠ΅ ΡΡΡΡΠΎΠΉΡΡΠ²Π° Π±ΡΠ΄ΡΡ ΠΈΠΌΠ΅ΡΡ ΡΠ°Π·Π½ΡΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΡ ΡΠΊΡΠ°Π½Π° ΠΈ, ΡΠ»Π΅Π΄ΠΎΠ²Π°ΡΠ΅Π»ΡΠ½ΠΎ, ΡΠ°Π·Π½ΠΎΠ΅ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ, ΠΊΠΎΡΠΎΡΡΠ΅ Π±ΡΠ΄ΡΡ Π²ΠΈΠ΄Π½Ρ Π½Π° ΡΠΊΡΠ°Π½Π΅ ΠΈΠ·Π½Π°ΡΠ°Π»ΡΠ½ΠΎ. Π’Π°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ, Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ ΡΡΠΈΡΡΠ²Π°ΡΡ ΡΠΈΠΏ ΡΡΡΡΠΎΠΉΡΡΠ²Π°, ΡΡΠΎΠ±Ρ ΡΠ΅ΡΠΈΡΡ, ΠΊΠ°ΠΊΠΈΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π·Π°Π³ΡΡΠΆΠ°ΡΡ ΠΈΠ·Π½Π°ΡΠ°Π»ΡΠ½ΠΎ, Π° ΠΊΠ°ΠΊΠΈΠ΅ Π½Π΅Ρ.
- ΠΡΠ±ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΡΠ°ΡΡΠΈΡΠ½ΠΎ Π²ΠΈΠ΄Π½ΠΎ Π² ΠΎΠΊΠ½Π΅ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°, Π½Π΅ Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π·Π°Π³ΡΡΠΆΠ°ΡΡΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΎΡΠ»ΠΎΠΆΠ΅Π½Π½ΠΎΠΉ Π·Π°Π³ΡΡΠ·ΠΊΠΈ. ΠΡΠΎ ΠΏΡΠΎΠΈΡΡ
ΠΎΠ΄ΠΈΡ ΠΏΠΎ ΠΏΡΠΈΠ½ΡΠΈΠΏΡ, ΠΊΠΎΡΠΎΡΡΠΉ ΠΎΠ±ΡΡΠΆΠ΄Π°Π»ΡΡ Π²ΡΡΠ΅, β Π·Π°Π³ΡΡΠΆΠ°ΡΡ ΡΡΡΡ Π·Π°ΡΠ°Π½Π΅Π΅. ΠΡΠ±ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅, Π½Π°Ρ
ΠΎΠ΄ΡΡΠ΅Π΅ΡΡ, Π΄ΠΎΠΏΡΡΡΠΈΠΌ, Π² 500 px ΠΎΡ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°, ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ Π·Π°Π³ΡΡΠΆΠ΅Π½ΠΎ Π·Π°ΡΠ°Π½Π΅Π΅.

- ΠΡΠ»ΠΈ ΡΡΡΠ°Π½ΠΈΡΠ° Π½Π΅ Π΄Π»ΠΈΠ½Π½Π°Ρ, Π΅Ρ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡΠΎΠ»ΠΈΡΡΠ°ΡΡ Π·Π° Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ Π΄Π²ΠΈΠΆΠ΅Π½ΠΈΠΉ. ΠΠ»ΠΈ Π΅ΡΠ»ΠΈ Π·Π° ΠΏΡΠ΅Π΄Π΅Π»Π°ΠΌΠΈ ΠΎΠΊΠ½Π° ΠΏΡΠΎΡΠΌΠΎΡΡΠ° ΠΌΠ΅Π½ΡΡΠ΅ ΠΏΡΡΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ, ΡΠΎ ΠΎΡΠ»ΠΎΠΆΠ΅Π½Π½ΡΡ Π·Π°Π³ΡΡΠ·ΠΊΡ ΠΌΠΎΠΆΠ½ΠΎ Π½Π΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ. ΠΡΠΎ Π½Π΅ ΠΏΡΠΈΠ½Π΅ΡΡΡ ΡΡΡΠ΅ΡΡΠ²Π΅Π½Π½ΠΎΠΉ Π²ΡΠ³ΠΎΠ΄Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ Ρ ΡΠΎΡΠΊΠΈ Π·ΡΠ΅Π½ΠΈΡ ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΠΈ. ΠΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠΉ JavaScript, ΠΊΠΎΡΠΎΡΡΠΉ Π²Ρ Π·Π°Π³ΡΡΠΆΠ°Π΅ΡΠ΅ Π½Π° ΡΡΡΠ°Π½ΠΈΡΡ, ΡΡΠΎΠ±Ρ Π²ΠΊΠ»ΡΡΠΈΡΡ ΠΎΡΠ»ΠΎΠΆΠ΅Π½Π½ΡΡ Π·Π°Π³ΡΡΠ·ΠΊΡ, ΠΊΠΎΠΌΠΏΠ΅Π½ΡΠΈΡΡΠ΅Ρ Π²ΡΠΈΠ³ΡΡΡ ΠΎΡ ΠΎΡΠ»ΠΎΠΆΠ΅Π½Π½ΠΎΠΉ Π·Π°Π³ΡΡΠ·ΠΊΠΈ ΡΠ°ΠΊΠΎΠ³ΠΎ Π½Π΅Π±ΠΎΠ»ΡΡΠΎΠ³ΠΎ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ.
ΠΠΎΠΏΡΠ»ΡΡΠ½ΡΠ΅ JavaScript-Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΈ
ΠΠΎΡΠΊΠΎΠ»ΡΠΊΡ Π±ΡΠ°ΡΠ·Π΅ΡΡ ΠΈ ΡΠΏΠΎΡΠΎΠ±Ρ ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΠΈ ΠΌΠΎΠ³ΡΡ ΡΠ°Π·Π»ΠΈΡΠ°ΡΡΡΡ Π½Π° ΡΠ°Π·Π½ΡΡ ΡΡΡΡΠΎΠΉΡΡΠ²Π°Ρ , Π»ΡΡΡΠ΅ Π²ΡΠ΅Π³ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΏΡΠΎΠ²Π΅ΡΠ΅Π½Π½ΡΡ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΡ Π΄Π»Ρ ΠΎΡΠ»ΠΎΠΆΠ΅Π½Π½ΠΎΠΉ Π·Π°Π³ΡΡΠ·ΠΊΠΈ. ΠΠΎΡ ΡΠΏΠΈΡΠΎΠΊ ΠΏΠΎΠΏΡΠ»ΡΡΠ½ΡΡ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊ ΠΈ ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠ² Π΄Π»Ρ ΡΠ°Π·Π½ΡΡ ΠΏΠ»Π°ΡΡΠΎΡΠΌ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡ ΡΠ΅Π°Π»ΠΈΠ·ΠΎΠ²Π°ΡΡ ΠΎΡΠ»ΠΎΠΆΠ΅Π½Π½ΡΡ Π·Π°Π³ΡΡΠ·ΠΊΡ Ρ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΡΠΌΠΈ ΡΡΠΈΠ»ΠΈΡΠΌΠΈ.
- yall.js (Yet Another Lazy Loader) β ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ Intersection Observer API ΠΈ Π²ΠΎΠ·Π²ΡΠ°ΡΠ°Π΅ΡΡΡ ΠΊ ΠΎΡΠ»ΠΎΠΆΠ΅Π½Π½ΠΎΠΉ Π·Π°Π³ΡΡΠ·ΠΊΠ΅ Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ ΡΠΎΠ±ΡΡΠΈΠΉ. ΠΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅Ρ Π²ΡΠ΅ ΠΎΡΠ½ΠΎΠ²Π½ΡΠ΅ ΡΠΈΠΏΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² HTML, Π½ΠΎ Π½Π΅ Β«background-imageΒ».
Π’Π°ΠΊΠΆΠ΅ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ Π½Π° Internet Explorer 11 ΠΈ ΡΡΠ°ΡΡΠΈΡ
Π²Π΅ΡΡΠΈΡΡ
. - lazysizes β Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ° Ρ ΠΎΠ±ΡΠΈΡΠ½ΠΎΠΉ ΡΡΠ½ΠΊΡΠΈΠΎΠ½Π°Π»ΡΠ½ΠΎΡΡΡΡ. ΠΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅Ρ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Β«srcsetΒ» ΠΈ Π°ΡΡΠΈΠ±ΡΡ Β«sizesΒ». ΠΡΡΠΎΠΊΠ°Ρ ΡΡΡΠ΅ΠΊΡΠΈΠ²Π½ΠΎΡΡΡ Π΄Π°ΠΆΠ΅ Π±Π΅Π· Intersection Observer API.
- jQuery Lazy β ΠΏΡΠΎΡΡΠ°Ρ, ΠΎΡΠ½ΠΎΠ²Π°Π½Π½Π°Ρ Π½Π° jQuery, Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ° ΠΎΡΠ»ΠΎΠΆΠ΅Π½Π½ΠΎΠΉ Π·Π°Π³ΡΡΠ·ΠΊΠΈ.
- WeltPixel Lazy Loading Enhanced β ΡΠ°ΡΡΠΈΡΠ΅Π½ΠΈΠ΅ Π΄Π»Ρ Magento 2 Π΄Π»Ρ ΠΎΡΠ»ΠΎΠΆΠ΅Π½Π½ΠΎΠΉ Π·Π°Π³ΡΡΠ·ΠΊΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ.
- Magento Lazy Image Loader β ΡΠ°ΡΡΠΈΡΠ΅Π½ΠΈΠ΅ Π΄Π»Ρ Magento 1.x Π΄Π»Ρ ΠΎΡΠ»ΠΎΠΆΠ΅Π½Π½ΠΎΠΉ Π·Π°Π³ΡΡΠ·ΠΊΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ.
- Shopify Lazy Image Plugin β ΡΠ°ΡΡΠΈΡΠ΅Π½ΠΈΠ΅ Π΄Π»Ρ Shopify Π΄Π»Ρ ΠΎΡΠ»ΠΎΠΆΠ΅Π½Π½ΠΎΠΉ Π·Π°Π³ΡΡΠ·ΠΊΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ. ΠΠ»Π°ΡΠ½Π°Ρ.
- WordPress A3 Lazy Load β ΠΏΠ»Π°Π³ΠΈΠ½ ΠΎΡΠ»ΠΎΠΆΠ΅Π½Π½ΠΎΠΉ Π·Π°Π³ΡΡΠ·ΠΊΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ Π΄Π»Ρ WordPress.
ΠΠ°ΠΊ ΠΏΡΠΎΠ²Π΅ΡΠΈΡΡ, Π²ΡΡ Π»ΠΈ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ
Π‘Π°ΠΌΡΠΉ ΠΏΡΠΎΡΡΠΎΠΉ ΡΠΏΠΎΡΠΎΠ± β ΠΎΡΠΊΡΡΡΡ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΡ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠ° Π² Π±ΡΠ°ΡΠ·Π΅ΡΠ΅ Chrome.
ΠΠ΅ΡΠ΅ΠΉΠ΄ΠΈΡΠ΅ Π½Π° Π²ΠΊΠ»Π°Π΄ΠΊΡ Β«Π‘Π΅ΡΡΒ» β Β«ΠΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡΒ». ΠΠ΄Π΅ΡΡ ΠΏΡΠΈ ΠΏΠ΅ΡΠ²ΠΎΠΌ ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΠΈ ΡΡΡΠ°Π½ΠΈΡΡ Π΄ΠΎΠ»ΠΆΠ½Ρ Π·Π°Π³ΡΡΠΆΠ°ΡΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, ΠΊΠΎΡΠΎΡΡΠ΅ Π΄ΠΎΠ»ΠΆΠ½Ρ ΠΏΡΠΈΡΡΡΡΡΠ²ΠΎΠ²Π°ΡΡ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅ ΠΈΠ·Π½Π°ΡΠ°Π»ΡΠ½ΠΎ.
ΠΠ°ΡΠ΅ΠΌ, ΠΊΠΎΠ³Π΄Π° Π²Ρ Π½Π°ΡΠΈΠ½Π°Π΅ΡΠ΅ ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°ΡΡ ΡΡΡΠ°Π½ΠΈΡΡ Π²Π½ΠΈΠ·, Π΄ΡΡΠ³ΠΈΠ΅ Π·Π°ΠΏΡΠΎΡΡ Π·Π°Π³ΡΡΠ·ΠΊΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ Π±ΡΠ΄ΡΡ Π·Π°ΠΏΡΡΠΊΠ°ΡΡΡΡ ΠΈ Π·Π°Π³ΡΡΠΆΠ°ΡΡΡΡ. Π’Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ Π·Π°ΠΌΠ΅ΡΠΈΡΡ ΡΠ°ΠΉΠΌΠΈΠ½Π³ΠΈ Π΄Π»Ρ Π·Π°Π³ΡΡΠ·ΠΊΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ. ΠΡΠΎ ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΠΈΡΡ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ Ρ Π·Π°Π³ΡΡΠ·ΠΊΠΎΠΉ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ, Π΅ΡΠ»ΠΈ ΡΠ°ΠΊΠΎΠ²ΡΠ΅ ΠΈΠΌΠ΅ΡΡΡΡ, ΠΈΠ»ΠΈ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ Ρ Π·Π°ΠΏΡΡΠΊΠΎΠΌ Π·Π°Π³ΡΡΠ·ΠΊΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ.
ΠΡΡΠ³ΠΎΠΉ ΡΠΏΠΎΡΠΎΠ± β Π·Π°ΠΏΡΡΡΠΈΡΡ ΡΠ°ΡΡΠΈΡΠ΅Π½ΠΈΠ΅ Lighthouse ΠΎΡ Google Chrome Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅ ΠΏΠΎΡΠ»Π΅ Π²Π½Π΅ΡΠ΅Π½ΠΈΡ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ ΠΈ Π½Π°ΠΉΡΠΈ ΠΏΡΠ΅Π΄Π»ΠΎΠΆΠ΅Π½ΠΈΡ Π² ΡΠ°Π·Π΄Π΅Π»Π΅ Offscreen images.
ΠΡΠ»ΠΈ Π½Π΅ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ
ΠΡΠ»ΠΈ ΠΏΠ΅ΡΠ΅ΠΆΠΈΠ²Π°Π΅ΡΠ΅ Π·Π° ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΉ, ΡΠ΅ΠΉ Π±ΡΠ°ΡΠ·Π΅Ρ Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅Ρ JavaScript, Π΄Π»Ρ Π½ΠΈΡ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΠΊΠ°Π·Π°ΡΡ ΡΠΎΠΎΠ±ΡΠ΅Π½ΠΈΠ΅ ΠΎ ΡΠΎΠΌ, ΠΏΠΎΡΠ΅ΠΌΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π½Π΅ Π·Π°Π³ΡΡΠΆΠ°ΡΡΡΡ ΠΈ ΡΡΠΎ Π½ΡΠΆΠ½ΠΎ ΠΏΠ΅ΡΠ΅ΠΉΡΠΈ Π½Π° ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΡΠΉ Π±ΡΠ°ΡΠ·Π΅Ρ ΠΈΠ»ΠΈ Π²ΠΊΠ»ΡΡΠΈΡΡ JavaScript.
ΠΠ»ΠΈ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠ΅Π³ <noscript>, ΡΡΠΎΠ±Ρ ΡΠΎΠ·Π΄Π°ΡΡ ΡΠ΄ΠΎΠ±Π½ΡΠΉ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡ Π΄Π»Ρ ΡΡΠΈΡ
ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΉ.
Π ΡΡΠ΅Π΄Π΅ Stack Overflow ΡΠ°ΡΡΠΌΠ°ΡΡΠΈΠ²Π°ΡΡΡΡ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ ΡΡΠΎΠ³ΠΎ ΡΠ΅Π³Π°. ΠΠ°ΡΠ΅ΡΠΈΠ°Π» Π±ΡΠ΄Π΅Ρ ΠΏΠΎΠ»Π΅Π·Π΅Π½ Π΄Π»Ρ Π²ΡΠ΅Ρ
, ΡΡΡ ΡΠ΅Π»Π΅Π²Π°Ρ Π°ΡΠ΄ΠΈΡΠΎΡΠΈΡ β ΡΠ°ΠΊΠΈΠ΅ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΠΈ.
ΠΡΠΎΡΡΠΎΠ΅ ΡΡΠΊΠΎΠ²ΠΎΠ΄ΡΡΠ²ΠΎ ΠΏΠΎ HTML
ΠΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΡΡ Π² Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°Ρ HTML Ρ ΠΎΠ΄Π½ΠΎΠΉ ΡΠ΅Π»ΡΡ: ΡΠ΄Π΅Π»Π°ΡΡ ΡΡΡΠ°Π½ΠΈΡΡ Π²ΠΈΠ·ΡΠ°Π»ΡΠ½ΠΎ ΡΡΡΠ΅ΠΊΡΠ½ΠΎΠΉ ΠΈ Ρ Π΄ΡΡΠ³ΠΎΠΉ: ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ. Π ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ ΡΡΡΠ»ΠΎΠΊ ΡΠ°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, Π½ΠΎ ΡΡΠΎ ΠΎΠ±ΡΡΠΆΠ΄Π°Π΅ΡΡΡ Π² ΡΠ΅ΠΌΠ΅ ΠΏΡΠΎ ΠΏΠ΅ΡΠ΅Π»ΠΈΠ½ΠΊΠΎΠ²ΠΊΡ.
Π₯ΠΎΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Ρ ΠΎΡΠΎΡΠΈ Π΄Π»Ρ ΠΌΠ½ΠΎΠ³ΠΈΡ ΡΠ΅Π»Π΅ΠΉ, ΡΡΡΠ°Π½ΠΈΡΠ° ΡΠΎ ΡΠ»ΠΈΡΠΊΠΎΠΌ Π±ΠΎΠ»ΡΡΠΈΠΌ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎΠΌ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ ΡΠ°ΡΡΠΎ Π²ΡΠ³Π»ΡΠ΄ΠΈΡ ΡΠ»ΠΈΡΠΊΠΎΠΌ Π·Π°Π³ΡΠΎΠΌΠΎΠΆΠ΄Π΅Π½Π½ΠΎΠΉ ΠΈ ΠΌΠΎΠΆΠ΅Ρ ΡΠ»ΠΈΡΠΊΠΎΠΌ Π΄ΠΎΠ»Π³ΠΎ Π·Π°Π³ΡΡΠΆΠ°ΡΡΡΡ, ΡΡΠΎ ΠΌΠΎΠΆΠ΅Ρ ΡΠ°Π·Π΄ΡΠ°ΠΆΠ°ΡΡ, Π° Ρ ΡΠΎΡΠΊΠΈ Π·ΡΠ΅Π½ΠΈΡ Π±ΠΈΠ·Π½Π΅ΡΠ° ΡΡΠΎ ΠΌΠΎΠΆΠ΅Ρ ΠΏΡΠΈΠ²Π΅ΡΡΠΈ ΠΊ ΠΏΠΎΡΠ΅ΡΠ΅ ΠΊΠ»ΠΈΠ΅Π½ΡΠΎΠ².
- ΠΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ —
URL-Π°Π΄ΡΠ΅Ρ ">
- ΠΠ»Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΠΎ ΡΠΊΠ°Π·Π°ΡΡ URL ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ Π°ΡΡΠΈΠ±ΡΡΠ°
src, Π·Π°ΠΌΠ΅Π½ΠΈΠ²urlΠ½Π° ΠΈΠΌΡ ΡΠ°ΠΉΠ»Π° Π²Π°ΡΠ΅Π³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ. ΠΡΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°ΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΠΌΠΈ ΡΠΏΠΎΡΠΎΠ±Π°ΠΌΠΈ: -
src="picture.jpg"— ΠΈΠΌΡ ΡΠ°ΠΉΠ»Π°, Π΅ΡΠ»ΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡ Π² ΡΠΎΠΉ ΠΆΠ΅ Π΄ΠΈΡΠ΅ΠΊΡΠΎΡΠΈΠΈ, ΡΡΠΎ ΠΈ html-ΡΠ°ΠΉΠ».
-
src="images/picture.jpg"— ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΡΠΉ ΠΏΡΡΡ, ΠΊΠΎΠ³Π΄Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡ Π² Π΄ΡΡΠ³ΠΎΠΌ ΠΊΠ°ΡΠ°Π»ΠΎΠ³Π΅. -
src="http://www.simplehtmlguide.com/images/photo.jpg"β ΡΠ°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΏΠΎΠ»Π½ΡΠΉ URL. - ΠΠ»ΡΡΠ΅ΡΠ½Π°ΡΠΈΠ²Π½ΡΠΉ ΡΠ΅ΠΊΡΡ —
- ΠΡΡΠΈΠ±ΡΡ
altΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ ΡΠ΅ΠΊΡΡ, ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΠΌΡΠΉ Π²ΠΌΠ΅ΡΡΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, ΠΊΠΎΠ³Π΄Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ Π·Π°Π³ΡΡΠ·ΠΈΡΡΡΡ. ΠΠ° ΡΠ°ΠΌΠΎΠΌ Π΄Π΅Π»Π΅ ΡΡΠΎ ΠΎΠ±ΡΠ·Π°ΡΠ΅Π»ΡΠ½ΡΠΉ Π°ΡΡΠΈΠ±ΡΡ Π΄Π»Ρ Π΄ΠΎΠΏΡΡΡΠΈΠΌΠΎΠ³ΠΎ html, ΠΈ ΠΎΠ½ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΊΡΠ°ΡΠΊΠΎ ΠΎΠΏΠΈΡΡΠ²Π°ΡΡ ΡΠΎ, ΡΡΠΎ ΠΎΠ±ΡΡΠ½ΠΎ Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±ΡΡΡ Π½Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΈ. - Π Π°Π·ΠΌΠ΅Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ —
- ΠΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΎΠ±ΡΡΠ½ΠΎ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΡΡΡ Π² ΡΠ΅Π°Π»ΡΠ½ΠΎΠΌ ΡΠ°Π·ΠΌΠ΅ΡΠ΅, Π½ΠΎ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ
ΡΠΈΡΠΈΠ½ΡΠΈΠ²ΡΡΠΎΡΡΠ°ΡΡΠΈΠ±ΡΡΠΎΠ² Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΠΌΡΠΉ ΡΠ°Π·ΠΌΠ΅Ρ. ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠΊΠ°Π·Π°ΡΡ ΡΠ°Π·ΠΌΠ΅Ρ Π² ΠΏΠΈΠΊΡΠ΅Π»ΡΡ ΠΈΠ»ΠΈ Π² ΠΏΡΠΎΡΠ΅Π½ΡΠ°Ρ . Π‘ΠΎΠ²Π΅Ρ: ΡΠΊΠ°ΠΆΠΈΡΠ΅ ΡΠ°Π·ΠΌΠ΅Ρ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ ΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈΠΉ ΡΠ°Π·ΠΌΠ΅Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π² ΠΏΠΈΠΊΡΠ΅Π»ΡΡ , ΡΡΠΎΠ±Ρ Π·Π°ΡΡΠ°Π²ΠΈΡΡ Π±ΡΠ°ΡΠ·Π΅ΡΡ Π²ΡΠ΄Π΅Π»ΠΈΡΡ ΠΌΠ΅ΡΡΠΎ Π΄Π»Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π΅ΡΠ΅ Π΄ΠΎ ΡΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ ΠΎΠ½ΠΎ Π±ΡΠ΄Π΅Ρ Π·Π°Π³ΡΡΠΆΠ΅Π½ΠΎ, Π³Π°ΡΠ°Π½ΡΠΈΡΡΡ, ΡΡΠΎ ΠΌΠ°ΠΊΠ΅Ρ ΡΡΡΠ°Π½ΠΈΡΡ ΠΎΡΡΠ°Π΅ΡΡΡ Π½Π΅ΠΈΠ·ΠΌΠ΅Π½Π½ΡΠΌ Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΠΌΡΠΌΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡΠΌΠΈ ΠΈΠ»ΠΈ Π±Π΅Π· Π½ΠΈΡ .
- ΠΡΠ°Π½ΠΈΡΠ° —
- ΠΠΎΠ±Π°Π²ΡΡΠ΅ Π³ΡΠ°Π½ΠΈΡΡ, ΡΠΊΠ°Π·Π°Π² ΡΠΎΠ»ΡΠΈΠ½Ρ Π² ΠΏΠΈΠΊΡΠ΅Π»ΡΡ
. ΠΡ ΡΠ°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ
border="0", ΡΡΠΎΠ±Ρ ΡΠ΄Π°Π»ΠΈΡΡ ΡΠ°ΠΌΠΊΡ, Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅ΠΌΡΡ, ΠΊΠΎΠ³Π΄Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΡΡ Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ ΡΡΡΠ»ΠΎΠΊ. (*) - ΠΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ β
- ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΏΠΎΡΠ²Π»ΡΠ΅ΡΡΡ Π² ΠΌΠ΅ΡΡΠ΅, ΡΠΊΠ°Π·Π°Π½Π½ΠΎΠΌ Π² html-ΠΊΠΎΠ΄Π΅ (ΠΊΠ°ΠΊ ΠΈ Π² Π»ΡΠ±ΠΎΠΌ Π΄ΡΡΠ³ΠΎΠΌ ΡΠ΅Π³Π΅). ΠΠ΄Π½Π°ΠΊΠΎ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π²ΡΡΠΎΠ²Π½ΡΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Ρ ΠΎΠΊΡΡΠΆΠ°ΡΡΠΈΠΌ ΡΠ΅ΠΊΡΡΠΎΠΌ ΠΈΠ»ΠΈ Π°Π±Π·Π°ΡΠ΅ΠΌ, ΡΡΡΠ°Π½ΠΎΠ²ΠΈΠ² Π»ΡΠ±ΠΎΠΉ ΠΈΠ·
align="left | right | top | bottom | middle". (*) - ΠΠ½ΡΠ΅ΡΠ²Π°Π» —
- ΠΡΡΠ΅Π³ΡΠ»ΠΈΡΡΠΉΡΠ΅ ΠΏΡΡΡΠΎΠ΅ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²ΠΎ (ΠΈΠ»ΠΈ ΠΎΠ±Ρ
ΠΎΠ΄Π½ΠΎΠ΅ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²ΠΎ) Π²ΠΎΠΊΡΡΠ³ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π² ΠΏΠΈΠΊΡΠ΅Π»ΡΡ
. ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅
vspaceΠ΄Π»Ρ Π½Π°ΡΡΡΠΎΠΉΠΊΠΈ ΠΈΠ½ΡΠ΅ΡΠ²Π°Π»Π° ΠΏΠΎ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΠΈ ΡΠ²Π΅ΡΡ Ρ ΠΈ ΡΠ½ΠΈΠ·Ρ ΠΈΠ»ΠΈhspaceΠ΄Π»Ρ Π»Π΅Π²ΠΎΠΉ ΠΈ ΠΏΡΠ°Π²ΠΎΠΉ ΡΡΠΎΡΠΎΠ½. (*)
ΠΡΠΈΠΌΠ΅Ρ:
ΠΠΎΠΊΠ°Π·Π°ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Ρ ΠΏΠΎΠΌΠΎΡΡΡ HTML
<ΡΠ΅Π»ΠΎ>ΡΠ΅Π»ΠΎ>
jpg" alt="ΠΏΠΎΠΏΡΠ³Π°ΠΉ">
ΠΠΎΡΠΌΠΎΡΡΠΈΡΠ΅ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΡ ΡΡΠΎΠ³ΠΎ ΠΏΡΠΈΠΌΠ΅ΡΠ° Π² ΡΠ΅Π°Π»ΡΠ½ΠΎΠΌ Π²ΡΠ΅ΠΌΠ΅Π½ΠΈ ΠΈΠ»ΠΈ ΠΎΡΠΊΡΠΎΠΉΡΠ΅ Π² Π½ΠΎΠ²ΠΎΠΌ ΠΎΠΊΠ½Π΅. (ΠΡΠΈΠΌΠ΅ΡΠ°Π½ΠΈΠ΅: Π·Π°ΠΊΡΠΎΠΉΡΠ΅ ΠΎΠΊΠ½ΠΎ ΠΈΠ»ΠΈ Π²ΠΊΠ»Π°Π΄ΠΊΡ, ΡΡΠΎΠ±Ρ Π²Π΅ΡΠ½ΡΡΡΡΡ ΠΊ ΡΡΠΊΠΎΠ²ΠΎΠ΄ΡΡΠ²Ρ)
ΠΡΠΈΠΌΠ΅Ρ:
Π‘ΠΌ. Π΄ΡΡΠ³ΠΎΠΉ ΠΏΡΠΈΠΌΠ΅Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΈ Π²ΡΠ±Π΅ΡΠΈΡΠ΅ ‘ΠΏΡΠΎΡΠΌΠΎΡΡΠ΅ΡΡ ΠΈΡΡ ΠΎΠ΄Π½ΡΠΉ ΠΊΠΎΠ΄’ Π² Π±ΡΠ°ΡΠ·Π΅ΡΠ΅, ΡΡΠΎΠ±Ρ ΡΠ²ΠΈΠ΄Π΅ΡΡ HTML-ΠΊΠΎΠ΄.
(*) ΠΠ°ΠΆΠ½ΠΎΠ΅ ΠΏΡΠΈΠΌΠ΅ΡΠ°Π½ΠΈΠ΅:
Π’Π΅Π³ΠΈ, ΠΎΡΠΌΠ΅ΡΠ΅Π½Π½ΡΠ΅ (*), Π΄ΠΎΠ»ΠΆΠ½Ρ ΠΏΠΎ-ΠΏΡΠ΅ΠΆΠ½Π΅ΠΌΡ ΡΠ°Π±ΠΎΡΠ°ΡΡ, Π½ΠΎ ΠΎΠ½ΠΈ Π·Π°ΠΌΠ΅Π½Π΅Π½Ρ ΠΊΠ°ΡΠΊΠ°Π΄Π½ΡΠΌΠΈ ΡΠ°Π±Π»ΠΈΡΠ°ΠΌΠΈ ΡΡΠΈΠ»Π΅ΠΉ (CSS), ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠ΅ΠΏΠ΅ΡΡ ΡΠ²Π»ΡΡΡΡΡ ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡΠ΅ΠΌΡΠΌ ΡΠΏΠΎΡΠΎΠ±ΠΎΠΌ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ ΡΡΠΈΡΡΠ°, ΡΠ²Π΅ΡΠ°, ΠΈΠ½ΡΠ΅ΡΠ²Π°Π»Π°, Π³ΡΠ°Π½ΠΈΡΡ ΠΈΠ»ΠΈ Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΡ. ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² HTML.
ΠΡΠ΅Π΄ΡΠ΄ΡΡΠ°Ρ | Π’ΠΎΠΏ | ΠΠ°Π»Π΅Π΅ΠΠ°ΠΊ Π²ΡΡΠ°Π²Π»ΡΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π² HTML-ΡΡΡΠ°Π½ΠΈΡΡ
Π Π΅ΠΊΠ»Π°ΠΌΠ½ΡΠ΅ ΠΎΠ±ΡΡΠ²Π»Π΅Π½ΠΈΡ
Π ΡΡΠΎΠΌ ΡΡΠΊΠΎΠ²ΠΎΠ΄ΡΡΠ²Π΅ Π²Ρ ΡΠ·Π½Π°Π΅ΡΠ΅, ΠΊΠ°ΠΊ Π²ΠΊΠ»ΡΡΠ°ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π² HTML-Π΄ΠΎΠΊΡΠΌΠ΅Π½Ρ.
ΠΡΡΠ°Π²ΠΊΠ° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ Π² Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΡ
ΠΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΡΠ»ΡΡΡΠ°ΡΡ Π²Π½Π΅ΡΠ½ΠΈΠΉ Π²ΠΈΠ΄ Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡ, Π΄Π΅Π»Π°Ρ ΠΈΡ Π±ΠΎΠ»Π΅Π΅ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΡΠΌΠΈ ΠΈ ΠΊΡΠ°ΡΠΎΡΠ½ΡΠΌΠΈ.
Π’Π΅Π³ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π΄Π»Ρ Π²ΡΡΠ°Π²ΠΊΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ Π² Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΡ HTML.
ΠΡΠΎ ΠΏΡΡΡΠΎΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΈ ΡΠΎΠ΄Π΅ΡΠΆΠΈΡ ΡΠΎΠ»ΡΠΊΠΎ Π°ΡΡΠΈΠ±ΡΡΡ. Π‘ΠΈΠ½ΡΠ°ΠΊΡΠΈΡ ΡΠ΅Π³Π° ΠΌΠΎΠΆΠ½ΠΎ ΡΠΊΠ°Π·Π°ΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ:
url » alt=» some_text «>
Π ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ Π½Π° Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΡ Π²ΡΡΠ°Π²Π»ΡΡΡΡΡ ΡΡΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ:
ΠΡΠΈΠΌΠ΅Ρ
ΠΠΎΠΏΡΠΎΠ±ΡΠΉΡΠ΅ ΡΡΠΎΡ ΠΊΠΎΠ΄ Β» ΠΠ°ΠΆΠ΄ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π΄ΠΎΠ»ΠΆΠ½ΠΎ ΠΈΠΌΠ΅ΡΡ ΠΊΠ°ΠΊ ΠΌΠΈΠ½ΠΈΠΌΡΠΌ Π΄Π²Π° Π°ΡΡΠΈΠ±ΡΡΠ°: Π°ΡΡΠΈΠ±ΡΡ src ΠΈ Π°ΡΡΠΈΠ±ΡΡ alt .
ΠΡΡΠΈΠ±ΡΡ src ΡΠΎΠΎΠ±ΡΠ°Π΅Ρ Π±ΡΠ°ΡΠ·Π΅ΡΡ, Π³Π΄Π΅ Π½Π°ΠΉΡΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅. ΠΠ³ΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ΠΌ ΡΠ²Π»ΡΠ΅ΡΡΡ URL-Π°Π΄ΡΠ΅Ρ ΡΠ°ΠΉΠ»Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ.
ΠΡΠΈΠ½ΠΈΠΌΠ°Ρ Π²ΠΎ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, ΡΡΠΎ Π°ΡΡΠΈΠ±ΡΡ alt ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»ΡΠ΅Ρ Π°Π»ΡΡΠ΅ΡΠ½Π°ΡΠΈΠ²Π½ΡΠΉ ΡΠ΅ΠΊΡΡ Π΄Π»Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, Π΅ΡΠ»ΠΈ ΠΎΠ½ΠΎ Π½Π΅Π΄ΠΎΡΡΡΠΏΠ½ΠΎ ΠΈΠ»ΠΈ Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΎ ΠΏΠΎ ΠΊΠ°ΠΊΠΎΠΉ-Π»ΠΈΠ±ΠΎ ΠΏΡΠΈΡΠΈΠ½Π΅. ΠΠ³ΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±ΡΡΡ Π·Π½Π°ΡΠΈΠΌΠΎΠΉ Π·Π°ΠΌΠ΅Π½ΠΎΠΉ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ.
ΠΡΠΈΠΌΠ΅ΡΠ°Π½ΠΈΠ΅: ΠΠ°ΠΊ ΠΈ , ΡΠ»Π΅ΠΌΠ΅Π½Ρ
ΡΠ°ΠΊΠΆΠ΅ ΡΠ²Π»ΡΠ΅ΡΡΡ ΠΏΡΡΡΡΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌ ΠΈ Π½Π΅ ΠΈΠΌΠ΅Π΅Ρ Π·Π°ΠΊΡΡΠ²Π°ΡΡΠ΅Π³ΠΎ ΡΠ΅Π³Π°.
ΠΠ΄Π½Π°ΠΊΠΎ Π² XHTML ΠΎΠ½ Π·Π°ΠΊΡΡΠ²Π°Π΅ΡΡΡ Π½Π° «/>«.
Π‘ΠΎΠ²Π΅Ρ: ΠΠ±ΡΠ·Π°ΡΠ΅Π»ΡΠ½ΡΠΉ Π°ΡΡΠΈΠ±ΡΡ alt ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»ΡΠ΅Ρ Π°Π»ΡΡΠ΅ΡΠ½Π°ΡΠΈΠ²Π½ΠΎΠ΅ ΡΠ΅ΠΊΡΡΠΎΠ²ΠΎΠ΅ ΠΎΠΏΠΈΡΠ°Π½ΠΈΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, Π΅ΡΠ»ΠΈ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ ΠΏΠΎ ΠΊΠ°ΠΊΠΎΠΉ-Π»ΠΈΠ±ΠΎ ΠΏΡΠΈΡΠΈΠ½Π΅ Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ ΠΏΡΠΎΡΠΌΠΎΡΡΠ΅ΡΡ Π΅Π³ΠΎ ΠΈΠ·-Π·Π° ΠΌΠ΅Π΄Π»Π΅Π½Π½ΠΎΠ³ΠΎ ΡΠΎΠ΅Π΄ΠΈΠ½Π΅Π½ΠΈΡ, ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π½Π΅Π΄ΠΎΡΡΡΠΏΠ½ΠΎ ΠΏΠΎ ΡΠΊΠ°Π·Π°Π½Π½ΠΎΠΌΡ URL-Π°Π΄ΡΠ΅ΡΡ ΠΈΠ»ΠΈ Π΅ΡΠ»ΠΈ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠ° Π΄Π»Ρ ΡΡΠ΅Π½ΠΈΡ Ρ ΡΠΊΡΠ°Π½Π° ΠΈΠ»ΠΈ Π½Π΅Π³ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠΉ Π±ΡΠ°ΡΠ·Π΅Ρ.
Π£ΡΡΠ°Π½ΠΎΠ²ΠΊΠ° ΡΠΈΡΠΈΠ½Ρ ΠΈ Π²ΡΡΠΎΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ
ΠΡΡΠΈΠ±ΡΡΡ ΡΠΈΡΠΈΠ½Π° ΠΈ Π²ΡΡΠΎΡΠ° ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΡΡ Π΄Π»Ρ ΡΠΊΠ°Π·Π°Π½ΠΈΡ ΡΠΈΡΠΈΠ½Ρ ΠΈ Π²ΡΡΠΎΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ.
ΠΠ½Π°ΡΠ΅Π½ΠΈΡ ΡΡΠΈΡ Π°ΡΡΠΈΠ±ΡΡΠΎΠ² ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ ΠΈΠ½ΡΠ΅ΡΠΏΡΠ΅ΡΠΈΡΡΡΡΡΡ Π² ΠΏΠΈΠΊΡΠ΅Π»ΡΡ .
ΠΡΠΈΠΌΠ΅Ρ
ΠΠΎΠΏΡΠΎΠ±ΡΠΉΡΠ΅ ΡΡΠΎΡ ΠΊΠΎΠ΄ Β» ΠΡ ΡΠ°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ 9ΠΡΡΠΈΠ±ΡΡ 0008 style Π΄Π»Ρ ΡΠΊΠ°Π·Π°Π½ΠΈΡ ΡΠΈΡΠΈΠ½Ρ ΠΈ Π²ΡΡΠΎΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ. ΠΡΠΎ ΠΏΡΠ΅Π΄ΠΎΡΠ²ΡΠ°ΡΠ°Π΅Ρ ΡΠ»ΡΡΠ°ΠΉΠ½ΠΎΠ΅ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΡΠ°Π±Π»ΠΈΡΠ°ΠΌΠΈ ΡΡΠΈΠ»Π΅ΠΉ, ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ Π²ΡΡΡΠΎΠ΅Π½Π½ΡΠΉ ΡΡΠΈΠ»Ρ ΠΈΠΌΠ΅Π΅Ρ Π½Π°ΠΈΠ²ΡΡΡΠΈΠΉ ΠΏΡΠΈΠΎΡΠΈΡΠ΅Ρ.
ΠΡΠΈΠΌΠ΅Ρ
ΠΠΎΠΏΡΠΎΠ±ΡΠΉΡΠ΅ ΡΡΠΎΡ ΠΊΠΎΠ΄ Β» ΠΡΠΈΠΌΠ΅ΡΠ°Π½ΠΈΠ΅: Π Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡΠ΅ΡΡΡ ΡΠΊΠ°Π·ΡΠ²Π°ΡΡ Π°ΡΡΠΈΠ±ΡΡΡ width ΠΈ height Π΄Π»Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, ΡΡΠΎΠ±Ρ Π±ΡΠ°ΡΠ·Π΅Ρ ΠΌΠΎΠ³ Π²ΡΠ΄Π΅Π»ΠΈΡΡ ΡΡΠΎΠ»ΡΠΊΠΎ ΠΌΠ΅ΡΡΠ° Π΄Π»Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΏΠ΅ΡΠ΅Π΄ Π΅Π³ΠΎ Π·Π°Π³ΡΡΠ·ΠΊΠΎΠΉ. Π ΠΏΡΠΎΡΠΈΠ²Π½ΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ Π·Π°Π³ΡΡΠ·ΠΊΠ° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΌΠΎΠΆΠ΅Ρ ΠΏΡΠΈΠ²Π΅ΡΡΠΈ ΠΊ ΠΈΡΠΊΠ°ΠΆΠ΅Π½ΠΈΡ ΠΈΠ»ΠΈ ΠΌΠ΅ΡΡΠ°Π½ΠΈΡ ΠΌΠ°ΠΊΠ΅ΡΠ° Π²Π°ΡΠ΅Π³ΠΎ ΡΠ°ΠΉΡΠ°.
ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ HTML5
ΠΠ½ΠΎΠ³Π΄Π° ΡΠ²Π΅Π»ΠΈΡΠ΅Π½ΠΈΠ΅ ΠΈΠ»ΠΈ ΡΠΌΠ΅Π½ΡΡΠ΅Π½ΠΈΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π΄Π»Ρ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΡ ΡΠ°Π·Π»ΠΈΡΠ½ΡΠΌ ΡΡΡΡΠΎΠΉΡΡΠ²Π°ΠΌ (ΠΈΠ»ΠΈ ΡΠ°Π·ΠΌΠ΅ΡΠ°ΠΌ ΡΠΊΡΠ°Π½Π°) Π½Π΅ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ Π΄ΠΎΠ»ΠΆΠ½ΡΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ. ΠΡΠΎΠΌΠ΅ ΡΠΎΠ³ΠΎ, ΡΠΌΠ΅Π½ΡΡΠ΅Π½ΠΈΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ Π°ΡΡΠΈΠ±ΡΡΠ° ΠΈΠ»ΠΈ ΡΠ²ΠΎΠΉΡΡΠ²Π° width ΠΈ height Π½Π΅ ΡΠΌΠ΅Π½ΡΡΠ°Π΅Ρ ΠΈΡΡ
ΠΎΠ΄Π½ΡΠΉ ΡΠ°Π·ΠΌΠ΅Ρ ΡΠ°ΠΉΠ»Π°. ΠΠ»Ρ ΡΠ΅ΡΠ΅Π½ΠΈΡ ΡΡΠΈΡ
ΠΏΡΠΎΠ±Π»Π΅ΠΌ Π² HTML5 Π±ΡΠ» Π²Π²Π΅Π΄Π΅Π½ ΡΠ΅Π³ , ΠΊΠΎΡΠΎΡΡΠΉ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π²Π°ΠΌ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ Π²Π΅ΡΡΠΈΠΉ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π΄Π»Ρ ΡΠ°Π·Π½ΡΡ
ΡΠΈΠΏΠΎΠ² ΡΡΡΡΠΎΠΉΡΡΠ².
ΠΠ»Π΅ΠΌΠ΅Π½Ρ ΡΠΎΠ΄Π΅ΡΠΆΠΈΡ Π½ΠΎΠ»Ρ ΠΈΠ»ΠΈ Π±ΠΎΠ»Π΅Π΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² , ΠΊΠ°ΠΆΠ΄ΡΠΉ ΠΈΠ· ΠΊΠΎΡΠΎΡΡΡ
ΠΎΡΠ½ΠΎΡΠΈΡΡΡ ΠΊ ΡΠ°Π·Π½ΡΠΌ ΠΈΡΡΠΎΡΠ½ΠΈΠΊΠ°ΠΌ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, ΠΈ ΠΎΠ΄ΠΈΠ½ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π² ΠΊΠΎΠ½ΡΠ΅. Π’Π°ΠΊΠΆΠ΅ ΠΊΠ°ΠΆΠ΄ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΈΠΌΠ΅Π΅Ρ Π°ΡΡΠΈΠ±ΡΡ media , ΠΊΠΎΡΠΎΡΡΠΉ ΡΠΊΠ°Π·ΡΠ²Π°Π΅Ρ ΡΡΠ»ΠΎΠ²ΠΈΠ΅ ΠΌΡΠ»ΡΡΠΈΠΌΠ΅Π΄ΠΈΠ° (Π°Π½Π°Π»ΠΎΠ³ΠΈΡΠ½ΠΎ ΠΌΠ΅Π΄ΠΈΠ°Π·Π°ΠΏΡΠΎΡΡ), ΠΊΠΎΡΠΎΡΠΎΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠΌ Π΄Π»Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΡ ΡΠΎΠ³ΠΎ, ΠΊΠΎΠ³Π΄Π° ΡΠ»Π΅Π΄ΡΠ΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΊΠΎΠ½ΠΊΡΠ΅ΡΠ½ΡΠΉ ΠΈΡΡΠΎΡΠ½ΠΈΠΊ. ΠΠ°Π²Π°ΠΉΡΠ΅ ΠΏΠΎΠΏΡΠΎΠ±ΡΠ΅ΠΌ ΠΏΡΠΈΠΌΠ΅Ρ:
ΠΡΠΈΠΌΠ΅Ρ
ΠΠΎΠΏΡΠΎΠ±ΡΠΉΡΠ΅ ΡΡΠΎΡ ΠΊΠΎΠ΄ Β» <ΠΊΠ°ΡΡΠΈΠ½ΠΊΠ°>
ΠΡΠΈΠΌΠ΅ΡΠ°Π½ΠΈΠ΅: ΠΡΠ°ΡΠ·Π΅Ρ Π±ΡΠ΄Π΅Ρ ΠΎΡΠ΅Π½ΠΈΠ²Π°ΡΡ ΠΊΠ°ΠΆΠ΄ΡΠΉ Π΄ΠΎΡΠ΅ΡΠ½ΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΈ Π²ΡΠ±ΠΈΡΠ°ΡΡ ΡΡΠ΅Π΄ΠΈ Π½ΠΈΡ
Π½Π°ΠΈΠ»ΡΡΡΠ΅Π΅ ΡΠΎΠ²ΠΏΠ°Π΄Π΅Π½ΠΈΠ΅; Π΅ΡΠ»ΠΈ ΡΠΎΠ²ΠΏΠ°Π΄Π΅Π½ΠΈΠΉ Π½Π΅ Π½Π°ΠΉΠ΄Π΅Π½ΠΎ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ URL Π°ΡΡΠΈΠ±ΡΡΠ° src ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° .
ΠΡΠΎΠΌΠ΅ ΡΠΎΠ³ΠΎ, Π’Π΅Π³ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±ΡΡΡ ΡΠΊΠ°Π·Π°Π½ ΠΊΠ°ΠΊ ΠΏΠΎΡΠ»Π΅Π΄Π½ΠΈΠΉ Π΄ΠΎΡΠ΅ΡΠ½ΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
.
Π Π°Π±ΠΎΡΠ° Ρ ΠΊΠ°ΡΡΠ°ΠΌΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ
ΠΠ°ΡΡΠ° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π²Π°ΠΌ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΡΡ Π³ΠΎΡΡΡΠΈΠ΅ ΡΠΎΡΠΊΠΈ Π½Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΈ, ΠΊΠΎΡΠΎΡΡΠ΅ Π΄Π΅ΠΉΡΡΠ²ΡΡΡ ΠΊΠ°ΠΊ Π³ΠΈΠΏΠ΅ΡΡΡΡΠ»ΠΊΠΈ.
ΠΡΠ½ΠΎΠ²Π½Π°Ρ ΠΈΠ΄Π΅Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΊΠ°ΡΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ ΡΠΎΡΡΠΎΠΈΡ Π² ΡΠΎΠΌ, ΡΡΠΎΠ±Ρ ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²ΠΈΡΡ ΠΏΡΠΎΡΡΠΎΠΉ ΡΠΏΠΎΡΠΎΠ± ΡΠ²ΡΠ·Π°ΡΡ ΡΠ°Π·Π»ΠΈΡΠ½ΡΠ΅ ΡΠ°ΡΡΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, Π½Π΅ ΡΠ°Π·Π΄Π΅Π»ΡΡ Π΅Π³ΠΎ Π½Π° ΠΎΡΠ΄Π΅Π»ΡΠ½ΡΠ΅ ΡΠ°ΠΉΠ»Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, Π½Π° ΠΊΠ°ΡΡΠ΅ ΠΌΠΈΡΠ° ΠΊΠ°ΠΆΠ΄Π°Ρ ΡΡΡΠ°Π½Π° ΠΌΠΎΠΆΠ΅Ρ ΠΈΠΌΠ΅ΡΡ Π³ΠΈΠΏΠ΅ΡΡΡΡΠ»ΠΊΡ Π½Π° Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΡ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ ΠΎΠ± ΡΡΠΎΠΉ ΡΡΡΠ°Π½Π΅.
ΠΠ°Π²Π°ΠΉΡΠ΅ ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌ ΠΏΡΠΎΡΡΠΎΠΉ ΠΏΡΠΈΠΌΠ΅Ρ, ΡΡΠΎΠ±Ρ ΠΏΠΎΠ½ΡΡΡ, ΠΊΠ°ΠΊ ΡΡΠΎ Π½Π° ΡΠ°ΠΌΠΎΠΌ Π΄Π΅Π»Π΅ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ:
ΠΡΠΈΠΌΠ΅Ρ
ΠΠΎΠΏΡΠΎΠ±ΡΠΉΡΠ΅ ΡΡΠΎΡ ΠΊΠΎΠ΄ Β»<ΠΈΠΌΡ ΠΊΠ°ΡΡΡ="ΠΎΠ±ΡΠ΅ΠΊΡΡ">

png" title="ΠΈΠΊΠΎΠ½ΠΊΠ° ΡΠ°ΠΉΡΠ°">
<img src="/images/favicon.png" alt="Π·Π΄Π΅ΡΡ Π΄ΠΎΠ»ΠΆΠ½Π° Π±ΡΡΡ ΠΈΠΊΠΎΠ½ΠΊΠ° Π΄Π»Ρ ΡΠ°ΠΉΡΠ°"/>
<a/>
png"><img src="/images/favicon.png" title="ΠΈΠΊΠΎΠ½ΠΊΠ° ΡΠ°ΠΉΡΠ°"></a>
png " title="ΠΈΠΊΠΎΠ½ΠΊΠ° ΡΠ°ΠΉΡΠ°">ΡΠ°Π²ΠΈΠΊΠΎΠ½<a/>
jpg" alt="ΠΏΠΎΠΏΡΠ³Π°ΠΉ">
<ΠΈΠΌΡ ΠΊΠ°ΡΡΡ="ΠΎΠ±ΡΠ΅ΠΊΡΡ">