Π‘ΠΎΠ΄Π΅ΡΠΆΠ°Π½ΠΈΠ΅
ΠΠΈΠ½Π°ΠΌΠΈΡΠ΅ΡΠΊΠ°Ρ ΠΈΠ½ΡΠΎΠ³ΡΠ°ΡΠΈΠΊΠ°
ΠΠ½ΡΠΎΠ³ΡΠ°ΡΠΈΠΊΠ° β ΡΡΠΎ Π΄Π΅ΠΉΡΡΠ²Π΅Π½Π½ΡΠΉ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½Ρ Π΄Π»Ρ Π±ΠΈΠ·Π½Π΅ΡΠ°: Ρ Π΅Π΅ ΠΏΠΎΠΌΠΎΡΡΡ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡΠΈΠ²Π»Π΅ΠΊΠ°ΡΡ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ ΠΏΠΎΡΠ΅Π½ΡΠΈΠ°Π»ΡΠ½ΡΡ
ΠΏΠΎΠΊΡΠΏΠ°ΡΠ΅Π»Π΅ΠΉ Π² Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠ°Π· ΡΡΡΠ΅ΠΊΡΠΈΠ²Π½Π΅Π΅ ΠΏΠΎ ΡΡΠ°Π²Π½Π΅Π½ΠΈΡ Ρ ΠΎΠ±ΡΡΠ½ΠΎΠΉ ΡΠ΅ΠΊΠ»Π°ΠΌΠΎΠΉ (ΡΠ΅ΠΊΡΡ ΠΏΠ»ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΈΠ»ΠΈ ΡΠΎΡΠΎΡΠ½ΠΈΠΌΠΎΠΊ).
ΠΠ½ΡΠΎΠ³ΡΠ°ΡΠΈΠΊΠ° β ΡΠ²Π»Π΅Π½ΠΈΠ΅ Π΄ΠΎΠ²ΠΎΠ»ΡΠ½ΠΎ Π½ΠΎΠ²ΠΎΠ΅, Π΅Π΅ Π·Π°ΡΠ°ΡΠΊΠΈ Π² Π½Π°ΡΠ΅ΠΉ ΡΡΡΠ°Π½Π΅ ΠΏΠΎΡΠ²ΠΈΠ»ΠΈΡΡ Π²ΠΎ Π²ΡΠ΅ΠΌΠ΅Π½Π° Π‘Π‘Π‘Π , ΠΊΠΎΠ³Π΄Π° Π±ΡΠ»ΠΎ ΠΌΠΎΠ΄Π½ΠΎ ΡΠΈΡΠΎΠ²Π°ΡΡ ΡΠ°Π·Π»ΠΈΡΠ½ΡΠ΅ ΠΏΠ»Π°ΠΊΠ°ΡΡ, ΡΡ
Π΅ΠΌΡ ΠΈ ΠΏΡΠΎΡΠ΅Π΅. ΠΠΎ ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΠΎΠ΅ Π²ΠΎΠΏΠ»ΠΎΡΠ΅Π½ΠΈΠ΅ ΠΈΠ½ΡΠΎΠ³ΡΠ°ΡΠΈΠΊΠΈ ΠΏΠΎΡΠ²ΠΈΠ»ΠΎΡΡ Π»ΠΈΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ Π»Π΅Ρ Π½Π°Π·Π°Π΄, Π²ΠΌΠ΅ΡΡΠ΅ Ρ ΡΡΠ΅Π½Π΄ΠΎΠΌ Π½Π° Π²ΠΈΠ·ΡΠ°Π»ΠΈΠ·Π°ΡΠΈΡ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΈ.
ΠΠΈΠ·ΡΠ°Π»ΠΈΠ·ΠΈΡΠΎΠ²Π°ΡΡ Π²ΡΠ΅, ΡΡΠΎ ΡΠΎΠ»ΡΠΊΠΎ ΠΏΠΎΠ΄Π΄Π°Π΅ΡΡΡ Π²ΠΈΠ·ΡΠ°Π»ΠΈΠ·Π°ΡΠΈΠΈ β ΡΠ°ΠΊΠΎΠ² Π΄Π΅Π²ΠΈΠ· Π½ΡΠ½Π΅ΡΠ½ΠΈΡ
ΠΌΠ°ΡΠΊΠ΅ΡΠΎΠ»ΠΎΠ³ΠΎΠ², ΡΠ΅ΠΊΠ»Π°ΠΌΡΠΈΠΊΠΎΠ², Π±Π»ΠΎΠ³Π΅ΡΠΎΠ² ΠΈ ΠΆΡΡΠ½Π°Π»ΠΈΡΡΠΎΠ². Π ΠΎΠ½ΠΈ Π½Π΅ ΠΎΡΠΈΠ±Π°ΡΡΡΡ: Π²ΠΈΠ·ΡΠ°Π»ΠΈΠ·Π°ΡΠΈΡ ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ Π²ΡΠ΄Π΅Π»ΠΈΡΡ ΡΠΎΠΎΠ±ΡΠ΅Π½ΠΈΠ΅ ΠΈ ΡΠ²Π΅Π»ΠΈΡΠΈΠ²Π°Π΅Ρ Π΅Π³ΠΎ ΡΠ°Π½ΡΡ Π±ΡΡΡ ΠΏΡΠΎΡΠΈΡΠ°Π½Π½ΡΠΌ. Π―ΡΠΊΠ°Ρ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠ° ΠΏΡΠΈΠ²Π»Π΅ΠΊΠ°Π΅Ρ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, Π° ΠΎΡΠΎΠ·Π½Π°Π½ΠΈΠ΅ ΡΠΎΠ³ΠΎ, ΡΡΠΎ Π½Π΅ ΠΏΡΠΈΠ΄Π΅ΡΡΡ ΡΡΠ°ΡΠΈΡΡ ΠΌΠ½ΠΎΠ³ΠΎ Π²ΡΠ΅ΠΌΠ΅Π½ΠΈ Π½Π° ΠΎΠ·Π½Π°ΠΊΠΎΠΌΠ»Π΅Π½ΠΈΠ΅ Ρ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠ΅ΠΉ Π·Π°ΡΡΠ°Π²Π»ΡΠ΅Ρ Π½Π΅ ΠΏΡΠΎΠΉΡΠΈ ΠΌΠΈΠΌΠΎ, Π° Π²Π·Π³Π»ΡΠ½ΡΡΡ Π½Π° ΠΈΠ½ΡΠΎΠ³ΡΠ°ΡΠΈΠΊΡ. ΠΠ· ΡΡΠΎΠ³ΠΎ Π²ΡΠ΅Π³ΠΎ ΡΡΠ°Π½ΠΎΠ²ΡΡΡΡ ΡΡΠ½Ρ ΡΠ΅Π½Π΄Π΅Π½ΡΠΈΠΈ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΡ ΡΠ΅ΡΠΈΠΏΠΈΠ΅Π½ΡΠΎΠ²:
-
Π Π΅ΡΠΈΠΏΠΈΠ΅Π½Ρ Π·Π½Π°Π΅Ρ, ΡΡΠΎ Π² ΠΈΠ½ΡΠ΅ΡΠ½Π΅ΡΠ΅ Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡ ΠΎΠ³ΡΠΎΠΌΠ½ΡΠΉ ΠΎΠ±ΡΠ΅ΠΌ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΈ, ΠΏΠΎΡΡΠΎΠΌΡ ΠΏΡΠ΅Π΄ΠΏΠΎΡΡΠ΅Π½ΠΈΠ΅ ΠΎΡΠ΄Π°Π΅Ρ ΡΠΎΠ»ΡΠΊΠΎ ΡΡΠΊΠΎΠΌΡ, Β«ΡΠ΅ΠΏΠ»ΡΡΡΠ΅ΠΌΡΒ» ΠΊΠΎΠ½ΡΠ΅Π½ΡΡ β Π½ΠΈΠΊΡΠΎ Π½Π΅ ΡΡΠ°Π½Π΅Ρ ΡΠΈΡΠ°ΡΡ Π΄ΠΎ ΠΊΠΎΠ½ΡΠ° ΡΠΊΡΡΠ½ΡΡ ΡΡΠ°ΡΡΡ. -
Π‘ΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΡΠΉ ΡΠΈΡΠ°ΡΠ΅Π»Ρ Π·Π½Π°Π΅Ρ ΠΎΡΠ΅Π½Ρ ΠΌΠ½ΠΎΠ³ΠΎ, Π° ΡΠ°ΠΊΠΆΠ΅ ΠΏΠΎΠ½ΠΈΠΌΠ°Π΅Ρ, ΠΊΠ°ΠΊ ΠΏΡΠΎΠ²Π΅ΡΡΡΡ Π΄Π°Π½Π½ΡΠ΅ Π½Π° Π΄ΠΎΡΡΠΎΠ²Π΅ΡΠ½ΠΎΡΡΡ. ΠΠΎΡΡΠΎΠΌΡ ΠΎΠ½ Π²ΡΠ±ΠΈΡΠ°Π΅Ρ ΡΠΎΠ»ΡΠΊΠΎ ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅Π½Π½ΡΠΉ ΠΊΠΎΠ½ΡΠ΅Π½Ρ, Π΄Π΅ΠΉΡΡΠ²ΠΈΡΠ΅Π»ΡΠ½ΠΎ Π½Π΅ΡΡΡΠΈΠΉ ΡΡΠΎ-ΡΠΎ Π²Π°ΠΆΠ½ΠΎΠ΅ ΠΈ Π½ΠΎΠ²ΠΎΠ΅ Π΄Π»Ρ Π½Π΅Π³ΠΎ. -
Π§ΠΈΡΠ°ΡΠ΅Π»Ρ Π½Π΅ Ρ ΠΎΡΠ΅Ρ ΡΡΠ°ΡΠΈΡΡ ΠΌΠ½ΠΎΠ³ΠΎ Π²ΡΠ΅ΠΌΠ΅Π½ΠΈ Π½Π° ΠΎΠ·Π½Π°ΠΊΠΎΠΌΠ»Π΅Π½ΠΈΠ΅ Ρ ΡΠΎΠΎΠ±ΡΠ΅Π½ΠΈΠ΅ΠΌ, Π΅ΠΌΡ Π²Π°ΠΆΠ½Π° Π±ΡΡΡΡΠΎΡΠ°.
ΠΡΠ΅ΠΌ ΠΊΡΠΈΡΠ΅ΡΠΈΡΠΌ, ΠΏΠΎ ΠΊΠΎΡΠΎΡΡΠΌ ΡΠ΅ΡΠΈΠΏΠΈΠ΅Π½Ρ ΠΎΡΠ±ΠΈΡΠ°Π΅Ρ ΠΊΠΎΠ½ΡΠ΅Π½Ρ Π΄Π»Ρ ΠΎΠ·Π½Π°ΠΊΠΎΠΌΠ»Π΅Π½ΠΈΡ, ΠΎΡΠ²Π΅ΡΠ°Π΅Ρ ΠΈΠ½ΡΠΎΠ³ΡΠ°ΡΠΈΠΊΠ° β ΠΊΠΎΠ½Π΅ΡΠ½ΠΎ ΠΆΠ΅, Π΅ΡΠ»ΠΈ ΠΎΠ½Π° ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅Π½Π½ΠΎ ΡΠ΄Π΅Π»Π°Π½Π°.
ΠΠΈΠ΄Ρ ΠΈΠ½ΡΠΎΠ³ΡΠ°ΡΠΈΠΊΠΈ: ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΠ°Ρ ΠΈ Π΄ΠΈΠ½Π°ΠΌΠΈΡΠ΅ΡΠΊΠ°Ρ
ΠΡΠ»ΠΈ ΡΠ°ΡΡΠΌΠ°ΡΡΠΈΠ²Π°ΡΡ ΡΠΏΠΎΡΠΎΠ± ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΈ, ΠΈΠ½ΡΠΎΠ³ΡΠ°ΡΠΈΠΊΡ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΠ΄Π΅Π»ΠΈΡΡ Π½Π° Π΄Π²Π° ΡΠΈΠΏΠ°:
-
Π‘ΡΠ°ΡΠΈΡΠ½Π°Ρ β ΠΏΠ΅ΡΠ΅Π΄Π°ΡΠ° ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΈ ΡΠ΅ΡΠ΅Π· Π³ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅, Π»ΠΈΡΠ΅Π½Π½ΠΎΠ΅ Π΄Π²ΠΈΠ³Π°ΡΡΠΈΡ ΡΡ, ΠΈΠ·ΠΌΠ΅Π½ΡΡΡΠΈΡ ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ². -
ΠΠΈΠ½Π°ΠΌΠΈΡΠ΅ΡΠΊΠ°Ρ β ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½ΠΈΠ΅ Π΄Π°Π½Π½ΡΡ Π² Π²ΠΈΠ΄Π΅ Π΄Π²ΠΈΠΆΡΡΠ΅ΠΉΡΡ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ, Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΎΠ½Π½ΡΡ ΡΡΡΠ΅ΠΊΡΠΎΠ².
ΠΠΈΠ½Π°ΠΌΠΈΡΠ΅ΡΠΊΠ°Ρ ΠΈΠ½ΡΠΎΠ³ΡΠ°ΡΠΈΠΊΠ° β ΡΡΠΎ, ΠΌΠΎΠΆΠ½ΠΎ ΡΠΊΠ°Π·Π°ΡΡ, ΡΠ»Π΅Π΄ΡΡΡΠ°Ρ ΡΡΡΠΏΠ΅Π½Ρ ΡΠ°Π·Π²ΠΈΡΠΈΡ, ΠΎΠ½Π° ΠΏΠΎΡΠ²ΠΈΠ»Π°ΡΡ Π²ΡΠ»Π΅Π΄ Π·Π° ΡΡΠ°ΡΠΈΡΡΠΈΡΠ΅ΡΠΊΠΎΠΉ ΠΈ ΡΠ²Π΅ΡΠ΅Π½Π½ΠΎ Π·Π°Π²ΠΎΠ΅Π²ΡΠ²Π°Π΅Ρ ΠΏΠΎΡΡΠ΅Π±ΠΈΡΠ΅Π»Π΅ΠΉ ΠΏΠΎ Π²ΡΠ΅ΠΌΡ ΠΌΠΈΡΡ. Π Π½Π΅ ΡΠ΄ΠΈΠ²ΠΈΡΠ΅Π»ΡΠ½ΠΎ, Π²Π΅Π΄Ρ ΡΡΠΎ ΠΌΠΎΠΆΠ΅Ρ ΠΏΡΠΈΠ²Π»Π΅ΠΊΠ°ΡΡ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ ΡΠΈΠ»ΡΠ½Π΅Π΅, Π½Π΅ΠΆΠ΅Π»ΠΈ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠ°? ΠΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎ β Π΄Π²ΠΈΠΆΡΡΠ°ΡΡΡ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠ°.
ΠΠΎΠ΄Π²ΠΈΠ΄Ρ Π΄ΠΈΠ½Π°ΠΌΠΈΡΠ΅ΡΠΊΠΎΠΉ ΠΈΠ½ΡΠΎΠ³ΡΠ°ΡΠΈΠΊΠΈ
ΠΠ°ΠΊ ΠΌΡ ΠΏΠΎΠ½ΠΈΠΌΠ°Π΅ΠΌ, Π΄Π²ΠΈΠΆΡΡΠ°ΡΡΡ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠ° β ΡΡΠΎ Π΄ΠΎΠ²ΠΎΠ»ΡΠ½ΠΎ ΡΠ°Π·ΠΌΡΡΠΎΠ΅ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΠ΅. ΠΠ»Ρ ΠΏΠΎΠ»Π½ΠΎΠ³ΠΎ ΠΏΠΎΠ½ΠΈΠΌΠ°Π½ΠΈΡ ΡΡΡΠΈ Π΄ΠΈΠ½Π°ΠΌΠΈΡΠ΅ΡΠΊΠΎΠΉ ΠΈΠ½ΡΠΎΠ³ΡΠ°ΡΠΈΠΊΠΈ Π½ΡΠΆΠ½ΠΎ Π΄Π΅ΡΠ°Π»ΡΠ½Π΅Π΅ ΡΠ°ΡΡΠΌΠΎΡΡΠ΅ΡΡ Π΅Π΅ ΠΏΠΎΠ΄Π²ΠΈΠ΄Ρ:
-
ΠΠΈΠ΄Π΅ΠΎΠΈΠ½ΡΠΎΠ³ΡΠ°ΡΠΈΠΊΠ°. ΠΡΠΎ Π²ΠΈΠ΄Π΅ΠΎΡΠΎΠ»ΠΈΠΊ, ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΠΈΠΉ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ ΠΈ ΠΏΡΠΎΡΠ΅ΡΡΡ: ΠΈΠ·Π½Π°ΡΠ°Π»ΡΠ½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π΄ΠΎΠΏΠΎΠ»Π½ΡΠ΅ΡΡΡ Π½ΠΎΠ²ΡΠΌΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ, ΠΌΠ΅Π½ΡΠ΅ΡΡΡ, ΠΏΠΎΡΠ²Π»ΡΠ΅ΡΡΡ ΠΎΡΡΡΠ΅Π½ΠΈΡ Π΄Π²ΠΈΠΆΠ΅Π½ΠΈΡ. ΠΡΠ΅ ΡΡΠΎ Π·Π°Ρ Π²Π°ΡΡΠ²Π°Π΅Ρ ΡΠ΅ΡΠΈΠΏΠΈΠ΅Π½ΡΠ° ΠΈ Π·Π°ΡΡΠ°Π²Π»ΡΠ΅Ρ Π΅Π³ΠΎ Π΄ΠΎΡΠΌΠΎΡΡΠ΅ΡΡ ΡΠΎΠ»ΠΈΠΊ Π΄ΠΎ ΠΊΠΎΠ½ΡΠ°. ΠΠΎΠ»Π΅Π΅ ΡΠΎΠ³ΠΎ, ΡΠ΅ΠΉΡΠ°Ρ Π΅ΡΡΡ ΡΠ΅Ρ Π½ΠΎΠ»ΠΎΠ³ΠΈΠΈ (Flash, JavaScript ΠΈ ΠΏΡΠΎΡΠΈΠ΅), ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡΡ ΡΠ΅ΠΊΡΡΠΎΠ²ΡΠ΅ Π±Π»ΠΎΠΊΠΈ ΠΈ Π³ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°ΡΡ ΠΏΡΡΠΌΠΎ ΠΏΠΎΠ²Π΅ΡΡ ΡΠ½ΡΡΠΎΠ³ΠΎ Π²ΠΈΠ΄Π΅ΠΎ β ΡΡΠΎ ΡΠΎΠ·Π΄Π°Π΅Ρ Π½Π΅Π²Π΅ΡΠΎΡΡΠ½ΡΠΉ ΡΡΡΠ΅ΠΊΡ, ΡΠ°ΡΡΠΈΡΡΠ΅Ρ ΡΠ°ΠΌΠΊΠΈ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΎΠ½Π½ΠΎΠ³ΠΎ ΠΏΡΠΎΠ΄ΡΠΊΡΠ° ΠΈ ΡΠ²Π΅Π»ΠΈΡΠΈΠ²Π°Π΅Ρ Π΅Π³ΠΎ ΡΠΈΠ»Ρ ΡΠ±Π΅ΠΆΠ΄Π΅Π½ΠΈΡ. -
ΠΠ½ΠΈΠΌΠ°ΡΠΈΡ. ΠΠ½ΠΈΠΌΠΈΡΠΎΠ²Π°Π½Π½Π°Ρ ΠΈΠ½ΡΠΎΠ³ΡΠ°ΡΠΈΠΊΠ° ΡΠ°ΠΊΠΆΠ΅ ΡΠ΅ΠΉΡΠ°Ρ Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡ Π½Π° ΠΏΠΈΠΊΠ΅ ΠΏΠΎΠΏΡΠ»ΡΡΠ½ΠΎΡΡΠΈ: Π΅Π΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡ Π² ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ°Ρ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ, Π² ΡΠ΅ΠΊΠ»Π°ΠΌΠ΅, ΠΊΠ°ΠΊ ΡΠ°ΠΌΠΎΡΡΠΎΡΡΠ΅Π»ΡΠ½ΡΠΉ ΠΊΠΎΠ½ΡΠ΅Π½Ρ Π² ΡΠΎΡΠΈΠ°Π»ΡΠ½ΡΡ ΡΠ΅ΡΡΡ ΠΈ Π±Π»ΠΎΠ³Π°Ρ , ΠΊΠ°ΠΊ Π΄ΠΎΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ ΠΊ ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠΌΡ ΠΌΠ°ΡΠ΅ΡΠΈΠ°Π»Ρ Π² ΡΡΠ΅Π΄ΡΡΠ²Π°Ρ ΠΌΠ°ΡΡΠΎΠ²ΠΎΠΉ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΈ ΠΈ ΡΠ°ΠΊ Π΄Π°Π»Π΅Π΅. -
ΠΡΠ΅Π·Π΅Π½ΡΠ°ΡΠΈΡ. ΠΡΠΎ Π΅ΡΠ΅ ΠΎΠ΄ΠΈΠ½ ΠΏΠΎΠ΄Π²ΠΈΠ΄ Π΄ΠΈΠ½Π°ΠΌΠΈΡΠ΅ΡΠΊΠΎΠΉ ΠΈΠ½ΡΠΎΠ³ΡΠ°ΡΠΈΠΊΠΈ. ΠΠ½ Π·Π°ΠΊΠ»ΡΡΠ°Π΅ΡΡΡ Π² ΠΏΠΎΠ΄Π°ΡΠ΅ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΡ Π΄Π°Π½Π½ΡΡ (ΡΡΠ°ΡΠΈΡΠ½ΡΡ ΠΊΠ°ΡΡΠΈΠ½ΠΎΠΊ) ΠΏΠΎ ΠΎΡΠ΅ΡΠ΅Π΄ΠΈ, Π² Π²ΠΈΠ΄Π΅ ΡΠ»Π°ΠΉΠ΄-ΡΠΎΡ. Π’Π°ΠΊΠΎΠ΅ Π΄Π²ΠΈΠΆΠ΅Π½ΠΈΠ΅ ΡΠ°ΠΊΠΆΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠ²Π½ΠΎ Π²Π»ΠΈΡΠ΅Ρ Π½Π° Π²ΠΎΡΠΏΡΠΈΡΡΠΈΠ΅ ΡΠ΅ΡΠΈΠΏΠΈΠ΅Π½ΡΠΎΠΌ. ΠΠΎΠ΄Ρ ΠΎΠ΄ΠΈΡ ΡΡΠΎΡ ΡΠΏΠΎΡΠΎΠ± Π΄Π»Ρ ΡΠ΅Ρ ΡΠ»ΡΡΠ°Π΅Π², ΠΊΠΎΠ³Π΄Π° Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ ΠΏΡΠΎΠ΄Π΅ΠΌΠΎΠ½ΡΡΡΠΈΡΠΎΠ²Π°ΡΡ Π±ΠΎΠ»ΡΡΠΎΠΉ ΠΎΠ±ΡΠ΅ΠΌ Π΄Π°Π½Π½ΡΡ .
ΠΠΈΠ½Π°ΠΌΠΈΡΠ΅ΡΠΊΠ°Ρ ΠΈΠ½ΡΠΎΠ³ΡΠ°ΡΠΈΠΊΠ°: ΡΠΎΠ²Π΅ΡΡ ΠΏΠΎ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ
ΠΡΠ°ΠΊ, ΡΡΠΎΠ±Ρ ΡΠΎΠ·Π΄Π°ΡΡ ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅Π½Π½ΡΡ ΠΈ ΡΠ°Π±ΠΎΡΠ°ΡΡΡΡ Π΄ΠΈΠ½Π°ΠΌΠΈΡΠ΅ΡΠΊΡΡ ΠΈΠ½ΡΠΎΠ³ΡΠ°ΡΠΈΠΊΡ, Π½ΡΠΆΠ½ΠΎ:
-
ΠΡΠΎΠ΄ΡΠΌΠ°ΡΡ ΠΈΠ΄Π΅Ρ Π²Π°ΡΠ΅Π³ΠΎ ΠΏΡΠΎΠ΅ΠΊΡΠ°, ΠΏΡΠΎΠ°Π½Π°Π»ΠΈΠ·ΠΈΡΠΎΠ²Π°ΡΡ ΡΠ΅Π»ΠΈ ΠΈ ΡΠ΅ Π΄Π°Π½Π½ΡΠ΅, ΡΡΠΎ ΠΈΠΌΠ΅ΡΡΡΡ Π² Π½Π°Π»ΠΈΡΠΈΠΈ (Π±ΡΠΊΠ³ΡΠ°ΡΠ½Π΄). -
ΠΡΡ ΠΎΠ΄Ρ ΠΈΠ· ΡΡΠΎΠ³ΠΎ, Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ Π²ΡΠ±ΡΠ°ΡΡ ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΡΠΉ ΡΠΎΡΠΌΠ°Ρ (ΠΏΠΎΠ΄Π²ΠΈΠ΄) Π΄ΠΈΠ½Π°ΠΌΠΈΡΠ΅ΡΠΊΠΎΠΉ ΠΈΠ½ΡΠΎΠ³ΡΠ°ΡΠΈΠΊΠΈ β Π²ΠΈΠ΄Π΅ΠΎ, Π°Π½ΠΈΠΌΠ°ΡΠΈΡ ΠΈΠ»ΠΈ ΡΠ»Π°ΠΉΠ΄-ΡΠΎΡ. -
ΠΡΡΠ΅Π΄Π°ΠΊΡΠΈΡΡΠΉΡΠ΅ ΠΈΠ·Π½Π°ΡΠ°Π»ΡΠ½ΡΠΉ ΠΌΠ°ΡΡΠΈΠ² ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΈ, ΠΎΡΡΠ°Π²ΠΈΠ² ΡΠΎΠ»ΡΠΊΠΎ ΡΠ°ΠΌΠΎΠ΅ Π½ΡΠΆΠ½ΠΎΠ΅ ΠΈ Π²Π°ΠΆΠ½ΠΎΠ΅. -
ΠΡΠΎΠ΄ΡΠΌΠ°ΠΉΡΠ΅ Π²Π·Π°ΠΈΠΌΠΎΡΠ²ΡΠ·ΠΈ ΠΌΠ΅ΠΆΠ΄Ρ ΠΎΠ±ΡΠ΅ΠΊΡΠ°ΠΌΠΈ ΠΈΠ½ΡΠΎΠ³ΡΠ°ΡΠΈΠΊΠΈ ΠΈ Π΄ΠΈΠ½Π°ΠΌΠΈΠΊΡ: ΠΊΠ°ΠΆΠ΄ΠΎΠ΅ Π΄Π²ΠΈΠΆΠ΅Π½ΠΈΠ΅ Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±ΡΡΡ ΠΎΡΠΌΡΡΠ»Π΅Π½Π½ΡΠΌ, ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°ΡΡ ΠΊΠ°ΠΊΠΎΠ΅-ΡΠΎ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΠΈΠ»ΠΈ ΠΏΡΠΎΡΠ΅ΡΡ.ΠΠΈΠ³Π°ΡΡΠΈΠ΅ Π»Π°ΠΌΠΏΠΎΡΠΊΠΈ ΠΈ Π»Π΅ΡΠ°ΡΡΠΈΠ΅ Π·Π²Π΅Π·Π΄ΠΎΡΠΊΠΈ Π΄Π»Ρ ΠΊΡΠ°ΡΠΎΡΡ β Π½Π΅Π΄ΠΎΠΏΡΡΡΠΈΠΌΠΎ.
-
ΠΠ΅ Π·Π°Π±ΡΠ΄ΡΡΠ΅ ΠΎ Π±ΡΠ΅Π½Π΄ΠΈΡΠΎΠ²Π°Π½ΠΈΠΈ β ΡΠ°ΠΊ Π²Ρ Π·Π°ΡΡΠ°Π²ΠΈΡΠ΅ ΠΈΠ½ΡΠΎΠ³ΡΠ°ΡΠΈΠΊΡ ΡΠ°Π±ΠΎΡΠ°ΡΡ Π½Π° Π²Π°Ρ Π±ΠΈΠ·Π½Π΅Ρ. -
ΠΠΎΡΡΠ°ΡΠ°ΠΉΡΠ΅ΡΡ Π²ΠΎΠΏΠ»ΠΎΡΠΈΡΡ Π·Π°Π΄ΡΠΌΠ°Π½Π½ΠΎΠ΅ Π² ΠΆΠΈΠ·Π½Ρ Π² Π½ΡΠΆΠ½ΠΎΠΌ ΡΠΎΡΠΌΠ°ΡΠ΅.
Π’Π°ΠΊ ΠΊΠ°ΠΊ ΡΠΎΠ·Π΄Π°Π½ΠΈΠ΅ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ ΠΈ Π²ΠΈΠ΄Π΅ΠΎ β ΠΏΡΠΎΡΠ΅ΡΡ Π½Π°ΠΌΠ½ΠΎΠ³ΠΎ Π±ΠΎΠ»Π΅Π΅ ΡΠ»ΠΎΠΆΠ½ΡΠΉ, Π½Π΅ΠΆΠ΅Π»ΠΈ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠ° ΠΏΡΠ΅Π·Π΅Π½ΡΠ°ΡΠΈΠΈ, ΡΠΎ ΠΏΡΠΈΠ΄Π΅ΡΡΡ Π²ΡΠ΅ ΡΠ°Π²Π½ΠΎ ΠΎΠ±ΡΠ°ΡΠ°ΡΡΡΡ ΠΊ ΡΠΏΠ΅ΡΠΈΠ°Π»ΠΈΡΡΠ°ΠΌ. Π§Π΅Π»ΠΎΠ²Π΅ΠΊ Π±Π΅Π· ΠΎΠΏΡΡΠ° ΠΈ ΠΏΡΠΎΡΠ΅ΡΡΠΈΠΎΠ½Π°Π»ΡΠ½ΡΡ
Π½Π°Π²ΡΠΊΠΎΠ² Π½Π΅ ΡΠΌΠΎΠΆΠ΅Ρ ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅Π½Π½ΠΎ Π²ΡΠΏΠΎΠ»Π½ΠΈΡΡ Π΄ΠΈΠ½Π°ΠΌΠΈΡΠ΅ΡΠΊΡΡ ΠΈΠ½ΡΠΎΠ³ΡΠ°ΡΠΈΠΊΡ. Π ΠΌΡ ΡΡΠΎ ΠΌΠΎΠΆΠ΅ΠΌ β ΠΏΡΠΈΡ
ΠΎΠ΄ΠΈΡΠ΅ Π² Π±ΡΡΠΎ ΠΏΡΠ΅Π·Π΅Π½ΡΠ°ΡΠΈΠΉ Powers ΠΈ ΡΠ±Π΅Π΄ΠΈΡΠ΅ΡΡ Π² ΡΡΠΎΠΌ.
ΠΠ΄Π°ΠΏΡΠΈΠ²Π½ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ — ΠΠ·ΡΡΠ΅Π½ΠΈΠ΅ Π²Π΅Π±-ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠΈ
- ΠΠ°Π·Π°Π΄
- ΠΠ±Π·ΠΎΡ: Multimedia and embedding
- ΠΠ°Π»Π΅Π΅
Π Π΄Π°Π½Π½ΠΎΠΉ ΡΡΠ°ΡΡΠ΅ ΠΌΡ ΠΈΠ·ΡΡΠΈΠΌ ΠΊΠΎΠ½ΡΠ΅ΠΏΡΠΈΡ Π³ΠΈΠ±ΠΊΠΈΡ
(responsive) ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ β ΡΠ°ΠΊΠΈΡ
, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ Ρ
ΠΎΡΠΎΡΠΎ Π½Π° ΡΡΡΡΠΎΠΉΡΡΠ²Π°Ρ
Ρ ΡΠΈΠ»ΡΠ½ΠΎ ΠΎΡΠ»ΠΈΡΠ°ΡΡΠΈΠΌΠΈΡΡ ΡΠ°Π·ΠΌΠ΅ΡΠ°ΠΌΠΈ ΡΠΊΡΠ°Π½Π°, ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ΠΌ, ΠΈ Π΄ΡΡΠ³ΠΈΠΌΠΈ Ρ
Π°ΡΠ°ΠΊΡΠ΅ΡΠΈΡΡΠΈΠΊΠ°ΠΌΠΈ β ΠΈ ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΡ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΈΠΌΠ΅ΡΡΡΡ Π² HTML Π΄Π»Ρ ΠΈΡ
ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΠΈ. Responsive images — ΡΠΎΠ»ΡΠΊΠΎ ΠΎΠ΄Π½Π° ΡΠ°ΡΡΡ (ΠΈ Ρ
ΠΎΡΠΎΡΠ΅Π΅ Π½Π°ΡΠ°Π»ΠΎ) Π³ΠΈΠ±ΠΊΠΎΠ³ΠΎ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π°, ΡΠ΅ΠΌΡ, ΠΊΠΎΡΠΎΡΠ°Ρ Π±ΡΠ΄Π΅Ρ ΡΠ°ΡΡΠΌΠΎΡΡΠ΅Π½Π° ΠΏΠΎΠ΄ΡΠΎΠ±Π½Π΅Π΅ Π² Π±ΡΠ΄ΡΡΠ΅ΠΌ ΠΌΠΎΠ΄ΡΠ»Π΅ Π½Π° ΡΠ΅ΠΌΡ CSS.
Π’ΡΠ΅Π±ΠΎΠ²Π°Π½ΠΈΡ: | ΠΡΠ΅Π΄ΠΏΠΎΠ»Π°Π³Π°Π΅ΡΡΡ, ΡΡΠΎ Π²Ρ ΡΠΆΠ΅ Π·Π½Π°ΠΊΠΎΠΌΡ Ρ ΠΎΡΠ½ΠΎΠ²Π°ΠΌΠΈ HTML ΠΈ ΡΠΌΠ΅Π΅ΡΠ΅ Π΄ΠΎΠ±Π°Π²Π»ΡΡΡ ΡΡΠ°ΡΠΈΡΠ½ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π½Π° Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΡ. |
---|---|
Π¦Π΅Π»Ρ: | Π£Π·Π½Π°ΡΡ, ΠΊΠ°ΠΊ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠ°ΠΊΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ, ΠΊΠ°ΠΊ srcset ΠΈ <picture> ΡΡΠΎΠ±Ρ ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠΈΡΡ ΡΠ°Π±ΠΎΡΡ Π³ΠΈΠ±ΠΊΠΈΡ
ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π½Π° Π²Π΅Π±-ΡΠ°ΠΉΡΠ°Ρ
. |
ΠΠ°ΠΊΡΡ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ ΠΌΡ ΠΏΡΡΠ°Π΅ΠΌΡΡ ΡΠ΅ΡΠΈΡΡ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΠΌΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡΠΌΠΈ? ΠΠ°Π²Π°ΠΉΡΠ΅ ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌ ΡΠΈΠΏΠΈΡΠ½ΡΠΉ ΡΡΠ΅Π½Π°ΡΠΈΠΉ. ΠΠ±ΡΡΠ½ΡΠΉ Π²Π΅Π±-ΡΠ°ΠΉΡ ΠΌΠΎΠΆΠ΅Ρ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π² Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ΅, Π΄Π»Ρ ΡΠ»ΡΡΡΠ΅Π½ΠΈΡ Π²ΠΈΠ·ΡΠ°Π»ΡΠ½ΠΎΠ³ΠΎ Π²ΠΎΡΠΏΡΠΈΡΡΠΈΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΌ, Π° ΡΠ°ΠΊΠΆΠ΅ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ Π² ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ΅ ΠΏΠΎΠ΄ Π½ΠΈΠΌ. ΠΡ, Π²Π΅ΡΠΎΡΡΠ½ΠΎ, Π·Π°Ρ ΠΎΡΠΈΡΠ΅, ΡΡΠΎΠ±Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π² Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ΅ Π·Π°Π½ΠΈΠΌΠ°Π»ΠΎ Π²ΡΡ ΡΠΈΡΠΈΠ½Ρ ΠΎΠΊΠ½Π°, Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π² ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΠ°Π»ΠΈΡΡ Π³Π΄Π΅-ΡΠΎ Π²Π½ΡΡΡΠΈ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ Ρ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠΎΠΌ. ΠΠ°Π²Π°ΠΉΡΠ΅ ΠΏΠΎΡΠΌΠΎΡΡΠΈΠΌ Π½Π° ΡΠ»Π΅Π΄ΡΡΡΠΈΠΉ ΠΏΡΠΎΡΡΠΎΠΉ ΠΏΡΠΈΠΌΠ΅Ρ:
Π’Π°ΠΊΠ°Ρ Π²ΡΡΡΡΠΊΠ° Ρ
ΠΎΡΠΎΡΠΎ Π²ΡΠ³Π»ΡΠ΄ΠΈΡ Π½Π° ΡΠΈΡΠΎΠΊΠΎΡΠΎΡΠΌΠ°ΡΠ½ΡΡ
ΡΠΊΡΠ°Π½Π°Ρ
Π½ΠΎΡΡΠ±ΡΠΊΠΎΠ² ΠΈ Π½Π°ΡΡΠΎΠ»ΡΠ½ΡΡ
ΠΠ, (Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΠΎΡΠΌΠΎΡΡΠ΅ΡΡ ΠΏΠΎΡΠΌΠΎΡΡΠ΅ΡΡ Π΄Π΅ΠΌΠΎ-ΠΏΡΠΈΠΌΠ΅Ρ ΠΈ Π½Π°ΠΉΡΠΈ ΠΈΡΡ
ΠΎΠ΄Π½ΡΠΉ ΠΊΠΎΠ΄ Π½Π° Github. ) ΠΡ Π½Π΅ Π±ΡΠ΄Π΅ΠΌ ΠΏΠΎΠ΄ΡΠΎΠ±Π½ΠΎ ΡΠ°ΡΡΠΌΠ°ΡΡΠΈΠ²Π°ΡΡ CSS, ΡΠΊΠ°ΠΆΠ΅ΠΌ ΡΠΎΠ»ΡΠΊΠΎ ΡΠ»Π΅Π΄ΡΡΡΠ΅Π΅:
- Π‘ΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠΌΡ ΡΠ΅Π³Π°
main
Π·Π°Π΄Π°Π½Π° ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½Π°Ρ ΡΠΈΡΠΈΠ½Π° 1200 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ. ΠΡΠ»ΠΈ ΡΠΈΡΠΈΠ½Π° ΠΎΠΊΠ½Π° Π±ΡΠ°ΡΠ·Π΅ΡΠ° Π±ΠΎΠ»ΡΡΠ΅ ΡΡΠΎΠ³ΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΡ, ΡΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ ΡΠ°ΠΉΡΠ° ΠΎΡΡΠ°ΡΡΡΡ Π½Π° 1200 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ ΠΈ ΡΠ΅Π½ΡΡΠΈΡΡΠ΅Ρ ΡΠ΅Π±Ρ Π² Π΄ΠΎΡΡΡΠΏΠ½ΠΎΠΌ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²Π΅. ΠΡΠ»ΠΈ ΡΠΈΡΠΈΠ½Π° ΠΎΠΊΠ½Π° Π±ΡΠ°ΡΠ·Π΅ΡΠ° ΠΌΠ΅Π½ΡΡΠ΅, ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅ΡΡΡ Π² 100% ΠΎΡ ΡΠΈΡΠΈΠ½Ρ ΡΠΊΡΠ°Π½Π°. - ΠΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π² ΡΠ°ΠΏΠΊΠ΅ Π²ΡΠ΅Π³Π΄Π° Π±ΡΠ΄Π΅Ρ ΠΎΡΡΠ°Π²Π°ΡΡΡΡ Π² ΡΠ΅Π½ΡΡΠ΅ ΡΠ΅Π³Π° header Π²Π½Π΅ Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ ΡΠΈΡΠΈΠ½Ρ Π±ΡΠ°ΡΠ·Π΅ΡΠ°. ΠΡΠ»ΠΈ ΡΠ°ΠΉΡ Π±ΡΠ΄Π΅Ρ ΠΏΡΠΎΡΠΌΠ°ΡΡΠΈΠ²Π°ΡΡΡΡ Π½Π° ΡΠ·ΠΊΠΈΡ ΡΠΊΡΠ°Π½Π°Ρ , ΡΠΎ Π²Π°ΠΆΠ½ΡΠ΅ Π΄Π΅ΡΠ°Π»ΠΈ Π² ΡΠ΅Π½ΡΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ (Π»ΡΠ΄ΠΈ) Π²ΡΡ ΡΠ°Π²Π½ΠΎ Π±ΡΠ΄ΡΡ Π²ΠΈΠ΄Π½Ρ. ΠΡΠ΅, ΡΡΠΎ Π²ΡΡ ΠΎΠ΄ΠΈΡ Π·Π° ΠΏΡΠ΅Π΄Π΅Π»Ρ ΡΠΈΡΠΈΠ½Ρ ΡΠΊΡΠ°Π½Π° Π±ΡΠ΄Π΅Ρ ΡΠΊΡΡΡΠΎ. ΠΡΡΠΎΡΠ° ΡΠ°ΠΏΠΊΠΈ 200 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ.
- ΠΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π² ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠΌ Π·Π°Π΄Π°Π½Ρ ΡΠ°ΠΊ, ΡΡΠΎ Π΅ΡΠ»ΠΈ ΡΠΈΡΠΈΠ½Π° body ΡΡΠ°Π½ΠΎΠ²ΠΈΡΡΡ ΠΌΠ΅Π½ΡΡΠ΅ ΡΠ΅ΠΌ ΡΠΈΡΠΈΠ½Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, ΡΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π½Π°ΡΠΈΠ½Π°ΡΡ ΡΠΆΠΈΠΌΠ°ΡΡΡΡ ΠΈ ΠΎΡΡΠ°ΡΡΡΡ Π²ΡΠ΅Π³Π΄Π° Π²Π½ΡΡΡΠΈ body ΠΈ Π½Π΅ Π²ΡΡΡΡΠΏΠ°ΡΡ Π·Π° Π΅Π³ΠΎ ΠΏΡΠ΅Π΄Π΅Π»Ρ.
ΠΡΡ Ρ ΠΎΡΠΎΡΠΎ, ΠΎΠ΄Π½Π°ΠΊΠΎ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ Π½Π°ΡΠΈΠ½Π°ΡΡΡΡ, ΠΊΠΎΠ³Π΄Π° Π²Ρ ΠΏΡΠΎΡΠΌΠ°ΡΡΠΈΠ²Π°Π΅ΡΠ΅ ΡΠ°ΠΉΡ Π½Π° ΡΡΡΡΠΎΠΉΡΡΠ²Π΅ Ρ Π½Π΅Π±ΠΎΠ»ΡΡΠΈΠΌ ΡΠΊΡΠ°Π½ΠΎΠΌ β ΡΠ°ΠΏΠΊΠ° Π²Π½ΠΈΠ·Ρ Π²ΡΠ³Π»ΡΠ΄ΠΈΡ Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΠΎ, Π½ΠΎ ΡΠ΅ΠΏΠ΅ΡΡ ΠΎΠ½Π° Π·Π°Π½ΠΈΠΌΠ°Π΅Ρ Π·Π½Π°ΡΠΈΡΠ΅Π»ΡΠ½ΡΡ Π²ΡΡΠΎΡΡ ΡΠΊΡΠ°Π½Π°; ΠΏΠ΅ΡΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π² ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ΅ Π½Π°ΠΏΡΠΎΡΠΈΠ², Π²ΡΠ³Π»ΡΠ΄ΠΈΡ ΡΠΆΠ°ΡΠ½ΠΎ β ΠΏΡΠΈ ΡΠ°ΠΊΠΎΠΌ ΡΠ°Π·ΠΌΠ΅ΡΠ΅ Π΅Π΄Π²Π° ΠΌΠΎΠΆΠ½ΠΎ ΡΠ°ΡΡΠΌΠΎΡΡΠ΅ΡΡ Π»ΡΠ΄Π΅ΠΉ!
ΠΡΠ»ΠΎ Π±Ρ Π½Π°ΠΌΠ½ΠΎΠ³ΠΎ Π»ΡΡΡΠ΅ ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°ΡΡ ΠΎΠ±ΡΠ΅Π·Π°Π½Π½ΡΡ Π²Π΅ΡΡΠΈΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, Π½Π° ΠΊΠΎΡΠΎΡΠΎΠΌ Π²ΠΈΠ΄Π½Ρ Π²Π°ΠΆΠ½ΡΠ΅ Π΄Π΅ΡΠ°Π»ΠΈ ΡΠ½ΠΈΠΌΠΊΠ°, ΠΊΠΎΠ³Π΄Π° ΡΠ°ΠΉΡ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΡΡΡ Π½Π° ΡΠ·ΠΊΠΎΠΌ ΡΠΊΡΠ°Π½Π΅, ΠΈ, Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, ΡΡΠΎ-ΡΠΎ ΡΡΠ΅Π΄Π½Π΅Π΅ ΠΌΠ΅ΠΆΠ΄Ρ ΠΎΠ±ΡΠ΅Π·Π°Π½Π½ΡΠΌ ΠΈ ΠΎΡΠΈΠ³ΠΈΠ½Π°Π»ΡΠ½ΡΠΌ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡΠΌΠΈ Π΄Π»Ρ ΡΠΊΡΠ°Π½ΠΎΠ² ΡΡΠ΅Π΄Π½Π΅ΠΉ ΡΠΈΡΠΈΠ½Ρ, ΡΠ°ΠΊΠΈΡ
ΠΊΠ°ΠΊ ΠΏΠ»Π°Π½ΡΠ΅ΡΡ β ΡΡΠΎ ΠΈΠ·Π²Π΅ΡΡΠ½ΠΎ ΠΊΠ°ΠΊ art direction problem.
ΠΡΠΎΠΌΠ΅ ΡΠΎΠ³ΠΎ, Π½Π΅Ρ Π½ΡΠΆΠ΄Ρ Π²ΡΡΡΠ°ΠΈΠ²Π°ΡΡ ΡΠ°ΠΊΠΈΠ΅ Π±ΠΎΠ»ΡΡΠΈΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π½Π° ΡΡΡΠ°Π½ΠΈΡΡ, Π΅ΡΠ»ΠΈ ΠΎΠ½Π° ΠΏΡΠΎΡΠΌΠ°ΡΡΠΈΠ²Π°Π΅ΡΡΡ Π½Π° ΠΌΠ°Π»Π΅Π½ΡΠΊΠΎΠΌ ΡΠΊΡΠ°Π½Π΅ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΠΎΠ³ΠΎ ΡΡΡΡΠΎΠΉΡΡΠ²Π°; ΡΡΠΎ Π½Π°Π·ΡΠ²Π°Π΅ΡΡΡ resolution switching problem β ΡΠ°ΡΡΡΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΠ΅Ρ ΡΠΎΠ±ΠΎΠΉ ΡΠΎΡΠ½ΠΎ-Π·Π°Π΄Π°Π½Π½ΠΎΠ΅ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ ΠΏΠΎ ΡΠΈΡΠΈΠ½Π΅ ΠΈ Π²ΡΡΠΎΡΠ΅; ΠΊΠ°ΠΊ ΠΌΡ ΡΡΠΏΠ΅Π»ΠΈ Π·Π°ΠΌΠ΅ΡΠΈΡΡ, ΠΊΠΎΠ³Π΄Π° ΡΠ°ΡΡΠΌΠ°ΡΡΠΈΠ²Π°Π»ΠΈ Π²Π΅ΠΊΡΠΎΡΠ½ΡΡ Π³ΡΠ°ΡΠΈΠΊΡ, ΡΠ°ΡΡΡΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΡΡΠ°Π½ΠΎΠ²ΠΈΡΡΡ Π·Π΅ΡΠ½ΠΈΡΡΡΠΌ ΠΈ Π²ΡΠ³Π»ΡΠ΄ΠΈΡ ΡΠΆΠ°ΡΠ½ΠΎ, Π΅ΡΠ»ΠΈ ΠΎΠ½ΠΎ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΡΡΡ Π² ΡΠ°Π·ΠΌΠ΅ΡΠ΅ Π±ΠΎΠ»ΡΡΠ΅ΠΌ, ΡΠ΅ΠΌ ΠΎΡΠΈΠ³ΠΈΠ½Π°Π»ΡΠ½ΡΠΉ (ΡΠΎΠ³Π΄Π° ΠΊΠ°ΠΊ Π²Π΅ΠΊΡΠΎΡΠ½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π΅Ρ). Π ΡΠΎ ΠΆΠ΅ Π²ΡΠ΅ΠΌΡ, Π΅ΡΠ»ΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΡΡΡ Π² Π³ΠΎΡΠ°Π·Π΄ΠΎ ΠΌΠ΅Π½ΡΡΠ΅ΠΌ ΡΠ°Π·ΠΌΠ΅ΡΠ΅, ΡΠ΅ΠΌ ΠΎΡΠΈΠ³ΠΈΠ½Π°Π»ΡΠ½ΡΠΉ, ΡΡΠΎ ΠΏΡΠΈΠ²Π΅Π΄ΡΡ ΠΊ Π½Π°ΠΏΡΠ°ΡΠ½ΠΎΠΉ ΡΡΠ°ΡΠ΅ ΡΡΠ°ΡΠΈΠΊΠ° β ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΠΈ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ ΡΡΡΡΠΎΠΉΡΡΠ² Π±ΡΠ΄ΡΡ Π³ΡΡΠ·ΠΈΡΡ Π±ΠΎΠ»ΡΡΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π΄Π»Ρ ΠΊΠΎΠΌΠΏΡΡΡΠ΅ΡΠ°, Π²ΠΌΠ΅ΡΡΠΎ ΠΌΠ°Π»Π΅Π½ΡΠΊΠΎΠ³ΠΎ Π΄Π»Ρ ΠΈΡ ΡΡΡΡΠΎΠΉΡΡΠ²Π°. ΠΠ΄Π΅Π°Π»ΡΠ½ΠΎ Π±ΡΠ»ΠΎ Π±Ρ ΠΈΠΌΠ΅ΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠ°ΠΉΠ»ΠΎΠ² Π² ΡΠ°Π·Π½ΡΡ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΡΡ , ΠΈ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡ Π½ΡΠΆΠ½ΡΠΉ ΡΠ°Π·ΠΌΠ΅Ρ Π² Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ ΡΡΡΡΠΎΠΉΡΡΠ²Π°, ΠΎΠ±ΡΠ°ΡΠ°ΡΡΠ΅Π³ΠΎΡΡ ΠΊ Π²Π΅Π±-ΡΠ°ΠΉΡΡ.
Π‘Π»ΠΎΠΆΠ½ΠΎΡΡΡ Π² ΡΠΎΠΌ, ΡΡΠΎ Π΄Π»Ρ Π½Π΅ΠΊΠΎΡΠΎΡΡΡ
ΡΡΡΡΠΎΠΉΡΡΠ² Ρ Π±ΠΎΠ»ΡΡΠΈΠΌ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ΠΌ ΡΠΊΡΠ°Π½Π° Π½ΡΠΆΠ½Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π±ΠΎΠ»ΡΡΠ΅Π³ΠΎ ΡΠ΅ΠΌ ΠΎΠΆΠΈΠ΄Π°Π΅ΡΡΡ ΡΠ°Π·ΠΌΠ΅ΡΠ°, ΡΡΠΎΠ±Ρ ΡΡΡΡΠ΅ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π»ΠΎΡΡ. ΠΠΎ ΡΡΡΠΈ ΡΡΠΎ Π²ΡΡ ΠΎΠ΄Π½Π° Π·Π°Π΄Π°ΡΠ° Π² ΡΠ°Π·Π½ΡΡ
ΡΡΠ»ΠΎΠ²ΠΈΡΡ
.
ΠΠΎΠΆΠ½ΠΎ ΠΏΡΠ΅Π΄ΠΏΠΎΠ»ΠΎΠΆΠΈΡΡ, ΡΡΠΎ Π²Π΅ΠΊΡΠΎΡΠ½ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΌΠΎΠ³Π»ΠΈ Π±Ρ ΡΠ΅ΡΠΈΡΡ ΡΡΠΈ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ. Π ΠΊΠ°ΠΊΠΎΠΉ-ΡΠΎ ΡΡΠ΅ΠΏΠ΅Π½ΠΈ ΡΡΠΎ ΡΠ°ΠΊ. Π£ Π½ΠΈΡ Π½Π΅Π±ΠΎΠ»ΡΡΠΎΠΉ Π²Π΅Ρ ΠΈ ΡΠ°Π·ΠΌΠ΅Ρ, ΠΏΠΎΡΡΠΎΠΌΡ ΠΈΡ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΏΠΎΡΡΠΈ Π² Π»ΡΠ±ΠΎΠΌ ΡΠ»ΡΡΠ°Π΅. ΠΠ½ΠΈ Ρ ΠΎΡΠΎΡΠΈ Π΄Π»Ρ ΠΏΡΠΎΡΡΠΎΠΉ Π³ΡΠ°ΡΠΈΠΊΠΈ, ΡΠ·ΠΎΡΠΎΠ², ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ° ΠΈ Ρ. Π΄. Π‘Π»ΠΎΠΆΠ½Π΅Π΅ ΡΠΎΠ·Π΄Π°ΡΡ Π²Π΅ΠΊΡΠΎΡΠ½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Ρ Π±ΠΎΠ»ΡΡΠΈΠΌ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎΠΌ Π΄Π΅ΡΠ°Π»Π΅ΠΉ, ΠΊΠ°ΠΊ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, Π½Π° ΡΠΎΡΠΎ. Π Π°ΡΡΡΠΎΠ²ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ (JPEG) Π΄Π»Ρ Π½Π°ΡΠ΅Π³ΠΎ ΠΏΡΠΈΠΌΠ΅ΡΠ° ΠΏΠΎΠ΄Ρ ΠΎΠ΄ΡΡ Π±ΠΎΠ»ΡΡΠ΅.
Π’Π°ΠΊΠΎΠ³ΠΎ ΡΠΎΠ΄Π° ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ Π½Π΅ Π±ΡΠ»ΠΎ Π² Π½Π°ΡΠ°Π»Π΅ ΡΡΡΠ΅ΡΡΠ²ΠΎΠ²Π°Π½ΠΈΡ Π²Π΅Π±Π°, Π² ΠΏΠ΅ΡΠ²ΠΎΠΉ ΠΏΠΎΠ»ΠΎΠ²ΠΈΠ½Π΅ 90-Ρ
Π³ΠΎΠ΄ΠΎΠ² β ΡΠΎΠ³Π΄Π° Π΅Π΄ΠΈΠ½ΡΡΠ²Π΅Π½Π½ΡΠΌΠΈ ΡΡΡΡΠΎΠΉΡΡΠ²Π°ΠΌΠΈ Π΄Π»Ρ ΠΏΡΠΎΡΠΌΠΎΡΡΠ° Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡ Π±ΡΠ»ΠΈ Π½Π°ΡΡΠΎΠ»ΡΠ½ΡΠ΅ ΠΊΠΎΠΌΠΏΡΡΡΠ΅ΡΡ ΠΈ Π½ΠΎΡΡΠ±ΡΠΊΠΈ, ΡΠ°ΠΊ ΡΡΠΎ ΡΠΎΠ·Π΄Π°ΡΠ΅Π»ΠΈ Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠ² ΠΈ Π°Π²ΡΠΎΡΡ ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΠΉ Π΄Π°ΠΆΠ΅ Π½Π΅ Π·Π°Π΄ΡΠΌΡΠ²Π°Π»ΠΈΡΡ ΠΎ ΡΠΎΠ·Π΄Π°Π½ΠΈΠΈ ΡΠ΅ΡΠ΅Π½ΠΈΡ. Π’Π΅Ρ
Π½ΠΎΠ»ΠΎΠ³ΠΈΠΈ ΠΎΡΠ·ΡΠ²ΡΠΈΠ²ΡΡ
ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ Π±ΡΠ»ΠΈ ΡΠ΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Π½Ρ Π½Π΅Π΄Π°Π²Π½ΠΎ Π΄Π»Ρ ΡΠ΅ΡΠ΅Π½ΠΈΡ ΠΏΡΠΎΠ±Π»Π΅ΠΌ, ΡΠΊΠ°Π·Π°Π½Π½ΡΡ
Π²ΡΡΠ΅. ΠΠ½ΠΈ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡΡ Π²Π°ΠΌ ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²ΠΈΡΡ Π±ΡΠ°ΡΠ·Π΅ΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ, ΠΊΠ°ΠΆΠ΄ΠΎΠ΅ ΠΈΠ· ΠΊΠΎΡΠΎΡΡΡ
ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅Ρ ΠΎΠ΄Π½ΠΎ ΠΈ ΡΠΎ ΠΆΠ΅, Π½ΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠΈΡ ΡΠ°Π·Π½ΠΎΠ΅ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ (resolution switching), ΠΈΠ»ΠΈ ΡΠ°Π·Π½ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Ρ ΠΎΡΠ΄Π΅Π»ΡΠ½ΡΠΌΠΈ ΠΎΠ±Π»Π°ΡΡΡΠΌΠΈ ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ (art direction).
ΠΡΠΈΠΌΠ΅ΡΠ°Π½ΠΈΠ΅: ΠΠΎΠ²ΡΠ΅ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠΈ ΠΎΠ±ΡΡΠΆΠ΄Π°ΡΡΡΡ Π² ΡΡΠ°ΡΡΠ΅ β srcset
/sizes
/<picture>
β Π²ΡΠ΅ ΠΎΠ½ΠΈ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡΡΡ ΠΏΠΎΡΠ»Π΅Π΄Π½ΠΈΠΌΠΈ Π²Π΅ΡΡΠΈΡΠΌΠΈ ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΡΡ
Π½Π°ΡΡΠΎΠ»ΡΠ½ΡΡ
ΠΈ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ
Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠ² (Π²ΠΊΠ»ΡΡΠ°Ρ Microsoft Edge, Π½ΠΎ Π½Π΅ Internet Explorer).
Π ΡΡΠΎΠΌ ΡΠ°Π·Π΄Π΅Π»Π΅ ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌ Π΄Π²Π΅ Π²ΡΡΠ΅ΠΎΠΏΠΈΡΠ°Π½Π½ΡΠ΅ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ ΠΈ ΠΏΠΎΠΊΠ°ΠΆΠ΅ΠΌ, ΠΊΠ°ΠΊ ΠΈΡ
ΡΠ΅ΡΠΈΡΡ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠΎΠ² HTML <img>
. ΠΠ°ΠΊ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ Π½Π° ΠΏΡΠΈΠΌΠ΅ΡΠ΅ Π²ΡΡΠ΅ — ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π² Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ ΠΊΠ°ΠΊ ΡΠΊΡΠ°ΡΠ΅Π½ΠΈΠ΅ ΡΠ°ΠΉΡΠ° ΠΈ ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½ΠΎ ΠΊΠ°ΠΊ ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS. CSS Π±ΠΎΠ»ΡΡΠ΅ ΠΏΠΎΠ΄Ρ
ΠΎΠ΄ΠΈΡ Π΄Π»Ρ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠ³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π° ΡΠ΅ΠΌ HTML, ΠΎΠ± ΡΡΠΎΠΌ ΠΏΠΎΠ³ΠΎΠ²ΠΎΡΠΈΠΌ Π² ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΌ ΠΌΠΎΠ΄ΡΠ»Π΅ ΠΎ CSS.
Π Π°Π·Π½ΡΠ΅ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΡ: Π Π°Π·Π½ΡΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΡ
ΠΡΠ°ΠΊ, ΠΊΠ°ΠΊΡΡ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ ΡΠ΅ΡΠ°ΡΡ ΡΠ°Π·Π½ΡΠ΅ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΡ? Π Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ ΡΡΡΡΠΎΠΉΡΡΠ²Π° Π½ΡΠΆΠ½ΠΎ ΠΎΡΠΎΠ±ΡΠ°Π·ΠΈΡΡ ΠΎΠ΄Π½ΠΎ ΠΈ ΡΠΎ ΠΆΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅, Π½ΠΎ ΡΠ°Π·Π½ΡΡ
ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ². ΠΠΎΡΠΌΠΎΡΡΠΈΡΠ΅ Π½Π° Π²ΡΠΎΡΡΡ ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ Π² ΠΏΡΠΈΠΌΠ΅ΡΠ΅. Π‘ΡΠ°Π½Π΄Π°ΡΡΠ½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ <img>
ΠΎΠ±ΡΡΠ½ΠΎ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΡΠΊΠ°Π·Π°ΡΡ ΡΠΎΠ»ΡΠΊΠΎ ΠΎΠ΄ΠΈΠ½ ΠΏΡΡΡ ΠΊ ΡΠ°ΠΉΠ»Ρ:
<img src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy">
ΠΠ΄Π½Π°ΠΊΠΎ Π΅ΡΡΡ Π΄Π²Π° Π½ΠΎΠ²ΡΡ
Π°ΡΡΠΈΠ±ΡΡΠ° β srcset
ΠΈ sizes
β ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡΡΠΈΡ
Π΄ΠΎΠ±Π°Π²ΠΈΡΡ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Ρ ΠΏΠΎΠΌΠ΅ΡΠΊΠ°ΠΌΠΈ, ΡΡΠΎΠ±Ρ Π±ΡΠ°ΡΠ·Π΅Ρ Π²ΡΠ±ΡΠ°Π» ΠΏΠΎΠ΄Ρ
ΠΎΠ΄ΡΡΠ΅Π΅. ΠΡΠΈΠΌΠ΅Ρ Π½Π° Github: responsive.html (ΡΠ°ΠΊΠΆΠ΅ ΡΠΌΠΎΡΡΠΈ ΠΈΡΡΠΎΡΠ½ΠΈΠΊ ΠΊΠΎΠ΄Π°).
<img srcset="elva-fairy-320w.jpg 320w, elva-fairy-480w.jpg 480w, elva-fairy-800w.jpg 800w" src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy">
ΠΡΡΠΈΠ±ΡΡΡ srcset
ΠΈ sizes
ΠΊΠ°ΠΆΡΡΡΡ ΡΠ»ΠΎΠΆΠ½ΡΠΌΠΈ, Π½ΠΎ ΠΎΠ½ΠΈ Π½Π΅ ΡΠ°ΠΊ ΠΏΠ»ΠΎΡ
ΠΈ, Π΅ΡΠ»ΠΈ Π²Ρ ΠΎΡΡΠΎΡΠΌΠ°ΡΠΈΡΡΠ΅ΡΠ΅ ΠΈΡ
ΠΊΠ°ΠΊ Π² ΠΏΡΠΈΠΌΠ΅ΡΠ΅ Π²ΡΡΠ΅: ΠΊΠ°ΠΆΠ΄Π°Ρ ΡΠ°ΡΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΡ Π°ΡΡΠΈΠ±ΡΡΠ° Ρ Π½ΠΎΠ²ΠΎΠΉ ΡΡΡΠΎΠΊΠΈ. ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΠΎΡΡΠΎΠΈΡ ΠΈΠ· ΡΠΏΠΈΡΠΊΠ° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΡΠ΅ΡΠ΅Π· Π·Π°ΠΏΡΡΡΡ, ΠΊΠ°ΠΆΠ΄ΡΠΉ ΠΈΠ· ΠΊΠΎΡΠΎΡΡΡ
Π²ΠΊΠ»ΡΡΠ°Π΅Ρ ΡΡΠΈ ΡΠ°ΡΡΠΈ. ΠΠ°Π²Π°ΠΉΡΠ΅ ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌ ΡΡΠΈ Π·Π½Π°ΡΠ΅Π½ΠΈΡ:
srcset
Π²ΠΊΠ»ΡΡΠ°Π΅Ρ Π½Π°Π·Π²Π°Π½ΠΈΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ, ΡΡΠ΅Π΄ΠΈ ΠΊΠΎΡΠΎΡΡΡ
Π±ΡΠ°ΡΠ·Π΅Ρ Π²ΡΠ±Π΅ΡΠ΅Ρ Π½ΡΠΆΠ½ΠΎΠ΅ ΠΈ ΠΈΡ
ΡΠ°Π·ΠΌΠ΅ΡΡ. ΠΠ΅ΡΠ΅Π΄ ΠΊΠ°ΠΆΠ΄ΠΎΠΉ Π·Π°ΠΏΡΡΠΎΠΉ ΡΠ°ΡΡΠΈ Π·Π½Π°ΡΠ΅Π½ΠΈΡ Π² ΡΠ°ΠΊΠΎΠΌ ΠΏΠΎΡΡΠ΄ΠΊΠ΅:
- ΠΠ°Π·Π²Π°Π½ΠΈΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ (
elva-fairy-480w.
.)jpg
- ΠΡΠΎΠ±Π΅Π».
- ΠΠΊΡΡΠ°Π»ΡΠ½Π°Ρ ΡΠΈΡΠΈΠ½Π° ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ Π² ΠΏΠΈΠΊΡΠ΅Π»Π°Ρ
(
480w
) β Π·Π°ΠΌΠ΅ΡΡΡΠ΅, ΡΡΠΎ Π·Π΄Π΅ΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡw
Π²ΠΌΠ΅ΡΡΠΎpx
, ΠΊΠ°ΠΊ Π²Ρ ΠΌΠΎΠ³Π»ΠΈ ΠΎΠΆΠΈΠ΄Π°ΡΡ. ΠΡΠ° Π½Π°ΡΡΠΎΡΡΠ°Ρ ΡΠΈΡΠΈΠ½Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, ΠΊΠΎΡΠΎΡΠ°Ρ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΠΏΡΠΎΡΠΌΠΎΡΡΠ΅Π½Π° Π² ΡΠ²ΠΎΠΉΡΡΠ²Π°Ρ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ Π½Π° Π²Π°ΡΠ΅ΠΌ ΠΊΠΎΠΌΠΏΡΡΡΠ΅ΡΠ΅ (Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, Π½Π° Mac Π½ΡΠΆΠ½ΠΎ ΠΎΡΠΊΡΡΡΡ ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ Π² Finder ΠΈ Π½Π°ΠΆΠ°ΡΡ
Cmd
+
I
, ΡΡΠΎΠ±Ρ Π²ΡΠ²Π΅ΡΡΠΈ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ Π½Π° ΡΠΊΡΠ°Π½).
sizes
ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ ΠΏΠ΅ΡΠ΅ΡΠ΅Π½Ρ ΠΌΠ΅Π΄ΠΈΠ°Π²ΡΡΠ°ΠΆΠ΅Π½ΠΈΠΉ (Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΡΠΈΡΠΈΠ½Ρ ΡΠΊΡΠ°Π½Π°) ΠΈ ΡΠΊΠ°Π·ΡΠ²Π°Π΅Ρ ΠΏΡΠ΅Π΄ΠΏΠΎΡΡΠΈΡΠ΅Π»ΡΠ½ΡΡ ΡΠΈΡΠΈΠ½Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, ΠΊΠΎΠ³Π΄Π° ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ½Π½ΠΎΠ΅ ΠΌΠ΅Π΄ΠΈΠ°Π²ΡΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΈΡΡΠΈΠ½Π½ΠΎ β ΡΡΠΎ ΡΠΎ, ΠΎ ΡΡΠΌ ΠΌΡ Π³ΠΎΠ²ΠΎΡΠΈΠ»ΠΈ Π²ΡΡΠ΅. Π Π½Π°ΡΠ΅ΠΌ ΡΠ»ΡΡΠ°Π΅, ΠΏΠ΅ΡΠ΅Π΄ ΠΊΠ°ΠΆΠ΄ΠΎΠΉ Π·Π°ΠΏΡΡΠΎΠΉ ΠΌΡ ΠΏΠΈΡΠ΅ΠΌ:
- ΠΠ΅Π΄ΠΈΠ°-ΡΡΠ»ΠΎΠ²ΠΈΠ΅ (
(max-width:480px)
) β Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π±ΠΎΠ»ΡΡΠ΅ ΡΠ·Π½Π°ΡΡ ΠΎΠ± ΡΡΠΎΠΌ Π² CSS topic, Π½ΠΎ ΡΠ΅ΠΉΡΠ°Ρ Π΄Π°Π²Π°ΠΉΡΠ΅ ΡΠΊΠ°ΠΆΠ΅ΠΌ, ΡΡΠΎ ΠΌΠ΅Π΄ΠΈΠ°-ΡΡΠ»ΠΎΠ²ΠΈΠ΅ ΠΎΠΏΠΈΡΡΠ²Π°Π΅Ρ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΠ΅ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ ΡΠΊΡΠ°Π½Π°. Π ΡΡΠΎΠΌ ΡΠ»ΡΡΠ°Π΅, ΠΌΡ Π³ΠΎΠ²ΠΎΡΠΈΠΌ «ΠΊΠΎΠ³Π΄Π° viewport width ΠΌΠ΅Π½ΡΡΠ΅ ΠΈΠ»ΠΈ ΡΠ°Π²Π΅Π½ 480 ΠΏΠΈΠΊΡΠ΅Π»ΡΠΌ». - ΠΡΠΎΠ±Π΅Π».
- Π¨ΠΈΡΠΈΠ½Ρ ΡΠ»ΠΎΡΠ° (Π² ΠΎΡΠΈΠ³ΠΈΠ½Π°Π»Π΅ «width of the slot»), Π·Π°Π½ΠΈΠΌΠ°Π΅ΠΌΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ, ΠΊΠΎΠ³Π΄Π° ΠΌΠ΅Π΄ΠΈΠ°-ΡΡΠ»ΠΎΠ²ΠΈΠ΅ ΠΈΡΡΠΈΠ½Π½ΠΎ. (
440px
)
ΠΡΠΈΠΌΠ΅ΡΠ°Π½ΠΈΠ΅: ΠΠ»Ρ ΡΠΈΡΠΈΠ½Ρ ΡΠ»ΠΎΡΠ°, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠΊΠ°Π·Π°ΡΡ Π°Π±ΡΠΎΠ»ΡΡΠ½ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ (px
, em
) ΠΈΠ»ΠΈ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΎΠΊΠ½Π° ΠΏΡΠΎΡΠΌΠΎΡΡΠ° (vw
), Π½ΠΎ ΠΠ ΠΏΡΠΎΡΠ΅Π½ΡΡ. ΠΡ ΠΌΠΎΠ³Π»ΠΈ Π·Π°ΠΌΠ΅ΡΠΈΡΡ, ΡΡΠΎ Ρ ΠΏΠΎΡΠ»Π΅Π΄Π½Π΅Π³ΠΎ ΡΠ»ΠΎΡΠ° Π½Π΅Ρ ΠΌΠ΅Π΄ΠΈΠ°-ΡΡΠ»ΠΎΠ²ΠΈΡ β ΡΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΡΡΠ°Π½Π΅Ρ Π°ΠΊΡΡΠ°Π»ΡΠ½ΡΠΌ, Π΅ΡΠ»ΠΈ Π½ΠΈ ΠΎΠ΄Π½ΠΎ ΠΈΠ· ΠΏΡΠ΅Π΄ΡΠ΄ΡΡΠΈΡ
ΠΌΠ΅Π΄ΠΈΠ°-ΡΡΠ»ΠΎΠ²ΠΈΠΉ Π½Π΅ Π±ΡΠ΄Π΅Ρ ΠΈΡΡΠΈΠ½Π½ΠΎ. ΠΡΠ°ΡΠ·Π΅Ρ ΠΈΠ³Π½ΠΎΡΠΈΡΡΠ΅Ρ Π²ΡΠ΅ ΠΏΠΎΡΠ»Π΅Π΄ΡΡΡΠΈΠ΅ ΠΏΡΠΎΠ²Π΅ΡΠΊΠΈ ΠΏΠΎΡΠ»Π΅ ΠΏΠ΅ΡΠ²ΠΎΠ³ΠΎ ΡΠΎΠ²ΠΏΠ°Π΄Π΅Π½ΠΈΡ, ΡΠ°ΠΊ ΡΡΠΎ Π±ΡΠ΄ΡΡΠ΅ Π²Π½ΠΈΠΌΠ°ΡΠ΅Π»ΡΠ½Π΅Π΅ ΠΊ ΠΏΠΎΡΡΠ΄ΠΊΡ ΠΈΡ
ΠΎΠ±ΡΡΠ²Π»Π΅Π½ΠΈΡ.
ΠΡΠ°ΠΊ, Ρ ΡΠ°ΠΊΠΈΠΌΠΈ Π°ΡΡΠΈΠ±ΡΡΠ°ΠΌΠΈ, Π±ΡΠ°ΡΠ·Π΅Ρ ΡΠ΄Π΅Π»Π°Π΅Ρ ΡΠ»Π΅Π΄ΡΡΡΠ΅Π΅:
- ΠΠΎΡΠΌΠΎΡΡΠΈΡ Π½Π° ΡΠΈΡΠΈΠ½Ρ ΡΠΊΡΠ°Π½Π° ΡΡΡΡΠΎΠΉΡΡΠ²Π°.
- ΠΠΎΠΏΡΡΠ°Π΅ΡΡΡ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΠΈΡΡ ΠΏΠΎΠ΄Ρ
ΠΎΠ΄ΡΡΠ΅Π΅ ΠΌΠ΅Π΄ΠΈΠ°-ΡΡΠ»ΠΎΠ²ΠΈΠ΅ ΠΈΠ· ΡΠΏΠΈΡΠΊΠ° Π² Π°ΡΡΠΈΠ±ΡΡΠ΅
sizes
. - ΠΠΎΡΠΌΠΎΡΡΠΈΡ Π½Π° ΡΠ°Π·ΠΌΠ΅Ρ ΡΠ»ΠΎΡΠ° ΠΊ ΡΡΠΎΠΌΡ ΠΌΠ΅Π΄ΠΈΠ°Π²ΡΡΠ°ΠΆΠ΅Π½ΠΈΡ.
- ΠΠ°Π³ΡΡΠ·ΠΈΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΈΠ· ΡΠΏΠΈΡΠΊΠ° ΠΈΠ·
srcset
, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΠΈΠΌΠ΅Π΅Ρ ΡΠΎΡ ΠΆΠ΅ ΡΠ°Π·ΠΌΠ΅Ρ, ΡΡΠΎ ΠΈ Π²ΡΠ±ΡΠ°Π½Π½ΡΠΉ ΡΠ»ΠΎΡ, ΠΈΠ»ΠΈ, Π΅ΡΠ»ΠΈ ΡΠ°ΠΊΠΎΠ³ΠΎ Π½Π΅Ρ, ΡΠΎ ΠΏΠ΅ΡΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅, ΠΊΠΎΡΠΎΡΠΎΠ΅ Π±ΠΎΠ»ΡΡΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΠ° Π²ΡΠ±ΡΠ°Π½Π½ΠΎΠ³ΠΎ ΡΠ»ΠΎΡΠ°.
Π ΡΡΠΎ Π²ΡΡ! ΠΠ° ΡΠ΅ΠΊΡΡΠΈΠΉ ΠΌΠΎΠΌΠ΅Π½Ρ, Π΅ΡΠ»ΠΈ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡΠΈΠΉ Π±ΡΠ°ΡΠ·Π΅Ρ Ρ viewport width 480px Π·Π°Π³ΡΡΠ·ΠΈΡ ΡΡΡΠ°Π½ΠΈΡΡ, ΠΌΠ΅Π΄ΠΈΠ°-ΡΡΠ»ΠΎΠ²ΠΈΠ΅ (max-width: 480px)
Π±ΡΠ΄Π΅Ρ ΠΈΡΡΠΈΠ½Π½ΠΎ, ΡΠ»Π΅Π΄ΠΎΠ²Π°ΡΠ΅Π»ΡΠ½ΠΎ, Π±ΡΠ΄Π΅Ρ Π²ΡΠ±ΡΠ°Π½ ΡΠ»ΠΎΡ 440px
, ΡΠΎΠ³Π΄Π° Π±ΡΠ΄Π΅Ρ Π·Π°Π³ΡΡΠΆΠ΅Π½ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ elva-fairy-480w.jpg
, ΡΠ°ΠΊ ΠΊΠ°ΠΊ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ ΡΠΈΡΠΈΠ½Ρ (480w
) Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ Π±Π»ΠΈΠ·ΠΊΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ 440px
. Π£ΡΠ»ΠΎΠ²Π½ΠΎ, ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ 800px Π·Π°Π½ΠΈΠΌΠ°Π΅Ρ Π½Π° Π΄ΠΈΡΠΊΠ΅ 128KB, Π² ΡΠΎ Π²ΡΠ΅ΠΌΡ ΠΊΠ°ΠΊ Π²Π΅ΡΡΠΈΡ Π² 480px ΡΠΎΠ»ΡΠΊΠΎ 63KB β ΡΠΊΠΎΠ½ΠΎΠΌΠΈΡ Π² 65KB. Π’Π΅ΠΏΠ΅ΡΡ ΠΏΡΠ΅Π΄ΡΡΠ°Π²ΡΡΠ΅, ΡΡΠΎ Ρ Π²Π°Ρ ΡΡΡΠ°Π½ΠΈΡΠ°, Π½Π° ΠΊΠΎΡΠΎΡΠΎΠΉ ΠΌΠ½ΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ. ΠΡΠΏΠΎΠ»ΡΠ·ΡΡ ΡΡΠΎ ΡΠ΅Ρ
Π½ΠΈΠΊΡ, Π²Ρ ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠΈΡΠ΅ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΠΌ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΠΌ Π±ΠΎΠ»ΡΡΡΡ ΠΏΡΠΎΠΏΡΡΠΊΠ½ΡΡ ΡΠΏΠΎΡΠΎΠ±Π½ΠΎΡΡΡ.
Π‘ΡΠ°ΡΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ, Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡΠΈΠ΅ ΡΡΠΈ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠΈ, ΠΏΡΠΎΡΡΠΎ ΠΏΡΠΎΠΈΠ³Π½ΠΎΡΠΈΡΡΡΡ ΠΈΡ
ΠΈ Π²ΠΎΠ·ΡΠΌΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΏΠΎ Π°Π΄ΡΠ΅ΡΡ ΠΈΠ· Π°ΡΡΠΈΠ±ΡΡΠ° src
.
ΠΡΠΈΠΌΠ΅ΡΠ°Π½ΠΈΠ΅: Π ΠΎΠΏΠΈΡΠ°Π½ΠΈΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° <head>
Π²Ρ Π½Π°ΠΉΠ΄ΡΡΠ΅ ΡΡΡΠΎΠΊΡ <meta name="viewport" content="width=device-width">
: ΡΡΠΎ Π·Π°ΡΡΠ°Π²Π»ΡΠ΅Ρ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ Π°Π΄Π°ΠΏΡΠΈΡΠΎΠ²Π°ΡΡ ΠΈΡ
ΡΠ΅Π°Π»ΡΠ½ΡΠΉ viewport width Π΄Π»Ρ Π·Π°Π³ΡΡΠ·ΠΊΠΈ web-ΡΡΡΠ°Π½ΠΈΡ (Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ Π½Π΅ΡΠ΅ΡΡΠ½Ρ Π½Π°ΡΡΡΡ ΡΠ²ΠΎΠ΅Π³ΠΎ viewport width, Π²ΠΌΠ΅ΡΡΠΎ ΡΡΠΎΠ³ΠΎ ΠΎΠ½ΠΈ Π·Π°Π³ΡΡΠΆΠ°ΡΡ ΡΡΡΠ°Π½ΠΈΡΡ Π² Π±ΠΎΠ»ΡΡΠ΅ΠΌ viewport width, Π° Π·Π°ΡΠ΅ΠΌ ΡΠΆΠΈΠΌΠ°ΡΡ Π΅Ρ, ΡΡΠΎ Π½Π΅ ΠΎΡΠ΅Π½Ρ Ρ
ΠΎΡΠΎΡΠΎ ΡΠΊΠ°Π·ΡΠ²Π°Π΅ΡΡΡ Π½Π° Π½Π°ΡΠΈΡ
ΠΎΡΠ·ΡΠ²ΡΠΈΠ²ΡΡ
ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡΡ
ΠΈΠ»ΠΈ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅. ΠΡ ΡΠ°ΡΡΠΊΠ°ΠΆΠ΅ΠΌ Π²Π°ΠΌ ΠΎΠ± ΡΡΠΎΠΌ Π±ΠΎΠ»ΡΡΠ΅ Π² Π±ΡΠ΄ΡΡΠ΅ΠΌ ΠΌΠΎΠ΄ΡΠ»Π΅.)
ΠΠΎΠ»Π΅Π·Π½ΡΠ΅ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΡ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠ°
ΠΡΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΏΠΎΠ»Π΅Π·Π½ΡΡ
Π±ΡΠ°ΡΠ·Π΅ΡΠ½ΡΡ
ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠΎΠ² ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠ°, ΡΡΠΎΠ±Ρ ΠΏΠΎΠΌΠΎΡΡ Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΠ΅ΠΌ Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΠΎΠΉ ΡΠΈΡΠΈΠ½Ρ ΡΠ»ΠΎΡΠΎΠ² ΠΈ Ρ. Π΄., ΠΊΠΎΡΠΎΡΡΠ΅ Π²Π°ΠΌ Π½ΡΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ. ΠΠΎΠ³Π΄Π° Ρ ΡΠ°Π±ΠΎΡΠ°Π» Π½Π°Π΄ Π½ΠΈΠΌΠΈ, Ρ ΡΠ½Π°ΡΠ°Π»Π° Π·Π°Π³ΡΡΠΆΠ°Π» ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΡ Π²Π΅ΡΡΠΈΡ ΠΌΠΎΠ΅Π³ΠΎ ΠΏΡΠΈΠΌΠ΅ΡΠ° (not-responsive.html
), Π·Π°ΡΠ΅ΠΌ ΠΎΡΠΊΡΡΠ²Π°Π» Responsive Design View (Tools > Web Developer > Responsive Design View), ΠΊΠΎΡΠΎΡΡΠΉ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π²Π·Π³Π»ΡΠ½ΡΡΡ Π½Π° layout Π²Π°ΡΠ΅ΠΉ Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΡ ΠΊΠ°ΠΊ Π΅ΡΠ»ΠΈ Π±Ρ ΠΎΠ½ΠΈ Π±ΡΠ»ΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ΅Π½Ρ ΡΠ΅ΡΠ΅Π· ΡΡΡΡΠΎΠΉΡΡΠ²Π° Ρ ΡΠ°Π·Π»ΠΈΡΠ½ΡΠΌΠΈ ΡΠ°Π·ΠΌΠ΅ΡΠ°ΠΌΠΈ ΡΠΊΡΠ°Π½Π°.
Π― ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π» viewport width Π½Π° 320px, Π·Π°ΡΠ΅ΠΌ Π½Π° 480px; Π΄Π»Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠΉ Ρ ΠΎΠ±ΡΠ°ΡΠ°Π»ΡΡ ΠΊ DOM Inspector, ΠΊΠ»ΠΈΠΊΠ°Π» ΠΏΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ <img>
Π² ΠΊΠΎΡΠΎΡΠΎΠΌ ΠΌΡ Π·Π°ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠΎΠ²Π°Π½Ρ, Π΄Π°Π»Π΅Π΅ ΡΠΌΠΎΡΡΠ΅Π» ΡΠ°Π·ΠΌΠ΅Ρ Π²ΠΎ Π²ΠΊΠ»Π°Π΄ΠΊΠ΅ Box Model Ρ ΠΏΡΠ°Π²ΠΎΠΉ ΡΡΠΎΡΠΎΠ½Ρ Π΄ΠΈΡΠΏΠ»Π΅Ρ. ΠΡΠΎ Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π΄Π°ΡΡ Π²Π°ΠΌ Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΡΡ ΡΠΈΡΠΈΠ½Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ
Π Π΄Π°Π»ΡΡΠ΅ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΡΠΎΠ²Π΅ΡΠΈΡΡ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ Π»ΠΈ srcset
Π΅ΡΠ»ΠΈ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ viewport width ΡΠ°ΠΊΠΈΠΌ ΠΊΠ°ΠΊΠΈΠΌ Π²Ρ Ρ
ΠΎΡΠΈΡΠ΅ (Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ ΡΠ·ΠΊΡΡ ΡΠΈΡΠΈΠ½Ρ), ΠΎΡΠΊΡΡΠ² Network Inspector (Tools > Web Developer > Network) ΠΈ Π·Π°ΡΠ΅ΠΌ ΠΏΠ΅ΡΠ΅Π·Π°Π³ΡΡΠ·ΠΈΡΡ ΡΡΡΠ°Π½ΠΈΡΡ. ΠΡΠΎ Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π΄Π°ΡΡ Π²Π°ΠΌ ΠΏΠ΅ΡΠ΅ΡΠ΅Π½Ρ ΡΠ΅ΡΡΡΡΠΎΠ² ΠΊΠΎΡΠΎΡΡΠ΅ Π±ΡΠ»ΠΈ Π·Π°Π³ΡΡΠΆΠ΅Π½Ρ ΡΡΠΎΠ±Ρ ΡΠΎΡΡΠ°Π²ΠΈΡΡ (ΡΠΎΠ±ΡΠ°ΡΡ) web-ΡΡΡΠ°Π½ΠΈΡΡ, ΠΈ ΡΡΡ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΡΠΎΠ²Π΅ΡΠΈΡΡ ΠΊΠ°ΠΊΠΎΠΉ ΡΠ°ΠΉΠ» ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π±ΡΠ» Π²ΡΠ±ΡΠ°Π½ Π΄Π»Ρ Π·Π°Π³ΡΡΠ·ΠΊΠΈ.
ΠΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ΅Π½ΠΈΡ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΠΉ: ΠΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΡΠΉ ΡΠ°Π·ΠΌΠ΅Ρ, ΡΠ°Π·Π½ΡΠ΅ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΡ
ΠΡΠ»ΠΈ Π²Ρ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅ΡΠ΅ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΠΉ ΡΠΊΡΠ°Π½Π°, Π½ΠΎ Π²ΡΠ΅ Π²ΠΈΠ΄ΡΡ Π²Π°ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π² ΠΎΠ΄Π½ΠΎΠΌ ΠΈ ΡΠΎΠΌ ΠΆΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΠ΅ Π½Π° ΡΠΊΡΠ°Π½Π΅, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΡΡ Π±ΡΠ°ΡΠ·Π΅ΡΡ Π²ΡΠ±ΠΈΡΠ°ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Ρ ΠΏΠΎΠ΄Ρ
ΠΎΠ΄ΡΡΠΈΠΌ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ srcset
Ρ x-Π΄Π΅ΡΠΊΡΠΈΠΏΡΠΎΡΠΎΠΌ ΠΈ Π±Π΅Π· sizes
β Π±ΠΎΠ»Π΅Π΅ ΠΏΡΠΎΡΡΠΎΠΉ ΡΠΈΠ½ΡΠ°ΠΊΡΠΈΡ! ΠΠ°ΠΉΡΠΈ ΠΏΡΠΈΠΌΠ΅Ρ ΠΊΠ°ΠΊ ΡΡΠΎ Π²ΡΠ³Π»ΡΠ΄ΠΈΡ ΠΌΠΎΠΆΠ½ΠΎ Π·Π΄Π΅ΡΡ srcset-resolutions.html (ΡΠΌΠΎΡΡΠΈΡΠ΅ ΡΠ°ΠΊΠΆΠ΅ the source code):
<img srcset="elva-fairy-320w.jpg, elva-fairy-480w.jpg 1.5x, elva-fairy-640w.jpg 2x" src="elva-fairy-640w.jpg" alt="Elva dressed as a fairy">
Π Π΄Π°Π½Π½ΠΎΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅, ΠΊ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΡΡΡ CSS ΡΠ°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ, ΡΡΠΎ ΠΎΠ½ΠΎ ΠΈΠΌΠ΅Π΅Ρ ΡΠΈΡΠΈΠ½Ρ Π² 320 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ Π½Π° ΡΠΊΡΠ°Π½Π΅ (ΡΠ°ΠΊΠΆΠ΅ Π½Π°Π·ΡΠ²Π°Π΅ΠΌΠΎΠ΅ CSS-ΠΏΠΈΠΊΡΠ΅Π»ΡΠΌΠΈ):
img { width: 320px; }
Π ΡΡΠΎΠΌ ΡΠ»ΡΡΠ°Π΅, Π½Π΅Ρ Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΠΎΡΡΠΈ Π² sizes
β Π±ΡΠ°ΡΠ·Π΅Ρ ΠΏΡΠΎΡΡΠΎ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ Π² ΠΊΠ°ΠΊΠΎΠΌ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΠΈ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅Ρ Π΄ΠΈΡΠΏΠ»Π΅ΠΉ ΠΈ Π²ΡΠ²ΠΎΠ΄ΠΈΡ Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ ΠΏΠΎΠ΄Ρ
ΠΎΠ΄ΡΡΠ΅Π΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π² ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΠΈ Ρ srcset
. Π’Π°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ, Π΅ΡΠ»ΠΈ ΡΡΡΡΠΎΠΉΡΡΠ²ΠΎ, ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ°Π΅ΠΌΠΎΠ΅ ΠΊ ΡΡΡΠ°Π½ΠΈΡΠ΅, ΠΈΠΌΠ΅Π΅Ρ Π΄ΠΈΡΠΏΠ»Π΅ΠΉ ΡΡΠ°Π½Π΄Π°ΡΡΠ½ΠΎΠ³ΠΎ/Π½ΠΈΠ·ΠΊΠΎΠ³ΠΎ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΡ, ΠΊΠΎΠ³Π΄Π° ΠΎΠ΄ΠΈΠ½ ΠΏΠΈΠΊΡΠ΅Π»Ρ ΡΡΡΡΠΎΠΉΡΡΠ²Π° ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΠ΅Ρ (ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΠ΅Ρ) ΠΊΠ°ΠΆΠ΄ΡΠΉ CSS-ΠΏΠΈΠΊΡΠ΅Π»Ρ, ΡΠΎ Π±ΡΠ΄Π΅Ρ Π·Π°Π³ΡΡΠΆΠ΅Π½ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅
elva-fairy-320w.jpg
(ΠΏΡΠΈΠΌΠ΅Π½ΡΠ½ x1, ΡΠΎ Π΅ΡΡΡ Π²Π°ΠΌ Π½Π΅ Π½Π°Π΄ΠΎ Π²ΠΊΠ»ΡΡΠ°ΡΡ Π΅Π³ΠΎ). ΠΡΠ»ΠΈ ΡΡΡΡΠΎΠΉΡΡΠ²ΠΎ ΠΈΠΌΠ΅Π΅Ρ Π²ΡΡΠΎΠΊΠΎΠ΅ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΠ΅, Π² Π΄Π²Π° ΠΏΠΈΠΊΡΠ΅Π»Ρ ΡΡΡΡΠΎΠΉΡΡΠ²Π° Π½Π° ΠΊΠ°ΠΆΠ΄ΡΠΉ CSS-ΠΏΠΈΠΊΡΠ΅Π»Ρ ΠΈΠ»ΠΈ Π±ΠΎΠ»Π΅Π΅, ΡΠΎ Π±ΡΠ΄Π΅Ρ Π·Π°Π³ΡΡΠΆΠ΅Π½ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ elva-fairy-640w.jpg
. 640px ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΈΠΌΠ΅Π΅Ρ ΡΠ°Π·ΠΌΠ΅Ρ 93KB, ΡΠΎΠ³Π΄Π° ΡΠ°ΠΊ 320px ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ — Π²ΡΠ΅Π³ΠΎ 39KB.
Π₯ΡΠ΄ΠΎΠΆΠ΅ΡΡΠ²Π΅Π½Π½ΠΎΠ΅ ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΠ΅
ΠΠΎΠ΄Π²ΠΎΠ΄Ρ ΠΈΡΠΎΠ³ΠΈ, ΠΏΡΠΎΠ±Π»Π΅ΠΌΠ° Ρ
ΡΠ΄ΠΎΠΆΠ΅ΡΡΠ²Π΅Π½Π½ΠΎΠ³ΠΎ ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΡ Π·Π°ΠΊΠ»ΡΡΠ°Π΅ΡΡΡ Π² ΠΆΠ΅Π»Π°Π½ΠΈΠΈ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΠΌΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΡΡΠΎΠ±Ρ ΠΎΠ½ΠΎ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΎΠ²Π°Π»ΠΎ ΡΠ°Π·Π½ΡΠΌ ΡΠ°Π·ΠΌΠ΅ΡΠ°ΠΌ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, Π΅ΡΠ»ΠΈ Π½Π° Π²Π΅Π±-ΡΠ°ΠΉΡΠ΅ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΡΡΡ Π±ΠΎΠ»ΡΡΠΎΠΉ ΠΏΠ΅ΠΉΠ·Π°ΠΆΠ½ΡΠΉ ΡΠ½ΠΈΠΌΠΎΠΊ Ρ ΡΠ΅Π»ΠΎΠ²Π΅ΠΊΠΎΠΌ ΠΏΠΎΡΠ΅ΡΠ΅Π΄ΠΈΠ½Π΅ ΠΏΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ΅ Π² Π±ΡΠ°ΡΠ·Π΅ΡΠ΅ Π½Π° Π½Π°ΡΡΠΎΠ»ΡΠ½ΠΎΠΌ ΠΊΠΎΠΌΠΏΡΡΡΠ΅ΡΠ΅, ΡΠΎ ΠΏΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ΅ Π²Π΅Π±-ΡΠ°ΠΉΡΠ° Π² ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΠΎΠΌ Π±ΡΠ°ΡΠ·Π΅ΡΠ΅ ΠΎΠ½ ΡΠΌΠ΅Π½ΡΡΠ°Π΅ΡΡΡ; ΠΎΠ½ Π±ΡΠ΄Π΅Ρ Π²ΡΠ³Π»ΡΠ΄Π΅ΡΡ ΠΏΠ»ΠΎΡ
ΠΎ ΡΠ°ΠΊ ΠΊΠ°ΠΊ ΡΠ΅Π»ΠΎΠ²Π΅ΠΊ Π±ΡΠ΄Π΅Ρ ΠΎΡΠ΅Π½Ρ ΠΌΠ°Π»Π΅Π½ΡΠΊΠΈΠΌ, ΠΈ Π΅Π³ΠΎ Π±ΡΠ΄Π΅Ρ ΡΡΠΆΠ΅Π»ΠΎ ΡΠ°Π·Π³Π»ΡΠ΄Π΅ΡΡ. ΠΠ΅ΡΠΎΡΡΠ½ΠΎ Π±ΡΠ΄Π΅Ρ Π»ΡΡΡΠ΅ ΠΏΠΎΠΊΠ°Π·Π°ΡΡ ΠΌΠ΅Π½ΡΡΡΡ ΠΏΠΎΡΡΡΠ΅ΡΠ½ΡΡ ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ Π² ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΠΎΠΉ Π²Π΅ΡΡΠΈΠΈ Π½Π° ΠΊΠΎΡΠΎΡΠΎΠΉ ΡΠ΅Π»ΠΎΠ²Π΅ΠΊ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΡΡΡ Π² ΡΠ²Π΅Π»ΠΈΡΠ΅Π½ΠΈΠΈ (Π² ΠΏΡΠΈΠ±Π»ΠΈΠΆΠ΅Π½ΠΈΠΈ). ΠΠ»Π΅ΠΌΠ΅Π½Ρ
<picture>
ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π½Π°ΠΌ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡ ΠΈΠΌΠ΅Π½Π½ΠΎ ΡΠ°ΠΊΠΎΠ΅ ΡΠ΅ΡΠ΅Π½ΠΈΠ΅.
ΠΠΎΠ·Π²ΡΠ°ΡΠ°ΡΡΡ ΠΊ Π½Π°ΡΠ΅ΠΌΡ ΠΎΡΠΈΠ³ΠΈΠ½Π°Π»ΡΠ½ΠΎΠΌΡ ΠΏΡΠΈΠΌΠ΅ΡΡ not-responsive.html, ΠΌΡ ΠΈΠΌΠ΅Π΅ΠΌ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΊΠΎΡΠΎΡΠΎΠ΅ ΠΎΡΠ΅Π½Ρ Π½ΡΠΆΠ΄Π°Π΅ΡΡΡ Π² Ρ ΡΠ΄ΠΎΠΆΠ΅ΡΡΠ²Π΅Π½Π½ΠΎΠΌ ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΠΈ:
<img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva">
ΠΠ°Π²Π°ΠΉΡΠ΅ ΠΈΡΠΏΡΠ°Π²ΠΈΠΌ ΡΡΠΎ ΠΏΡΠΈ ΠΏΠΎΠΌΠΎΡΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° <picture>
! Π’Π°ΠΊ ΠΆΠ΅ ΠΊΠ°ΠΊ <video>
ΠΈ <audio>
, ΡΠ»Π΅ΠΌΠ΅Π½Ρ <picture>
ΡΡΠΎ ΠΎΠ±ΡΡΡΠΊΠ° ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠ°Ρ Π½Π΅ΠΊΠΎΡΠΎΡΠΎΠ΅ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² <source>
ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»ΡΡΡ Π±ΡΠ°ΡΠ·Π΅ΡΡ Π²ΡΠ±ΠΎΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΡ
ΡΠ°Π·Π½ΡΡ
ΠΈΡΡΠΎΡΠ½ΠΈΠΊΠΎΠ², Π² ΡΠΎΠΏΡΠΎΠ²ΠΎΠΆΠ΄Π΅Π½ΠΈΠΈ ΠΊΡΠ°ΠΉΠ½Π΅ Π²Π°ΠΆΠ½ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° <img>
. ΠΠΎΠ΄ responsive.html Π²ΡΠ³Π»ΡΠ΄ΠΈΡ ΡΠ°ΠΊ:
<picture> <source media="(max-width: 799px)" srcset="elva-480w-close-portrait.jpg"> <source media="(min-width: 800px)" srcset="elva-800w.jpg"> <img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva"> </picture>
- ΠΠ»Π΅ΠΌΠ΅Π½Ρ
<source>
ΠΏΡΠΈΠ½ΠΈΠΌΠ°Π΅Ρ Π°ΡΡΠΈΠ±ΡΡmedia
, ΠΊΠΎΡΠΎΡΡΠΉ ΡΠΎΠ΄Π΅ΡΠΆΠΈΡ ΠΌΠ΅Π΄ΠΈΠ°-ΡΡΠ»ΠΎΠ²ΠΈΠ΅; ΠΏΡΠΈ ΠΏΠΎΠΌΠΎΡΠΈ ΡΡΠΈΡ ΡΡΠ»ΠΎΠ²ΠΈΠΉ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅ΡΡΡ, ΠΊΠ°ΠΊΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π±ΡΠ΄Π΅Ρ Π²ΡΠ²Π΅Π΄Π΅Π½ΠΎ. Π Π΄Π°Π½Π½ΠΎΠΌ ΡΠ»ΡΡΠ°Π΅, Π΅ΡΠ»ΠΈ ΡΠΈΡΠΈΠ½Π° viewport’a ΡΠΎΡΡΠ°Π²ΠΈΡ 799px ΠΈΠ»ΠΈ ΠΌΠ΅Π½ΡΡΠ΅, Π±ΡΠ΄Π΅Ρ Π²ΡΠ²Π΅Π΄Π΅Π½ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΏΠ΅ΡΠ²ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°<source>
. ΠΡΠ»ΠΈ ΡΠΈΡΠΈΠ½Π° ΡΠΎΡΡΠ°Π²ΠΈΡ 800px ΠΈ Π±ΠΎΠ»Π΅Π΅ β Π²ΡΠΎΡΠΎΠ³ΠΎ. - ΠΡΡΠΈΠ±ΡΡ
srcset
ΡΠΎΠ΄Π΅ΡΠΆΠΈΡ ΠΏΡΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, ΠΊΠΎΡΠΎΡΠΎΠ΅ Π±ΡΠ΄Π΅Ρ Π²ΡΠ²Π΅Π΄Π΅Π½ΠΎ. ΠΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, ΡΡΠΎ, ΠΊΠ°ΠΊ ΠΈ Π² ΠΏΡΠΈΠΌΠ΅ΡΠ΅ Ρ<img>
Π²ΡΡΠ΅,<source>
ΠΌΠΎΠΆΠ΅Ρ ΠΏΡΠΈΠ½ΠΈΠΌΠ°ΡΡ Π°ΡΡΠΈΠ±ΡΡΡsrcset
ΠΈsizes
Ρ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΏΡΠ΅Π΄ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ½Π½ΡΠΌΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡΠΌΠΈ. Π’Π°ΠΊ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π½Π΅ ΡΠΎΠ»ΡΠΊΠΎ ΠΏΠΎΠΌΠ΅ΡΡΠΈΡΡ Π³ΡΡΠΏΠΏΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ Π²Π½ΡΡΡΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°<picture>
, Π½ΠΎ ΠΈ Π·Π°Π΄Π°ΡΡ Π³ΡΡΠΏΠΏΡ ΠΏΡΠ΅Π΄ΠΏΠΈΡΠ°Π½ΠΈΠΉ Π΄Π»Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΠΈΠ· Π½ΠΈΡ . Π ΡΠ΅Π°Π»ΡΠ½ΠΎΡΡΠΈ Π²Ρ Π²ΡΡΠ΄ Π»ΠΈ Π·Π°Ρ ΠΎΡΠΈΡΠ΅ Π·Π°Π½ΠΈΠΌΠ°ΡΡΡΡ ΡΡΠΈΠΌ ΠΎΡΠ΅Π½Ρ ΡΠ°ΡΡΠΎ. - ΠΡ Π²ΡΠ΅Π³Π΄Π° Π΄ΠΎΠ»ΠΆΠ½Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
<img>
, Ρsrc
ΠΈalt
, ΠΏΡΡΠΌΠΎ ΠΏΠ΅ΡΠ΅Π΄</picture>
, ΠΈΠ½Π°ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π½Π΅ ΠΏΠΎΡΠ²ΡΡΡΡ. ΠΡΠΎ Π½ΡΠΆΠ½ΠΎ Π½Π° ΡΠΎΡ ΡΠ»ΡΡΠ°ΠΉ, ΠΊΠΎΠ³Π΄Π° Π½ΠΈ ΠΎΠ΄Π½ΠΎ ΠΈΠ· ΠΌΠ΅Π΄ΠΈΠ°-ΡΡΠ»ΠΎΠ²ΠΈΠΉ Π½Π΅ ΡΠ΄ΠΎΠ²Π»Π΅ΡΠ²ΠΎΡΠ΅Π½ΠΎ (Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, Π΅ΡΠ»ΠΈ Π±Ρ Π²Ρ ΡΠ±ΡΠ°Π»ΠΈ Π²ΡΠΎΡΠΎΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ<source>)
ΠΈΠ»ΠΈ Π±ΡΠ°ΡΠ·Π΅Ρ Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅Ρ ΡΠ»Π΅ΠΌΠ΅Π½Ρ<picture>
.
ΠΡΠΎΡ ΠΊΠΎΠ΄ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π½Π°ΠΌ Π²ΡΠ²ΠΎΠ΄ΠΈΡΡ ΠΎΡΠ·ΡΠ²ΡΠΈΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΈ Π½Π° ΡΠΈΡΠΎΠΊΠΈΡ , ΠΈ Π½Π° ΡΠ·ΠΊΠΈΡ ΡΠΊΡΠ°Π½Π°Ρ , ΠΊΠ°ΠΊ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ Π½ΠΈΠΆΠ΅:
ΠΡΠΈΠΌΠ΅ΡΠ°Π½ΠΈΠ΅: Π²Π°ΠΌ ΡΠ»Π΅Π΄ΡΠ΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π°ΡΡΠΈΠ±ΡΡ media
ΡΠΎΠ»ΡΠΊΠΎ ΠΏΡΠΈ Ρ
ΡΠ΄ΠΎΠΆΠ΅ΡΡΠ²Π΅Π½Π½ΠΎΠΌ ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΠΈ; ΠΊΠΎΠ³Π΄Π° Π²Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΠ΅ media
, Π½Π΅ ΠΏΡΠΈΠΌΠ΅Π½ΡΠΉΡΠ΅ ΠΌΠ΅Π΄ΠΈΠ°-ΡΡΠ»ΠΎΠ²ΠΈΡ Ρ Π°ΡΡΠΈΠ±ΡΡΠΎΠΌ sizes
.
ΠΠΎΡΠ΅ΠΌΡ ΡΡΠΎ Π½Π΅Π»ΡΠ·Ρ ΡΠ΄Π΅Π»Π°ΡΡ ΠΏΠΎΡΡΠ΅Π΄ΡΡΠ²ΠΎΠΌ CSS ΠΈ JavaScript?
ΠΠΎΠ³Π΄Π° Π±ΡΠ°ΡΠ·Π΅Ρ Π½Π°ΡΠΈΠ½Π°Π΅Ρ Π·Π°Π³ΡΡΠΆΠ°ΡΡ ΡΡΡΠ°Π½ΠΈΡΡ, ΠΎΠ½ Π½Π°ΡΠΈΠ½Π°Π΅Ρ Π·Π°Π³ΡΡΠ·ΠΊΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ Π΄ΠΎ ΡΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ Π³Π»Π°Π²Π½ΡΠΉ ΠΏΠ°ΡΡΠ΅Ρ Π½Π°ΡΠ°Π» Π·Π°Π³ΡΡΠΆΠ°ΡΡ ΠΈ ΠΈΠ½ΡΠ΅ΡΠΏΡΠ΅ΡΠΈΡΠΎΠ²Π°ΡΡ CSS ΠΈ JavaScript. Π ΡΡΠ΅Π΄Π½Π΅ΠΌ, ΡΡΠ° ΡΠ΅Ρ
Π½ΠΈΠΊΠ° ΡΠΌΠ΅Π½ΡΡΠ°Π΅Ρ Π²ΡΠ΅ΠΌΡ Π·Π°Π³ΡΡΠ·ΠΊΠΈ ΡΡΡΠ°Π½ΠΈΡΡ Π½Π° 20%. ΠΠΎ ΠΎΠ½Π° Π½Π΅ ΡΠ°ΠΊ ΠΏΠΎΠ»Π΅Π·Π½Π° Π² ΡΠ»ΡΡΠ°Π΅ Ρ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΠΌΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡΠΌΠΈ, ΠΏΠΎΡΡΠΎΠΌΡ ΠΈ Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΡ ΡΠ°ΠΊΠΈΠ΅ ΡΠ΅ΡΠ΅Π½ΠΈΡ, ΠΊΠ°ΠΊ
srcset
. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, Π²Ρ Π½Π΅ ΠΌΠΎΠ³Π»ΠΈ Π±Ρ Π·Π°Π³ΡΡΠ·ΠΈΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ <img>
, ΠΏΠΎΡΠΎΠΌ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΠΈΡΡ ΡΠΈΡΠΈΠ½Ρ Π²ΡΡΠΏΠΎΡΡΠ° ΠΏΡΠΈ ΠΏΠΎΠΌΠΎΡΠΈ JavaScript ΠΈ Π΄ΠΈΠ½Π°ΠΌΠΈΡΠ΅ΡΠΊΠΈ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΠΈΡΡΠΎΡΠ½ΠΈΠΊ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ. ΠΠ·Π½Π°ΡΠ°Π»ΡΠ½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π±ΡΠ»ΠΎ Π±Ρ ΡΠΆΠ΅ Π·Π°Π³ΡΡΠΆΠ΅Π½ΠΎ ΠΊ ΡΠΎΠΌΡ Π²ΡΠ΅ΠΌΠ΅Π½ΠΈ, ΠΊΠ°ΠΊ Π²Ρ Π·Π°Π³ΡΡΠ·ΠΈΠ»ΠΈ Π΅Π³ΠΎ ΠΌΠ΅Π½ΡΡΡΡ Π²Π΅ΡΡΠΈΡ, ΡΡΠΎ ΠΏΠ»ΠΎΡ
ΠΎ.
Π‘ΠΌΠ΅Π»ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΡΠ΅ ΡΠΎΡΠΌΠ°ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ
ΠΡΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ Π½ΠΎΠ²ΡΡ ΡΠΎΡΠΌΠ°ΡΠΎΠ² ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ (ΡΠ°ΠΊΠΈΡ , ΠΊΠ°ΠΊ WebP ΠΈ JPEG-2000), ΠΊΠΎΡΠΎΡΡΠΌ ΡΠ΄Π°ΡΡΡΡ ΡΠΎΡ ΡΠ°Π½ΡΡΡ Π²ΡΡΠΎΠΊΠΎΠ΅ ΠΊΠ°ΡΠ΅ΡΡΠ²ΠΎ ΠΏΡΠΈ ΠΌΠ°Π»ΠΎΠΌ ΡΠ°Π·ΠΌΠ΅ΡΠ΅ ΡΠ°ΠΉΠ»Π°. Π’Π΅ΠΌ Π½Π΅ ΠΌΠ΅Π½Π΅Π΅, Π±ΡΠ°ΡΠ·Π΅ΡΡ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡ ΠΈΡ Π½Π΅ ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ.
<picture>
ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π½Π°ΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΈΡ
Π² ΡΡΠ°ΡΡΡ
Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ
. ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΡΠΎΠΏΠΈΡΠ°ΡΡ MIME-ΡΠΈΠΏ Π²Π½ΡΡΡΠΈ Π°ΡΡΠΈΠ±ΡΡΠ° type
, Π±ΡΠ°ΡΠ·Π΅Ρ ΡΡΠ°Π·Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΠΈΡ ΡΠ°ΠΉΠ»Ρ ΡΠ°ΠΊΠΎΠ³ΠΎ ΡΠΈΠΏΠ° ΠΊΠ°ΠΊ Π½Π΅ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅ΠΌΡΠ΅:
<picture> <source type="image/svg+xml" srcset="pyramid.svg"> <source type="image/webp" srcset="pyramid.webp"> <img src="pyramid.png" alt="regular pyramid built from four equilateral triangles"> </picture>
- ΠΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ Π°ΡΡΠΈΠ±ΡΡ
media
, Π΅ΡΠ»ΠΈ Π²Π°ΠΌ Π½Π΅ Π½ΡΠΆΠ½ΠΎ Ρ ΡΠ΄ΠΎΠΆΠ΅ΡΡΠ²Π΅Π½Π½ΠΎΠ΅ ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΠ΅. - Π ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ΅
<source>
ΠΌΠΎΠΆΠ½ΠΎ ΡΠΊΠ°Π·ΡΠ²Π°ΡΡ ΠΏΡΡΡ ΠΊ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡΠΌ ΡΠΎΠ»ΡΠΊΠΎ ΡΠΎΠ³ΠΎ ΡΠΈΠΏΠ°, ΠΊΠΎΡΠΎΡΡΠΉ ΡΠΊΠ°Π·Π°Π½ Π²type
. - ΠΠ°ΠΊ ΠΈ Π² ΠΏΡΠ΅Π΄ΡΠ΄ΡΡΠΈΡ
ΠΏΡΠΈΠΌΠ΅ΡΠ°Ρ
, ΠΏΡΠΈ Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΠΎΡΡΠΈ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ
srcset
ΠΈsizes
.
Π‘Π°ΠΌΠΎΡΡΠΎΡΡΠ΅Π»ΡΠ½ΠΎ ΡΠΎΠ·Π΄Π°ΠΉΡΠ΅ ΠΎΡΠ·ΡΠ²ΡΠΈΠ²ΠΎΠ΅, Ρ
ΡΠ΄ΠΎΠΆΠ΅ΡΡΠ²Π΅Π½Π½ΠΎ ΠΎΡΠΎΡΠΌΠ»Π΅Π½Π½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π΄Π»Ρ ΡΠΈΡΠΎΠΊΠΈΡ
ΠΈ ΡΠ·ΠΊΠΈΡ
ΡΠΊΡΠ°Π½ΠΎΠ², ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ <picture>
ΠΈ srcset
.
- ΠΠ°ΠΏΠΈΡΠΈΡΠ΅ ΠΏΡΠΎΡΡΡΡ HTML-ΡΠ°Π·ΠΌΠ΅ΡΠΊΡ.
- ΠΠ°ΠΉΠ΄ΠΈΡΠ΅ ΡΠΈΡΠΎΠΊΠΎΡΠΎΡΠΌΠ°ΡΠ½ΠΎΠ΅ ΠΏΠ΅ΠΉΠ·Π°ΠΆΠ½ΠΎΠ΅ ΡΠΎΡΠΎ Ρ ΠΊΠ°ΠΊΠΎΠΉ-Π½ΠΈΠ±ΡΠ΄Ρ ΡΡΠΊΠΎΠΉ Π΄Π΅ΡΠ°Π»ΡΡ. Π‘ΠΎΠ·Π΄Π°ΠΉΡΠ΅ Π²Π΅Π±-Π²Π΅ΡΡΠΈΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΏΠΎΡΡΠ΅Π΄ΡΡΠ²ΠΎΠΌ Π³ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠ³ΠΎ ΡΠ΅Π΄Π°ΠΊΡΠΎΡΠ°, ΠΏΠΎΡΠΎΠΌ ΠΎΠ±ΡΠ΅ΠΆΡΡΠ΅ Π΅Π³ΠΎ, ΡΡΠΎΠ±Ρ ΠΊΡΡΠΏΠ½Π΅Π΅ Π²ΡΠ΄Π΅Π»ΠΈΡΡ Π΄Π΅ΡΠ°Π»Ρ, ΠΈ ΡΠΎΠ·Π΄Π°ΠΉΡΠ΅ Π²ΡΠΎΡΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ (ΠΏΡΠΈΠΌΠ΅ΡΠ½ΠΎ 480px Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ).
- ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
<picture>
Π΄Π»Ρ ΡΠ°Π±ΠΎΡΡ Ρ Ρ ΡΠ΄ΠΎΠΆΠ΅ΡΡΠ²Π΅Π½Π½ΠΎ ΠΎΡΠΎΡΠΌΠ»Π΅Π½Π½ΠΎΠΉ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΎΠΉ. - ΠΠ±ΠΎΠ·Π½Π°ΡΡΡΠ΅ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠ°Π·Π½ΡΡ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ² Π΄Π»Ρ ΡΡΠΎΠΉ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ.
- ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅
srcset
/size
Π΄Π»Ρ ΠΎΠΏΠΈΡΠ°Π½ΠΈΡ ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ΅Π½ΠΈΡ ΠΏΡΠΈ ΡΠΌΠ΅Π½Π΅ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ² Π²ΡΡΠΏΠΎΡΡΠ°
ΠΡΠΈΠΌΠ΅ΡΠ°Π½ΠΈΠ΅: ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΡ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠ°, ΡΡΠΎΠ±Ρ ΠΎΡΡΠ»Π΅Π΄ΠΈΡΡ ΡΠΌΠ΅Π½Ρ ΡΠ°Π·ΠΌΠ΅ΡΠ°, ΠΊΠ°ΠΊ Π±ΡΠ»ΠΎ ΠΎΠΏΠΈΡΠ°Π½ΠΎ Π²ΡΡΠ΅.
ΠΡΠΎ Π²ΡΠ΅ Π΄Π»Ρ ΠΎΡΠ·ΡΠ²ΡΠΈΠ²ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ — ΠΌΡ Π½Π°Π΄Π΅Π΅ΠΌΡΡ, Π²Π°ΠΌ ΠΏΠΎΠ½ΡΠ°Π²ΠΈΠ»ΠΎΡΡ ΠΈΠ³ΡΠ°ΡΡ Ρ ΡΡΠΈΠΌΠΈ Π½ΠΎΠ²ΡΠΌΠΈ ΡΠ΅Ρ Π½ΠΎΠ»ΠΎΠ³ΠΈΡΠΌΠΈ. ΠΠ°ΠΏΠΎΠΌΠ½ΠΈΠΌ, ΡΡΠΎ ΠΌΡ Π·Π΄Π΅ΡΡ ΠΎΠ±ΡΡΠΆΠ΄Π°Π»ΠΈ Π΄Π²Π΅ ΡΠ°Π·Π»ΠΈΡΠ½ΡΠ΅ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ:
- Π₯ΡΠ΄ΠΎΠΆΠ΅ΡΡΠ²Π΅Π½Π½ΠΎΠ΅ ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΠ΅: ΠΡΠΎΠ±Π»Π΅ΠΌΠ°, ΠΏΡΠΈ ΠΊΠΎΡΠΎΡΠΎΠΉ Π²Ρ Ρ
ΠΎΡΠΈΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΎΠ±ΡΠ΅Π·Π°Π½Π½ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π΄Π»Ρ ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ
ΠΌΠ°ΠΊΠ΅ΡΠΎΠ² — Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, Π»Π°Π½Π΄ΡΠ°ΡΡΠ½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π΄Π»Ρ ΠΏΠΎΠ»Π½ΡΡ
ΡΠΊΡΠ°Π½ΠΎΠ² Π½Π° ΠΌΠ°ΠΊΠ΅ΡΠ΅ ΠΊΠΎΠΌΠΏΡΡΡΠ΅ΡΠ° ΠΈ ΠΏΠΎΡΡΡΠ΅ΡΠ½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅, ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°ΡΡΠ΅Π΅ ΡΠ²Π΅Π»ΠΈΡΠ΅Π½Π½ΡΠΉ ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠΉ ΠΎΠ±ΡΠ΅ΠΊΡ, Π΄Π»Ρ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΠΎΠ³ΠΎ ΠΌΠ°ΠΊΠ΅ΡΠ°. ΠΡΡ ΡΡΠΎ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΡΠ΅ΡΠ΅Π½ΠΎ Ρ ΠΏΠΎΠΌΠΎΡΡΡ
<picture>
ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. - ΠΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΠΉ: ΠΡΠΎΠ±Π»Π΅ΠΌΠ°, ΠΏΡΠΈ ΠΊΠΎΡΠΎΡΠΎΠΉ Π²Ρ Ρ
ΠΎΡΠΈΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠ°ΠΉΠ»Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ ΠΌΠ΅Π½ΡΡΠ΅Π³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ° Π½Π° ΡΡΡΡΠΎΠΉΡΡΠ²Π°Ρ
Ρ ΡΠ·ΠΊΠΈΠΌ ΡΠΊΡΠ°Π½ΠΎΠΌ, ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΠΈΠΌ Π½Π΅ Π½ΡΠΆΠ½Ρ ΠΎΠ³ΡΠΎΠΌΠ½ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, ΠΊΠ°ΠΊ Π½Π° Π½Π°ΡΡΠΎΠ»ΡΠ½ΡΡ
Π΄ΠΈΡΠΏΠ»Π΅ΡΡ
, Π° ΡΠ°ΠΊΠΆΠ΅ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΠΎ, ΡΡΠΎ Π²Ρ Ρ
ΠΎΡΠΈΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΡΠ°Π·Π½ΠΎΠ³ΠΎ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΡ Π΄Π»Ρ ΡΠΊΡΠ°Π½ΠΎΠ² Ρ Π²ΡΡΠΎΠΊΠΎΠΉ/Π½ΠΈΠ·ΠΊΠΎΠΉ ΠΏΠ»ΠΎΡΠ½ΠΎΡΡΡΡ.
ΠΡΡ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΅ΡΠΈΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ Π²Π΅ΠΊΡΠΎΡΠ½ΠΎΠΉ Π³ΡΠ°ΡΠΈΠΊΠΈ (SVG ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ), ΠΈ
srcset
ΠΈsizes
Π°ΡΡΠΈΠ±ΡΡΡ.
ΠΡΠΎ ΡΠ°ΠΊ ΠΆΠ΅ ΠΏΠΎΠ΄Π²ΠΎΠ΄ΠΈΡ Π½Π°Ρ ΠΊ ΠΎΠΊΠΎΠ½ΡΠ°Π½ΠΈΡ ΡΠ΅Π»ΠΎΠ³ΠΎ ΠΌΠΎΠ΄ΡΠ»Ρ «ΠΡΠ»ΡΡΠΈΠΌΠ΅Π΄ΠΈΠ° ΠΈ Π²ΡΡΡΠ°ΠΈΠ²Π°Π½ΠΈΠ΅»! ΠΠ΄ΠΈΠ½ΡΡΠ²Π΅Π½Π½ΠΎΠ΅, ΡΡΠΎ Π²Π°ΠΌ ΠΎΡΡΠ°Π»ΠΎΡΡ ΡΠ΅ΠΉΡΠ°Ρ ΡΠ΄Π΅Π»Π°ΡΡ ΠΏΠ΅ΡΠ΅Π΄ ΡΠ΅ΠΌ, ΠΊΠ°ΠΊ Π΄Π²ΠΈΠ³Π°ΡΡΡΡ Π΄Π°Π»ΡΡΠ΅ — ΡΡΠΎ ΠΏΠΎΠΏΡΠΎΠ±ΠΎΠ²Π°ΡΡ Π½Π°ΡΠ΅ ΠΌΡΠ»ΡΡΠΈΠΌΠ΅Π΄ΠΈΠΉΠ½ΠΎΠ΅ Π·Π°Π΄Π°Π½ΠΈΠ΅ ΠΈ ΠΏΠΎΡΠΌΠΎΡΡΠ΅ΡΡ, ΠΊΠ°ΠΊ Π²Ρ ΡΡΠ²ΠΎΠΈΠ»ΠΈ ΠΌΠ°ΡΠ΅ΡΠΈΠ°Π». ΠΠ΅ΡΠ΅Π»ΠΈΡΠ΅ΡΡ!
- ΠΡΠ»ΠΈΡΠ½ΠΎΠ΅ Π²Π²Π΅Π΄Π΅Π½ΠΈΠ΅ Π² ΠΎΡΠ·ΡΠ²ΡΠΈΠ²ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΎΡ ΠΠΆΠ΅ΠΉΡΠΎΠ½Π° ΠΡΠΈΠ³ΡΠ±ΠΈ
- ΠΡΠ·ΡΠ²ΡΠΈΠ²ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ: ΠΡΠ»ΠΈ Π²Ρ ΡΠΎΠ»ΡΠΊΠΎ ΠΌΠ΅Π½ΡΠ΅ΡΠ΅ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ srcset β Π²ΠΊΠ»ΡΡΠ°Π΅Ρ Π±ΠΎΠ»ΡΡΠ΅ ΠΎΠ±ΡΡΡΠ½Π΅Π½ΠΈΠΉ ΡΠΎΠ³ΠΎ,ΠΊΠ°ΠΊ Π±ΡΠ°ΡΠ·Π΅Ρ Π²ΡΠ±ΠΈΡΠ°Π΅Ρ,ΠΊΠ°ΠΊΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ
<img>
<picture>
<source>
- ΠΠ°Π·Π°Π΄
- ΠΠ±Π·ΠΎΡ: Multimedia and embedding
- ΠΠ°Π»Π΅Π΅
Found a content problem with this page?
- Edit the page on GitHub.
- Report the content issue.
- View the source on GitHub.
Want to get more involved?
Learn how to contribute.
This page was last modified on by MDN contributors.
Π§ΡΠΎ ΡΠ°ΠΊΠΎΠ΅ Π΄ΠΈΠ½Π°ΠΌΠΈΡΠ΅ΡΠΊΠΈΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ? | ΠΠ΅Π½Π΅ΡΠ°ΡΠΈΡ Π΄ΠΈΠ½Π°ΠΌΠΈΡΠ΅ΡΠΊΠΈΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ Π΄Π»Ρ Π²Π΅Π±-ΡΠ°ΠΉΡΠΎΠ²
ΠΠ·ΡΡΠΊΠ°Π½Π½ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π΄ΠΎΡΡΠ°Π²ΡΡ ΠΏΠΎΡΠ΅ΡΠΈΡΠ΅Π»ΡΠΌ Π²Π΅Π±-ΡΠ°ΠΉΡΠΎΠ² Π½Π°ΡΡΠΎΡΡΠ΅Π΅ Π²ΠΈΠ·ΡΠ°Π»ΡΠ½ΠΎΠ΅ Π½Π°ΡΠ»Π°ΠΆΠ΄Π΅Π½ΠΈΠ΅. ΠΠ΄Π½Π°ΠΊΠΎ Ρ ΠΏΡΠΎΠ΄Π²ΠΈΠ½ΡΡΠΎΠΉ Π³ΡΠ°ΡΠΈΠΊΠΎΠΉ Π²ΠΎΠ·Π½ΠΈΠΊΠ°Π΅Ρ ΡΠΈΡΠΊ Π±ΠΎΠ»Π΅Π΅ ΠΌΠ΅Π΄Π»Π΅Π½Π½ΠΎΠΉ Π·Π°Π³ΡΡΠ·ΠΊΠΈ ΡΡΡΠ°Π½ΠΈΡΡ. ΠΡΠΎ, Π² ΡΠ²ΠΎΡ ΠΎΡΠ΅ΡΠ΅Π΄Ρ, ΠΎΠ³ΡΠ°Π½ΠΈΡΠΈΠ²Π°Π΅Ρ Π²Π°Ρ ΠΏΠΎΡΠ΅Π½ΡΠΈΠ°Π» ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΡΠ΄ΠΎΠ±Π½ΠΎΠ³ΠΎ Π²Π΅Π±-ΡΠ°ΠΉΡΠ° ΠΈ ΠΌΠΎΠΆΠ΅Ρ Π½Π΅Π³Π°ΡΠΈΠ²Π½ΠΎ ΡΠΊΠ°Π·Π°ΡΡΡΡ Π½Π° Π²Π°ΡΠΈΡ ΡΡΠΈΠ»ΠΈΡΡ ΠΏΠΎ ΠΎΡΠ³Π°Π½ΠΈΡΠ΅ΡΠΊΠΎΠΉ ΠΏΠΎΠΈΡΠΊΠΎΠ²ΠΎΠΉ ΠΎΠΏΡΠΈΠΌΠΈΠ·Π°ΡΠΈΠΈ (SEO).
ΠΡΡΡΡΠΎΠ΅ ΡΠ°Π·Π²ΠΈΡΠΈΠ΅ ΡΠ΅Ρ
Π½ΠΎΠ»ΠΎΠ³ΠΈΠΉ, ΡΠΊΠΎΡΠ΅Π½ΠΈΠ²ΡΠΈΡ
ΡΡ Π² Π½Π°ΡΠ΅ΠΉ ΠΏΠΎΠ²ΡΠ΅Π΄Π½Π΅Π²Π½ΠΎΠΉ Π΄Π΅ΡΡΠ΅Π»ΡΠ½ΠΎΡΡΠΈ, ΡΠ΄Π΅Π»Π°Π»ΠΎ Π»ΡΠ΄Π΅ΠΉ ΠΌΠ΅Π½Π΅Π΅ ΡΠ΅ΡΠΏΠ΅Π»ΠΈΠ²ΡΠΌΠΈ. Π‘ΡΠ΅Π΄Π½ΠΈΠΉ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ ΠΠ½ΡΠ΅ΡΠ½Π΅ΡΠ° Π² Π½Π°ΡΡΠΎΡΡΠ΅Π΅ Π²ΡΠ΅ΠΌΡ Ρ
ΠΎΡΠ΅Ρ, ΡΡΠΎΠ±Ρ ΠΈΡ
Π΄Π°Π½Π½ΡΠ΅ Π±ΡΠ»ΠΈ Π±ΡΡΡΡΡΠΌΠΈ. ΠΠΎΡΡΠΎΠΌΡ Π½Π΅ΡΠ΄ΠΈΠ²ΠΈΡΠ΅Π»ΡΠ½ΠΎ, ΡΡΠΎ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ Π²ΡΠ΅Π³ΠΎ Π΄ΠΎΠ»ΠΈ ΡΠ΅ΠΊΡΠ½Π΄Ρ ΠΊ Π·Π°Π³ΡΡΠ·ΠΊΠ΅ ΡΡΡΠ°Π½ΠΈΡΡ ΠΌΠΎΠΆΠ΅Ρ Π·Π½Π°ΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠ²Π΅Π»ΠΈΡΠΈΡΡ ΠΏΠΎΠΊΠ°Π·Π°ΡΠ΅Π»Ρ ΠΎΡΠΊΠ°Π·ΠΎΠ² ΠΈ ΡΠ½ΠΈΠ·ΠΈΡΡ ΠΊΠΎΡΡΡΠΈΡΠΈΠ΅Π½Ρ ΠΊΠΎΠ½Π²Π΅ΡΡΠΈΠΈ. ΠΠΎΡ ΠΏΠΎΡΠ΅ΠΌΡ ΠΌΠ½ΠΎΠ³ΠΈΠ΅ ΠΊΠΎΠΌΠΏΠ°Π½ΠΈΠΈ ΠΈΠ΄ΡΡ Π½Π° Π½Π΅ΠΆΠ΅Π»Π°ΡΠ΅Π»ΡΠ½ΡΠ΅ ΠΊΠΎΠΌΠΏΡΠΎΠΌΠΈΡΡΡ, ΡΡΠΎΠ±Ρ ΡΡΠΊΠΎΡΠΈΡΡ ΡΠ°Π±ΠΎΡΡ Π²Π΅Π±-ΡΠ°ΠΉΡΠ°.
Π ΡΡΠ°ΡΡΡΡ, ΠΎΡΠ»ΠΈΡΠ½ΠΎΠ΅ ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ ΠΎΠ±Π΅ΡΠ°Π΅Ρ ΡΡΠΊΠΎΡΠΈΡΡ ΠΏΡΠΎΡΠ΅ΡΡ Π·Π°Π³ΡΡΠ·ΠΊΠΈ, ΡΠΎΡ ΡΠ°Π½ΡΡ ΠΏΡΠΈ ΡΡΠΎΠΌ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡ Π±ΠΎΠ³Π°ΡΠΎΠ΅ ΠΈ ΡΡΡΠ΅ΡΠΈΡΠ΅ΡΠΊΠΈ ΠΏΡΠΈΡΡΠ½ΠΎΠ΅ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΡΡΠ°Π»ΠΎ ΠΏΠΎΠΏΡΠ»ΡΡΠ½ΡΠΌ Π² ΠΏΠΎΡΠ»Π΅Π΄Π½ΠΈΠ΅ Π³ΠΎΠ΄Ρ: Π΄ΠΈΠ½Π°ΠΌΠΈΡΠ΅ΡΠΊΠΈΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ.
Π§ΡΠΎ ΡΠ°ΠΊΠΎΠ΅ Π΄ΠΈΠ½Π°ΠΌΠΈΡΠ΅ΡΠΊΠΈΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΈ ΠΊΠ°ΠΊ ΠΎΠ½ΠΈ ΡΠ°Π±ΠΎΡΠ°ΡΡ?
Π Π°Π·ΡΠ°Π±ΠΎΡΠ°Π½Π½ΡΠ΅ Π΄Π»Ρ Π°Π΄Π°ΠΏΡΠ°ΡΠΈΠΈ ΠΊ ΠΊΠΎΠ½ΠΊΡΠ΅ΡΠ½ΡΠΌ ΠΏΠΎΡΡΠ΅Π±Π½ΠΎΡΡΡΠΌ ΠΏΠΎΡΠ΅ΡΠΈΡΠ΅Π»Π΅ΠΉ Π²Π΅Π±-ΡΠ°ΠΉΡΠ°, Π΄ΠΈΠ½Π°ΠΌΠΈΡΠ΅ΡΠΊΠΈΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π±ΡΡΡΡΠΎ ΠΌΠ΅Π½ΡΡΡΡΡ ΠΏΠΎ ΡΠ°Π·ΠΌΠ΅ΡΡ, ΡΠΎΡΠΌΠ΅ ΠΈ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π² Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ ΡΡΡΡΠΎΠΉΡΡΠ²Π° ΠΈΠ»ΠΈ Π±ΡΠ°ΡΠ·Π΅ΡΠ°, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ ΠΊΠΎΠ½ΠΊΡΠ΅ΡΠ½ΡΠΉ ΠΏΠΎΡΡΠ΅Π±ΠΈΡΠ΅Π»Ρ. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, ΡΠΎΡ, Ρ ΠΊΠΎΠ³ΠΎ Π΅ΡΡΡ ΠΌΠΎΠ½ΠΈΡΠΎΡ 4K, Π±ΡΠ΄Π΅Ρ Π½Π°ΡΠ»Π°ΠΆΠ΄Π°ΡΡΡΡ Π΄Π΅ΡΠ°Π»ΠΈΠ·Π°ΡΠΈΠ΅ΠΉ ΠΈ ΡΠ΅ΡΠΊΠΎΡΡΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ Ρ Π²ΡΡΠΎΠΊΠΈΠΌ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ΠΌ. Π ΡΠΎ ΠΆΠ΅ Π²ΡΠ΅ΠΌΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Ρ Π±ΠΎΠ»Π΅Π΅ Π½ΠΈΠ·ΠΊΠΈΠΌ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ΠΌ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΈΠΌΠ΅ΡΡ ΠΌΠ΅Π½ΡΡΠΈΠΉ ΡΠ°Π·ΠΌΠ΅Ρ ΡΠ°ΠΉΠ»Π°, ΡΠ΅ΠΌ ΠΈΡ Π°Π½Π°Π»ΠΎΠ³ΠΈ Ρ Π²ΡΡΠΎΠΊΠΈΠΌ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ΠΌ, ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»ΡΡΡΡΡ Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ Π°Π»ΡΡΠ΅ΡΠ½Π°ΡΠΈΠ²Π½ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π΄Π»Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π½Π° ΡΠΌΠ°ΡΡΡΠΎΠ½Π°Ρ .
Π’Π°ΠΊΠ°Ρ Π³ΠΈΠ±ΠΊΠΎΡΡΡ ΠΎΠ±ΡΠ°Π·Π° ΠΏΠΎΠ»Π΅Π·Π½Π° ΠΊΠ°ΠΊ Π΄Π»Ρ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΎΠ², ΡΠ°ΠΊ ΠΈ Π΄Π»Ρ ΠΊΠΎΠ½Π΅ΡΠ½ΡΡ
ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΉ. ΠΡΠ΅Π΄ΡΠ΄ΡΡΠΈΠ΅ ΠΎΠ³ΡΠ°Π½ΠΈΡΠ΅Π½ΠΈΡ Π·Π°ΡΡΠ°Π²Π»ΡΠ»ΠΈ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΎΠ² ΠΎΠ³ΡΠ°Π½ΠΈΡΠΈΠ²Π°ΡΡ ΠΎΠΏΡΠΈΠΌΠΈΠ·ΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΠΌΠΈ Π²ΡΠ±ΡΠ°Π½Π½ΡΠΌΠΈ ΡΠ°Π·ΠΌΠ΅ΡΠ°ΠΌΠΈ ΠΈ ΡΠ΅Π»Π΅Π²ΡΠΌΠΈ ΡΡΡΡΠΎΠΉΡΡΠ²Π°ΠΌΠΈ. ΠΠΎΡΠΊΠΎΠ»ΡΠΊΡ Π΄ΠΈΠ½Π°ΠΌΠΈΡΠ΅ΡΠΊΠΈΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π³ΠΎΡΠ°Π·Π΄ΠΎ ΠΌΠ΅Π½Π΅Π΅ ΠΎΠ³ΡΠ°Π½ΠΈΡΠ΅Π½Ρ Π² ΠΏΠ»Π°Π½Π΅ Π·Π°Π³ΡΡΠ·ΠΊΠΈ, ΠΎΠ½ΠΈ ΠΎΡΠΊΡΡΠ²Π°ΡΡ ΡΠΎΠ²Π΅ΡΡΠ΅Π½Π½ΠΎ Π½ΠΎΠ²ΡΠΉ ΠΌΠΈΡ ΡΠ²ΠΎΡΡΠ΅ΡΠΊΠΈΡ
Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠ΅ΠΉ.
ΠΡΡΡΠΈΠ΅ ΠΏΠ»Π°ΡΡΠΎΡΠΌΡ Π΄Π»Ρ Π΄ΠΈΠ½Π°ΠΌΠΈΡΠ΅ΡΠΊΠΎΠΉ ΠΎΠΏΡΠΈΠΌΠΈΠ·Π°ΡΠΈΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ
Π Π΅ΡΠ΅Π½ΠΈΠ΅ ΠΎ ΡΠΎΠΌ, ΠΊΠ°ΠΊΡΡ ΠΏΠ»Π°ΡΡΠΎΡΠΌΡ SaaS Π²Ρ Ρ ΠΎΡΠΈΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π΄Π»Ρ ΡΠΏΡΠ°Π²Π»Π΅Π½ΠΈΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡΠΌΠΈ, ΡΠ°ΡΡΠΎ ΡΠ²ΠΎΠ΄ΠΈΡΡΡ ΠΊ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΠΌ ΠΎΡΠ½ΠΎΠ²Π½ΡΠΌ ΡΠ°ΠΊΡΠΎΡΠ°ΠΌ: ΠΏΠΎΡΡΠ΅Π±Π½ΠΎΡΡΡΠΌ, Π±ΡΠ΄ΠΆΠ΅ΡΡ ΠΈ ΠΏΠΎΠ΄ΡΠ΅ΠΌΡ, Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎΠΌΡ Π΄Π»Ρ ΠΈΠ½ΡΠ΅Π³ΡΠ°ΡΠΈΠΈ Π² ΠΊΠΎΠ½ΡΠΈΠ³ΡΡΠ°ΡΠΈΡ Π²Π°ΡΠ΅Π³ΠΎ Π²Π΅Π±-ΡΠ°ΠΉΡΠ°. Π Π½Π°ΡΡΠΎΡΡΠ΅Π΅ Π²ΡΠ΅ΠΌΡ Π΄ΠΎΡΡΡΠΏΠ½ΠΎ ΠΌΠ½ΠΎΠΆΠ΅ΡΡΠ²ΠΎ ΠΎΡΠ»ΠΈΡΠ½ΡΡ ΡΡΠ»ΡΠ³, ΠΊΠ°ΠΆΠ΄Π°Ρ ΠΈΠ· ΠΊΠΎΡΠΎΡΡΡ ΠΈΠΌΠ΅Π΅Ρ ΡΠ²ΠΎΠΉ ΡΠ½ΠΈΠΊΠ°Π»ΡΠ½ΡΠΉ Π½Π°Π±ΠΎΡ ΠΏΡΠ΅ΠΈΠΌΡΡΠ΅ΡΡΠ² ΠΈ ΠΏΡΠΎΠ±Π»Π΅ΠΌ.
CloudinaryΒ
Cloudinary ΠΏΡΠ΅Π΄Π»Π°Π³Π°Π΅Ρ ΡΠΏΡΠΎΡΠ΅Π½Π½ΡΡ Π½Π°ΡΡΡΠΎΠΉΠΊΡ Π΄Π»Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΉ WordPress, ΠΏΡΠ΅Π΄ΠΏΠΎΡΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅ ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ Π΄Π»Ρ ΠΎΠΏΡΠΈΠΌΠΈΠ·Π°ΡΠΈΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ PNG. ΠΠ½ ΠΏΡΠ΅Π΄Π»Π°Π³Π°Π΅Ρ ΠΎΠ±Π»Π°ΡΠ½ΠΎΠ΅ ΡΠΏΡΠ°Π²Π»Π΅Π½ΠΈΠ΅ Π°ΠΊΡΠΈΠ²Π°ΠΌΠΈ Ρ Π΄ΠΈΠ½Π°ΠΌΠΈΡΠ΅ΡΠΊΠΈΠΌΠΈ ΠΌΠ°Π½ΠΈΠΏΡΠ»ΡΡΠΈΡΠΌΠΈ β ΠΎΠΏΡΠΈΠΌΠΈΠ·Π°ΡΠΈΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ ΠΏΡΠΎΠΈΡΡ
ΠΎΠ΄ΠΈΡ ΠΏΠΎ ΠΌΠ΅ΡΠ΅ ΡΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ Π°ΠΊΡΠΈΠ²Ρ Π΄ΠΎΡΡΠ°Π²Π»ΡΡΡΡΡ Π½Π° Π²Π°Ρ Π²Π΅Π±-ΡΠ°ΠΉΡ (Ρ) ΡΠ΅ΡΠ΅Π· Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ Π²Π΅Π΄ΡΡΠΈΡ
ΡΠ΅ΡΠ΅ΠΉ Π΄ΠΎΡΡΠ°Π²ΠΊΠΈ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ° (CDN).
Cloudinary ΡΠ½ΠΈΠΊΠ°Π»Π΅Π½ ΡΠ΅ΠΌ, ΡΡΠΎ ΠΎΠ½ ΡΠ°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ ΠΎΠΏΡΠΈΠΌΠΈΠ·ΠΈΡΠΎΠ²Π°ΡΡ ΠΈ ΡΠΏΡΠ°Π²Π»ΡΡΡ Π²ΠΈΠ΄Π΅ΠΎΡΠ΅ΡΡΡΡΠ°ΠΌΠΈ. ΠΠΈΠ΄Π΅ΠΎ, ΠΊΠ°ΠΊ ΠΏΡΠ°Π²ΠΈΠ»ΠΎ, ΠΈΠΌΠ΅ΡΡ Π³ΠΎΡΠ°Π·Π΄ΠΎ Π±ΠΎΠ»ΡΡΠΈΠΉ ΡΠ°Π·ΠΌΠ΅Ρ ΡΠ°ΠΉΠ»Π°, ΡΠ΅ΠΌ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ. ΠΡΠΎ Π΄Π΅Π»Π°Π΅Ρ Cloudinary ΠΎΡΠ»ΠΈΡΠ½ΡΠΌ ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ΠΌ Π΄Π»Ρ Π²Π΅Π±-ΡΠ°ΠΉΡΠΎΠ² ΡΠΎ Π·Π½Π°ΡΠΈΡΠ΅Π»ΡΠ½ΡΠΌ ΠΎΠ±ΡΠ΅ΠΌΠΎΠΌ ΠΌΡΠ»ΡΡΠΈΠΌΠ΅Π΄ΠΈΠ°, ΠΊΠΎΡΠΎΡΡΠ΅ Π½Π΅ ΡΠ°ΡΠΏΡΠΎΡΡΡΠ°Π½ΡΡΡΡΡ ΡΠ΅ΡΠ΅Π· ΡΠ°ΠΊΠΈΠ΅ ΡΠ΅ΡΠ²ΠΈΡΡ, ΠΊΠ°ΠΊ YouTube ΠΈΠ»ΠΈ Vimeo.
Optimole
ΠΠ°ΠΊ ΠΈ Cloudinary, Optimole Π»Π΅Π³ΠΊΠΎ ΠΈΠ½ΡΠ΅Π³ΡΠΈΡΡΠ΅ΡΡΡ Π²Π»Π°Π΄Π΅Π»ΡΡΠ°ΠΌΠΈ ΡΠ°ΠΉΡΠΎΠ² WordPress Π² ΡΠ²ΠΎΠΉ Π²Π΅Π±-ΡΠ°ΠΉΡ. ΠΠ½ Π»ΡΡΡΠ΅ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡΠΌΠΈ Π² ΡΠΎΡΠΌΠ°ΡΠ΅ JPEG, Π½ΠΎ ΡΠ°ΠΊΠΆΠ΅ ΡΠ²Π»ΡΠ΅ΡΡΡ ΠΎΡΠ»ΠΈΡΠ½ΡΠΌ Π²Π°ΡΠΈΠ°Π½ΡΠΎΠΌ Π΄Π»Ρ PNG. Π₯ΠΎΡΡ ΡΡΡΠ΅ΡΡΠ²ΡΡΡ Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ ΡΡΠ½ΠΊΡΠΈΠΈ ΠΌΠ°Π½ΠΈΠΏΡΠ»ΠΈΡΠΎΠ²Π°Π½ΠΈΡ, Optimole Π² ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠΌ ΡΠΎΠΊΡΡΠΈΡΡΠ΅ΡΡΡ Π½Π° ΠΎΠΏΡΠΈΠΌΠΈΠ·Π°ΡΠΈΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ Π΄Π»Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π² ΠΠ½ΡΠ΅ΡΠ½Π΅ΡΠ΅ β ΠΎΡ ΡΠΆΠ°ΡΠΈΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ ΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ ΠΈΡ ΡΠ°Π·ΠΌΠ΅ΡΠ° Π΄ΠΎ ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ΅Π½ΠΈΡ Π½Π° Π²Π΅ΡΡΠΈΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ WebP.
ΠΠ±ΡΠ°Π·Ρ Optimole ΠΎΠ±ΡΠ»ΡΠΆΠΈΠ²Π°ΡΡΡΡ ΡΠ΅ΡΠ΅Π· CDN Amazon CloudFront. ΠΡΡΠ³ΠΈΠ΅ ΠΏΡΠ΅ΠΈΠΌΡΡΠ΅ΡΡΠ²Π° Π²ΠΊΠ»ΡΡΠ°ΡΡ Π½Π΅ΠΎΠ³ΡΠ°Π½ΠΈΡΠ΅Π½Π½ΡΡ ΠΏΡΠΎΠΏΡΡΠΊΠ½ΡΡ ΡΠΏΠΎΡΠΎΠ±Π½ΠΎΡΡΡ ΠΈ ΠΈΠ½ΡΠ΅Π»Π»Π΅ΠΊΡΡΠ°Π»ΡΠ½ΡΡ Π»Π΅Π½ΠΈΠ²ΡΡ Π·Π°Π³ΡΡΠ·ΠΊΡ.
ΠΡΠ±Π΅ΡΠ΅ΡΠ΅ Π»ΠΈ Π²Ρ Cloudinary ΠΈΠ»ΠΈ Optimole Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ ΠΏΡΠ΅Π΄ΠΏΠΎΡΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ³ΠΎ ΡΠ΅ΡΠ΅Π½ΠΈΡ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ Π΄ΠΈΠ½Π°ΠΌΠΈΡΠ΅ΡΠΊΠΈΡ
ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ, Π²Ρ ΠΏΠΎΠ»ΡΡΠΈΡΠ΅ Π±ΠΎΠ»Π΅Π΅ Π±ΡΡΡΡΡΡ Π·Π°Π³ΡΡΠ·ΠΊΡ ΡΡΡΠ°Π½ΠΈΡ. ΠΡΠΎ, Π² ΡΠ²ΠΎΡ ΠΎΡΠ΅ΡΠ΅Π΄Ρ, ΡΠ΄Π΅Π»Π°Π΅Ρ ΠΏΠΎΡΠ΅ΡΠΈΡΠ΅Π»Π΅ΠΉ ΡΠ°ΠΉΡΠ° Π±ΠΎΠ»Π΅Π΅ ΡΡΠ°ΡΡΠ»ΠΈΠ²ΡΠΌΠΈ ΠΈ ΡΠ»ΡΡΡΠΈΡ ΡΠ°Π±ΠΎΡΡ ΠΏΠΎΠΈΡΠΊΠΎΠ²ΡΡ
ΡΠΈΡΡΠ΅ΠΌ.
ΠΠ°ΡΠΊΠ΅ΡΠΈΠ½Π³ Π² Π½Π΅Π²Π΅ΡΠΎΠΌΠΎΡΡΠΈ: ΡΡΠΊΠΎΠ²ΠΎΠ΄ΡΡΠ²ΠΎ ΠΏΠΎ ΡΠΏΡΠΎΡΠ΅Π½Π½ΠΎΠΌΡ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Ρ
ΠΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΈΠΉ ΠΎΠΏΡΡ ΡΠ΅ΠΏΠ΅ΡΡ ΠΈΠ³ΡΠ°Π΅Ρ Π²Π°ΠΆΠ½ΡΡ ΡΠΎΠ»Ρ Π² ΠΏΠΎΠΈΡΠΊΠΎΠ²ΠΎΠΉ ΠΎΠΏΡΠΈΠΌΠΈΠ·Π°ΡΠΈΠΈ ΠΈ ΡΠΈΡΡΠΎΠ²ΠΎΠΌ ΠΌΠ°ΡΠΊΠ΅ΡΠΈΠ½Π³Π΅, ΡΡΠΎ Π΄Π΅Π»Π°Π΅Ρ Π΄ΠΈΠ½Π°ΠΌΠΈΡΠ΅ΡΠΊΠΎΠ΅ ΡΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ Π³ΠΎΡΠ°Π·Π΄ΠΎ Π±ΠΎΠ»Π΅Π΅ Π²Π°ΠΆΠ½ΡΠΌ. ΠΠΊΡΠΏΠ΅ΡΡΡ Zero Gravity Marketing ΠΌΠΎΠ³ΡΡ ΠΏΠΎΠΌΠΎΡΡ Π²Π°ΠΌ Π²Π½Π΅Π΄ΡΠΈΡΡ ΡΡΠΎΡ ΠΈ Π΄ΡΡΠ³ΠΈΠ΅ ΠΏΠΎΠ»Π΅Π·Π½ΡΠ΅ ΠΌΠ΅ΡΠΎΠ΄Ρ, ΡΡΠΎΠ±Ρ Π²Π°Ρ ΡΠ°ΠΉΡ ΡΠ°Π±ΠΎΡΠ°Π» Π±Π΅ΡΠΏΠ΅ΡΠ΅Π±ΠΎΠΉΠ½ΠΎ. Π‘Π²ΡΠΆΠΈΡΠ΅ΡΡ Ρ Π½Π°ΠΌΠΈ ΡΠ΅Π³ΠΎΠ΄Π½Ρ, ΡΡΠΎΠ±Ρ ΡΠ·Π½Π°ΡΡ Π±ΠΎΠ»ΡΡΠ΅!
ΠΠΈΠ½Π°ΠΌΠΈΡΠ΅ΡΠΊΠΈΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ β’ PresentationPoint
1.ΠΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ #
ΠΠΈΠ½Π°ΠΌΠΈΡΠ΅ΡΠΊΠΈΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡΒ ΡΠ²Π»ΡΡΡΡΡ ΡΠ°ΡΡΡΡ ΠΏΠΎΠ»Π½ΠΎΠ³ΠΎ ΠΏΠ°ΠΊΠ΅ΡΠ° Dynamic Elements ΠΈ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡΡ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡ ΡΠ»Π°ΠΉΠ΄-ΡΠΎΡ ΠΈΠ»ΠΈ ΡΠ°ΠΌΠΊΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π² ΡΠ»Π°ΠΉΠ΄-ΡΠΎΡ PowerPoint. ΠΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΈΠ· Π²ΡΠ±ΡΠ°Π½Π½ΡΡ Π²Π°ΠΌΠΈ ΠΏΠ°ΠΏΠΎΠΊ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ ΠΈ ΠΏΠΎΠ²ΠΎΡΠ°ΡΠΈΠ²Π°ΡΡΡΡ Π² Π²ΠΈΠ΄Π΅ ΡΠ°ΠΌΠΊΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π½Π° Π²Π°ΡΠ΅ΠΌ ΡΠ»Π°ΠΉΠ΄Π΅.
2.Π‘ΠΈΡΡΠ΅ΠΌΠ½ΡΠ΅ ΡΡΠ΅Π±ΠΎΠ²Π°Π½ΠΈΡ #
Microsoft Office 2010 ΠΈ Π²ΡΡΠ΅. ΠΠ΅ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ Ρ Π±Π΅ΡΠΏΠ»Π°ΡΠ½ΡΠΌ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ΠΌ Microsoft PowerPoint Viewer.
.NET Framework 4.7. ΠΠΎΠ»Π½ΡΠ΅ ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΠΈ ΡΠΈΡΠ°ΠΉΡΠ΅ Π·Π΄Π΅ΡΡ.
ΠΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅ΠΌΡΠ΅ ΠΊΠ»ΠΈΠ΅Π½ΡΡΠΊΠΈΠ΅ ΠΎΠΏΠ΅ΡΠ°ΡΠΈΠΎΠ½Π½ΡΠ΅ ΡΠΈΡΡΠ΅ΠΌΡ:
- Windows 8
- Windows 8.1
- Windows 10
ΠΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅ΠΌΡΠ΅ ΡΠ΅ΡΠ²Π΅ΡΠ½ΡΠ΅ ΠΎΠΏΠ΅ΡΠ°ΡΠΈΠΎΠ½Π½ΡΠ΅ ΡΠΈΡΡΠ΅ΠΌΡ:
- Windows Server 2008 SP2
- Windows Server 2008 R2 SP1
- Windows Server 2012
- Windows Server 2012 R2
- Windows Server 2016
- Windows Server, Π²Π΅ΡΡΠΈΡ 1709
3. ΠΠ°ΡΠ°Π»ΠΎ ΡΠ°Π±ΠΎΡΡ #
ΠΠ°ΡΠ½ΠΈΡΠ΅ Ρ ΡΠ°ΡΠΏΠ°ΠΊΠΎΠ²ΠΊΠΈ ZIP-ΡΠ°ΠΉΠ»Π°, ΠΈ Π²Ρ ΠΏΠΎΠ»ΡΡΠΈΡΠ΅ ΡΡΠΎΡ ΡΠ°ΠΉΠ».
DynamicPictures.exe β ΡΡΠΎ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠ° ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠΈ, ΠΊΠΎΡΠΎΡΡΡ Π»ΡΡΡΠ΅ Π²ΡΠ΅Π³ΠΎ Π²ΡΠΏΠΎΠ»Π½ΡΡΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ Ρ ΠΏΡΠ°Π²Π°ΠΌΠΈ Π°Π΄ΠΌΠΈΠ½ΠΈΡΡΡΠ°ΡΠΎΡΠ°. ΠΠΎΡΠ»Π΅ ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠΈ Π²Ρ ΡΠ²ΠΈΠ΄ΠΈΡΠ΅ Π½ΠΎΠ²ΡΠΉ ΠΏΡΠ½ΠΊΡ ΠΌΠ΅Π½Ρ Β«ΠΠΈΠ½Π°ΠΌΠΈΡΠ΅ΡΠΊΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡΒ» Π½Π° Π»Π΅Π½ΡΠ΅ PowerPoint.
ΠΠΎΠ³Π΄Π° Π²Ρ Π½Π°ΠΆΠΌΠ΅ΡΠ΅, ΡΡΠΎΠ±Ρ ΠΎΡΠΊΡΡΡΡ ΡΡΠΎΡ ΠΏΡΠ½ΠΊΡ ΠΌΠ΅Π½Ρ Dynamic Elements , Π²Ρ ΡΠ²ΠΈΠ΄ΠΈΡΠ΅ ΠΊΠ½ΠΎΠΏΠΊΡ Dynamic Pictures Π² Π³ΡΡΠΏΠΏΠ΅.
ΠΡΠ»ΠΈ Ρ Π²Π°Ρ ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½ΠΎ Π±ΠΎΠ»ΡΡΠ΅ Π½Π°Π΄ΡΡΡΠΎΠ΅ΠΊ ΠΏΠ°ΠΊΠ΅ΡΠ° Dynamic Elements, ΡΠΎ Π·Π΄Π΅ΡΡ ΠΏΠΎΡΠ²ΠΈΡΡΡ Π±ΠΎΠ»ΡΡΠ΅ ΠΊΠ½ΠΎΠΏΠΎΠΊ.
ΠΠ°ΠΆΠΌΠΈΡΠ΅ ΠΊΠ½ΠΎΠΏΠΊΡ Π ΠΈΡΡΠ½ΠΊΠΈ , ΡΡΠΎΠ±Ρ ΠΎΡΠΊΡΡΡΡ ΠΏΠ°Π½Π΅Π»Ρ Β«ΠΠΈΠ½Π°ΠΌΠΈΡΠ΅ΡΠΊΠΈΠ΅ ΡΠΈΡΡΠ½ΠΊΠΈΒ» Π² PowerPoint.
4.ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΏΠ°ΠΏΠΎΠΊ Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡΠΌΠΈ #
ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ ΡΡΠΎ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΡΡΡ Π½Π° ΠΏΠ°Π½Π΅Π»ΠΈ Β«ΠΠΈΠ½Π°ΠΌΠΈΡΠ΅ΡΠΊΠΈΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡΒ».
ΠΠ°ΡΠ°ΡΡ Π½ΠΎΠ²ΡΡ ΠΏΡΠ΅Π·Π΅Π½ΡΠ°ΡΠΈΡ ΠΈΠ»ΠΈ ΠΎΡΠΊΡΡΡΡ ΡΡΡΠ΅ΡΡΠ²ΡΡΡΡΡ ΠΏΡΠ΅Π·Π΅Π½ΡΠ°ΡΠΈΡ.
ΠΡΠ΅ΠΆΠ΄Π΅ Π²ΡΠ΅Π³ΠΎ, Π²ΡΡΠ°Π²ΡΡΠ΅ Π½Π° ΡΠ»Π°ΠΉΠ΄ ΠΎΠ±ΡΡΠ½ΡΡ ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ. ΠΠ°ΠΆΠΌΠΈΡΠ΅, ΡΡΠΎΠ±Ρ ΠΎΡΠΊΡΡΡΡ ΠΏΡΠ½ΠΊΡ ΠΌΠ΅Π½Ρ ΠΡΡΠ°Π²ΠΈΡΡ , ΠΈ Π½Π°ΠΆΠΌΠΈΡΠ΅ ΠΊΠ½ΠΎΠΏΠΊΡ ΠΠ°ΡΡΠΈΠ½ΠΊΠΈ .
ΠΠ°ΠΉΠ΄ΠΈΡΠ΅ Π»ΡΠ±ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΈ ΠΏΠΎΠΌΠ΅ΡΡΠΈΡΠ΅ Π΅Π³ΠΎ Π½Π° ΡΠ»Π°ΠΉΠ΄. ΠΡΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π²ΠΎΠΎΠ±ΡΠ΅ Π½Π΅ Π±ΡΠ΄Π΅Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ, Π½ΠΎ ΡΡΠΎ ΠΏΡΠΎΡΡΠΎ Π·Π°ΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»Ρ ΠΈΠ»ΠΈ ΠΎΡΠΏΡΠ°Π²Π½Π°Ρ ΡΠΎΡΠΊΠ° Π΄Π»Ρ Π²Π°ΡΠ΅Π³ΠΎ ΠΏΠΎΠ»Π·ΡΠ½ΠΊΠ° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΏΠΎΠ·ΠΆΠ΅.
ΠΡΠ΄Π΅Π»ΠΈΠ² ΡΡΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅, Π½Π°ΠΆΠΌΠΈΡΠ΅ ΠΊΠ½ΠΎΠΏΠΊΡ ΠΠΎΠ±Π°Π²ΠΈΡΡ Π² Π³ΡΡΠΏΠΏΠ΅ ΠΠΎΠΈ ΡΠΈΡΡΠ½ΠΊΠΈ .
ΠΠ΅ΡΠ΅ΠΉΠ΄ΠΈΡΠ΅ ΠΊ ΠΏΠ°ΠΏΠΊΠ΅, ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠ΅ΠΉ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, ΠΊΠΎΡΠΎΡΡΠ΅ Π²Ρ Ρ ΠΎΡΠΈΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π² ΡΠ²ΠΎΠ΅ΠΉ ΡΠΎΡΠΎΡΠ°ΠΌΠΊΠ΅, ΠΈ Π½Π°ΠΆΠΌΠΈΡΠ΅ OK .
Π’Π΅ΠΏΠ΅ΡΡ ΡΡΠ° ΠΏΠ°ΠΏΠΊΠ° Π΄ΠΎΠ±Π°Π²Π»Π΅Π½Π° ββΠ² ΡΠΏΠΈΡΠΎΠΊ Π²ΠΎΡΠΏΡΠΎΠΈΠ·Π²Π΅Π΄Π΅Π½ΠΈΡ ΠΏΠ°ΠΏΠΊΠΈ Dynamic Pictures.
ΠΠ΅ΡΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΈΠ· Π²ΡΠ±ΡΠ°Π½Π½ΠΎΠΉ ΠΏΠ°ΠΏΠΊΠΈ ΠΏΠΎΠΌΠ΅ΡΠ°Π΅ΡΡΡ Π² Π²ΡΠ±ΡΠ°Π½Π½ΡΠΉ Π·Π°ΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ. ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ ΠΊΠ½ΠΎΠΏΠΊΡ ΠΠΎΠ±Π°Π²ΠΈΡΡ , ΡΡΠΎΠ±Ρ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ Π² Π½Π΅Π³ΠΎ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ ΠΏΠ°ΠΏΠΊΠΈ.
ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ ΠΊΠ½ΠΎΠΏΠΊΡ ΠΠ·ΠΌΠ΅Π½ΠΈΡΡ , ΡΡΠΎΠ±Ρ Π·Π°ΠΌΠ΅Π½ΠΈΡΡ ΡΡΡΠ΅ΡΡΠ²ΡΡΡΡΡ ΠΏΠ°ΠΏΠΊΡ Π΄ΡΡΠ³ΠΎΠΉ ΠΏΠ°ΠΏΠΊΠΎΠΉ. ΠΠ»ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ ΠΊΠ½ΠΎΠΏΠΊΡ Π£Π΄Π°Π»ΠΈΡΡ , ΡΡΠΎΠ±Ρ ΡΠ΄Π°Π»ΠΈΡΡ ΠΏΠ°ΠΏΠΊΡ ΠΈΠ· ΡΠΏΠΈΡΠΊΠ° Π²ΠΎΡΠΏΡΠΎΠΈΠ·Π²Π΅Π΄Π΅Π½ΠΈΡ Β«ΠΠΎΠΈ ΡΠΈΡΡΠ½ΠΊΠΈΒ».
Π ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΠ°Ρ ΠΏΠ°ΠΏΠΊΠΈ Π²ΡΠ±Π΅ΡΠΈΡΠ΅ Π²ΠΎΡΠΏΡΠΎΠΈΠ·Π²Π΅Π΄Π΅Π½ΠΈΠ΅ Π²ΡΠ΅Ρ ΠΏΠ°ΠΏΠΎΠΊ ΠΈΠ· ΡΠΏΠΈΡΠΊΠ° Π²ΠΎΡΠΏΡΠΎΠΈΠ·Π²Π΅Π΄Π΅Π½ΠΈΡ ΠΈΠ»ΠΈ Π²ΡΠ±Π΅ΡΠΈΡΠ΅ Π²ΠΎΡΠΏΡΠΎΠΈΠ·Π²Π΅Π΄Π΅Π½ΠΈΠ΅ Π²ΡΠ΅Ρ ΠΏΠ°ΠΏΠΎΠΊ ΠΈ ΠΈΡ ΠΏΠΎΠ΄ΠΏΠ°ΠΏΠΎΠΊ.
Π‘ ΠΏΠΎΠΌΠΎΡΡΡ ΠΠΎΡΠ»Π΅Π΄ΠΎΠ²Π°ΡΠ΅Π»ΡΠ½ΠΎΡΡΡ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π²ΡΠ±ΡΠ°ΡΡ Π²ΠΎΡΠΏΡΠΎΠΈΠ·Π²Π΅Π΄Π΅Π½ΠΈΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ Π² ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠΉ ΠΈΠ»ΠΈ ΡΠ»ΡΡΠ°ΠΉΠ½ΠΎΠΉ ΠΏΠΎΡΠ»Π΅Π΄ΠΎΠ²Π°ΡΠ΅Π»ΡΠ½ΠΎΡΡΠΈ.
Π ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΠ°Ρ
ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΠΈ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π²ΡΠ±ΡΠ°ΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΡΠΎΠ»ΡΠΊΠΎ Π°Π»ΡΠ±ΠΎΠΌΠ½ΡΡ
ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ ΠΈΠ»ΠΈ ΡΠΎΠ»ΡΠΊΠΎ ΠΏΠΎΡΡΡΠ΅ΡΠ½ΡΡ
ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ. ΠΡΠ° ΠΎΠΏΡΠΈΡ Π³Π°ΡΠ°Π½ΡΠΈΡΡΠ΅Ρ Π²Π½Π΅ΡΠ½ΠΈΠΉ Π²ΠΈΠ΄ Π²Π°ΡΠ΅Π³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π°. ΠΡΠ»ΠΈ Π²Π°Ρ Π΄ΠΈΠ·Π°ΠΉΠ½ ΡΠ°ΡΡΡΠΈΡΠ°Π½ Π½Π° ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΡΠΎΠ»ΡΠΊΠΎ ΠΏΠΎΡΡΡΠ΅ΡΠ½ΡΡ
ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ, ΠΎΡΠΌΠ΅ΡΡΡΠ΅ ΡΡΠΎΡ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡ ΡΠΎΠ»ΡΠΊΠΎ Π΄Π»Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ Ρ ΠΏΠΎΡΡΡΠ΅ΡΠ½ΠΎΠΉ ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΠ΅ΠΉ.