| HTML | WebReference
ΠΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΠ΅Ρ ΡΠΎΠ±ΠΎΠΉ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ Π΄Π»Ρ Ρ ΡΠ°Π½Π΅Π½ΠΈΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² <source>, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ <img>. ΠΡΠΎ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΡΠΊΠ°Π·ΡΠ²Π°ΡΡ ΡΠ°Π·Π½ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Ρ ΡΡΡΡΠΎΠΌ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΡΠΊΡΠ°Π½Π°, ΠΏΠ»ΠΎΡΠ½ΠΎΡΡΠΈ ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ, ΡΠΎΡΠΌΠ°ΡΠ° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΈ Π΄ΡΡΠ³ΠΈΡ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΠΎΠ². ΠΠΎΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΎΠ±Π»Π°ΡΡΠ΅ΠΉ ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½ΠΈΡ <picture> (ΠΎΡ Π°Π½Π³Π». pictureΒ β ΠΊΠ°ΡΡΠΈΠ½ΠΊΠ°, ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅):
- Π΄Π»Ρ ΡΠΊΡΠ°Π½ΠΎΠ² ΡΠ΅ΡΠΈΠ½Π° ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°ΡΡ ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ Π±ΠΎΠ»ΡΡΠ΅Π³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ°;
- Π²ΡΠ²ΠΎΠ΄ΠΈΡΡ ΡΠΈΡΡΠ½ΠΊΠΈ ΡΠ°Π·Π½ΠΎΠ³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ° Π΄Π»Ρ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ ΠΈ Π½Π°ΡΡΠΎΠ»ΡΠ½ΡΡ ΡΡΡΡΠΎΠΉΡΡΠ²;
- ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΡΠ°Π·Π½ΡΡ ΠΏΡΠΎΠΏΠΎΡΡΠΈΠΉ, ΡΡΠΈΡΡΠ²Π°ΡΡΠΈΡ ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΡ ΡΡΡΡΠΎΠΉΡΡΠ²Π°;
- Π²ΡΠ²ΠΎΠ΄ΠΈΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π² Π²Π΅ΠΊΡΠΎΡΠ½ΠΎΠΌ ΡΠΎΡΠΌΠ°ΡΠ΅ SVG, Π° Π΄Π»Ρ Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠ², Π΅Π³ΠΎ Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡΠΈΡ , ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°ΡΡ PNG.
Π‘ΠΈΠ½ΡΠ°ΠΊΡΠΈΡ
<picture>
<source>
<img>
</picture>
ΠΠ½ΡΡΡΠΈ <picture> ΡΠΎΠ΄Π΅ΡΠΆΠΈΡΡΡ Π½ΠΎΠ»Ρ ΠΈΠ»ΠΈ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² <source>, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΈΠ΄ΡΡ ΠΏΠ΅ΡΠ΅Π΄ ΠΎΠ΄Π½ΠΈΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌ <img>.
ΠΠ°ΠΊΡΡΠ²Π°ΡΡΠΈΠΉ ΡΠ΅Π³
ΠΡΠΈΠΌΠ΅Ρ
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>picture</title>
</head>
<body>
<picture>
<source srcset="image/html5-logo.svg">
<img src="image/html5-logo.png" alt="HTML5">
</picture>
</body>
</html>
Π Π΄Π°Π½Π½ΠΎΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π΄Π²Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ: ΠΎΠ΄Π½ΠΎ Π² ΡΠΎΡΠΌΠ°ΡΠ΅ SVG, Π° Π²ΡΠΎΡΠΎΠ΅ Π² ΠΏΡΠΈΠ²ΡΡΠ½ΠΎΠΌ PNG. ΠΡΠ°ΡΠ·Π΅ΡΡ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ <picture>, ΠΎΡΠΎΠ±ΡΠ°Π·ΡΡ ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ Π² Π²Π΅ΠΊΡΠΎΡΠ½ΠΎΠΌ Π²ΠΈΠ΄Π΅ (ΡΠΈΡ.Β 1). ΠΡΠ°ΡΠ·Π΅Ρ IE ΠΏΠΎΠΊΠ°ΠΆΠ΅Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π² ΡΠΎΡΠΌΠ°ΡΠ΅ PNG (ΡΠΈΡ.Β 2). ΠΠ»Ρ Π½Π°Π³Π»ΡΠ΄Π½ΠΎΡΡΠΈ Π»ΠΎΠ³ΠΎΡΠΈΠΏ Π΄Π°Π½ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠΌ 128Ρ 128 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ ΠΈ ΡΠ²Π΅Π»ΠΈΡΠ΅Π½ Π΄ΠΎ 256Ρ 256.
Π ΠΈΡ. 1. ΠΠ°ΡΡΠΈΠ½ΠΊΠ° Π² ΡΠΎΡΠΌΠ°ΡΠ΅ SVG
Π ΠΈΡ. 2. ΠΠ°ΡΡΠΈΠ½ΠΊΠ° Π² ΡΠΎΡΠΌΠ°ΡΠ΅ PNG
Π‘ΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΡ ?
Π‘ΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΡ
ΠΠ°ΠΆΠ΄Π°Ρ ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΡ ΠΏΡΠΎΡ ΠΎΠ΄ΠΈΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΡΠ°Π΄ΠΈΠΉ ΠΎΠ΄ΠΎΠ±ΡΠ΅Π½ΠΈΡ.
- Recommendation (Π Π΅ΠΊΠΎΠΌΠ΅Π½Π΄Π°ΡΠΈΡ) β ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΡ ΠΎΠ΄ΠΎΠ±ΡΠ΅Π½Π° W3C ΠΈ ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄ΠΎΠ²Π°Π½Π° ΠΊΠ°ΠΊ ΡΡΠ°Π½Π΄Π°ΡΡ.
- Candidate Recommendation (ΠΠΎΠ·ΠΌΠΎΠΆΠ½Π°Ρ ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄Π°ΡΠΈΡ) β Π³ΡΡΠΏΠΏΠ°, ΠΎΡΠ²Π΅ΡΠ°ΡΡΠ°Ρ Π·Π° ΡΡΠ°Π½Π΄Π°ΡΡ, ΡΠ΄ΠΎΠ²Π»Π΅ΡΠ²ΠΎΡΠ΅Π½Π°, ΠΊΠ°ΠΊ ΠΎΠ½ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΠ΅Ρ ΡΠ²ΠΎΠΈΠΌ ΡΠ΅Π»ΡΠΌ, Π½ΠΎ ΡΡΠ΅Π±ΡΠ΅ΡΡΡ ΠΏΠΎΠΌΠΎΡΡ ΡΠΎΠΎΠ±ΡΠ΅ΡΡΠ²Π° ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΎΠ² ΠΏΠΎ ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΠΈ ΡΡΠ°Π½Π΄Π°ΡΡΠ°.
- Proposed Recommendation (ΠΡΠ΅Π΄Π»Π°Π³Π°Π΅ΠΌΠ°Ρ ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄Π°ΡΠΈΡ) β Π½Π° ΡΡΠΎΠΌ ΡΡΠ°ΠΏΠ΅ Π΄ΠΎΠΊΡΠΌΠ΅Π½Ρ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½ Π½Π° ΡΠ°ΡΡΠΌΠΎΡΡΠ΅Π½ΠΈΠ΅ ΠΠΎΠ½ΡΡΠ»ΡΡΠ°ΡΠΈΠ²Π½ΠΎΠ³ΠΎ ΡΠΎΠ²Π΅ΡΠ° W3C Π΄Π»Ρ ΠΎΠΊΠΎΠ½ΡΠ°ΡΠ΅Π»ΡΠ½ΠΎΠ³ΠΎ ΡΡΠ²Π΅ΡΠΆΠ΄Π΅Π½ΠΈΡ.
- Working Draft (Π Π°Π±ΠΎΡΠΈΠΉ ΠΏΡΠΎΠ΅ΠΊΡ) β Π±ΠΎΠ»Π΅Π΅ Π·ΡΠ΅Π»Π°Ρ Π²Π΅ΡΡΠΈΡ ΡΠ΅ΡΠ½ΠΎΠ²ΠΈΠΊΠ° ΠΏΠΎΡΠ»Π΅ ΠΎΠ±ΡΡΠΆΠ΄Π΅Π½ΠΈΡ ΠΈ Π²Π½Π΅ΡΠ΅Π½ΠΈΡ ΠΏΠΎΠΏΡΠ°Π²ΠΎΠΊ Π΄Π»Ρ ΡΠ°ΡΡΠΌΠΎΡΡΠ΅Π½ΠΈΡ ΡΠΎΠΎΠ±ΡΠ΅ΡΡΠ²ΠΎΠΌ.
- Editor’s draft (Π Π΅Π΄Π°ΠΊΡΠΎΡΡΠΊΠΈΠΉ ΡΠ΅ΡΠ½ΠΎΠ²ΠΈΠΊ) β ΡΠ΅ΡΠ½ΠΎΠ²Π°Ρ Π²Π΅ΡΡΠΈΡ ΡΡΠ°Π½Π΄Π°ΡΡΠ° ΠΏΠΎΡΠ»Π΅ Π²Π½Π΅ΡΠ΅Π½ΠΈΡ ΠΏΡΠ°Π²ΠΎΠΊ ΡΠ΅Π΄Π°ΠΊΡΠΎΡΠ°ΠΌΠΈ ΠΏΡΠΎΠ΅ΠΊΡΠ°.
- Draft (Π§Π΅ΡΠ½ΠΎΠ²ΠΈΠΊ ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΠΈ) β ΠΏΠ΅ΡΠ²Π°Ρ ΡΠ΅ΡΠ½ΠΎΠ²Π°Ρ Π²Π΅ΡΡΠΈΡ ΡΡΠ°Π½Π΄Π°ΡΡΠ°.
ΠΡΠΎΠ±Π½ΡΠΊΠΎΠΌ ΡΡΠΎΠΈΡ ΠΆΠΈΠ²ΠΎΠΉ ΡΡΠ°Π½Π΄Π°ΡΡ HTML (Living) β ΠΎΠ½ Π½Π΅ ΠΏΡΠΈΠ΄Π΅ΡΠΆΠΈΠ²Π°Π΅ΡΡΡ ΡΡΠ°Π΄ΠΈΡΠΈΠΎΠ½Π½ΠΎΠΉ Π½ΡΠΌΠ΅ΡΠ°ΡΠΈΠΈ Π²Π΅ΡΡΠΈΠΉ, ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡ Π² ΠΏΠΎΡΡΠΎΡΠ½Π½ΠΎΠΉ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠ΅ ΠΈ ΠΎΠ±Π½ΠΎΠ²Π»ΡΠ΅ΡΡΡ ΡΠ΅Π³ΡΠ»ΡΡΠ½ΠΎ.
ΓΠΡΠ°ΡΠ·Π΅ΡΡ
Π ΡΠ°Π±Π»ΠΈΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠ² ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡΡΡ ΡΠ»Π΅Π΄ΡΡΡΠΈΠ΅ ΠΎΠ±ΠΎΠ·Π½Π°ΡΠ΅Π½ΠΈΡ.
- Β β ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅ΡΡΡ Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠΌ;
- Β β ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠΌ Π½Π΅ Π²ΠΎΡΠΏΡΠΈΠ½ΠΈΠΌΠ°Π΅ΡΡΡ ΠΈ ΠΈΠ³Π½ΠΎΡΠΈΡΡΠ΅ΡΡΡ;
- Β β ΠΏΡΠΈ ΡΠ°Π±ΠΎΡΠ΅ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΡΠ²Π»Π΅Π½ΠΈΠ΅ ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ ΠΎΡΠΈΠ±ΠΎΠΊ, Π»ΠΈΠ±ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅ΡΡΡ Ρ ΠΎΠ³ΠΎΠ²ΠΎΡΠΊΠ°ΠΌΠΈ.
Π§ΠΈΡΠ»ΠΎ ΡΠΊΠ°Π·ΡΠ²Π°Π΅Ρ Π²Π΅ΡΡΠΈΡ Π±ΡΠ°ΡΠ·ΡΠ΅Π°, Π½Π°ΡΠΈΠ½Π°Ρ Ρ ΠΊΠΎΡΠΎΡΠΎΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅ΡΡΡ.
ΓΠΠ²ΡΠΎΡ ΠΈ ΡΠ΅Π΄Π°ΠΊΡΠΎΡΡ
ΠΠ²ΡΠΎΡ: ΠΠ»Π°Π΄ ΠΠ΅ΡΠΆΠ΅Π²ΠΈΡ
ΠΠΎΡΠ»Π΅Π΄Π½Π΅Π΅ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅: 09.10.2018
Π Π΅Π΄Π°ΠΊΡΠΎΡΡ: ΠΠ»Π°Π΄ ΠΠ΅ΡΠΆΠ΅Π²ΠΈΡ
webref.ru
Picture β Π½ΠΎΠ²ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ, ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎ Π½Π΅Ρ / Habr
Π Π΄Π΅Π²Π΅Π»ΠΎΠΏΠ΅ΡΡΠΊΠΈΡ
ΡΠ±ΠΎΡΠΊΠ°Ρ
Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠ² Chrome, Firefox ΠΈ Opera ΠΏΠΎΡΠ²ΠΈΠ»Π°ΡΡ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠ° Π½ΠΎΠ²ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅ΡΠ° picture
, ΠΏΡΠΈΠ·Π²Π°Π½Π½ΠΎΠ³ΠΎ ΡΠ΅ΡΠΈΡΡ ΡΡΠ΄ ΠΏΡΠΎΠ±Π»Π΅ΠΌ Π²ΠΎΠ·Π½ΠΈΠΊΠ°ΡΡΠΈΡ
ΠΏΡΠΈ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠ΅ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΡ
Π΄ΠΈΠ·Π°ΠΉΠ½ΠΎΠ². ΠΠ°Π²Π°ΠΉΡΠ΅ ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌ Π΅Π³ΠΎ ΠΏΠΎΠ΄ΡΠΎΠ±Π½Π΅Π΅.
ΠΠΎΠ²ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ picture
, ΡΠ΅ΡΠ°Π΅Ρ ΡΠ»Π΅Π΄ΡΡΡΠΈΠ΅ Π·Π°Π΄Π°ΡΠΈ, Π²ΡΡΠ°ΡΡΠΈΠ΅ ΠΏΠ΅ΡΠ΅Π΄ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΎΠΌ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΡ
Π²Π΅Π±-ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ (Ρ Π²ΠΎΡΠΏΠΎΠ»ΡΠ·ΡΡΡΡ ΠΊΠ»Π°ΡΡΠΈΡΠΈΠΊΠ°ΡΠΈΠ΅ΠΉ, ΠΏΡΠ΅Π΄Π»ΠΎΠΆΠ΅Π½Π½ΠΎΠΉ pepelsbey Π½Π° ΠΎΠ΄Π½ΠΎΠΉ ΠΈΠ· Π½Π΅Π΄Π°Π²Π½ΠΈΡ
ΠΊΠΎΠ½ΡΠ΅ΡΠ΅Π½ΡΠΈΠΉ ΠΏΠΎ ΡΡΠΎΠ½ΡΠ΅Π½Π΄Ρ):
- Π Π΅ΡΠΈΠ½Π°, Ρ.Π΅. ΡΠΊΡΠ°Π½Ρ Ρ ΠΏΠ»ΠΎΡΠ½ΠΎΡΡΡΡ ΡΠΎΡΠ΅ΠΊ Π½Π° Π΄ΡΠΉΠΌ 150 ΠΈ Π²ΡΡΠ΅, Π½Π° ΠΊΠΎΡΠΎΡΡΡ ΠΎΠ±ΡΡΠ½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π²ΡΠ³Π»ΡΠ΄ΠΈΡ ΡΠ°Π·ΠΌΡΡΠΎ
- ΠΠ΄Π°ΠΏΡΠΈΠ²Π½ΠΎΡΡΡ, Π·Π°Π΄Π°ΡΠ° ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ² ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΡΠΎΠ³Π»Π°ΡΠ½ΠΎ Π²Π°ΡΠΈΠΌ ΠΏΡΠ°Π²ΠΈΠ»Π°ΠΌ, ΠΏΡΠΎΠΏΠΈΡΠ°Π½Π½ΡΠΌ Π² Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ Π² Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ ΡΠ°Π·ΠΌΠ΅ΡΠ° Π²ΡΡΠΏΠΎΡΡΠ°.
- Π€ΠΎΡΠΌΠ°Ρ, Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΡΠ΅ ΡΠΎΡΠΌΠ°ΡΡ, ΡΠ°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ WebP, Π΅ΡΠ»ΠΈ ΠΎΠ½ΠΈ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡΡΡ Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠΌ
- ΠΠ°Π΄ΡΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΠΈΠ»ΠΈ Π₯ΡΠ΄ΠΎΠΆΠ΅ΡΡΠ²Π΅Π½Π½ΡΠ΅ ΡΠ΅Π»ΠΈ. ΠΠ±ΡΠ΅Π·ΠΊΠ° ΠΌΠ°Π»ΠΎΠ²Π°ΠΆΠ½ΡΡ ΡΠ°ΡΡΠ΅ΠΉ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, ΠΏΡΠΈ ΠΏΠΎΠΊΠ°Π·Π΅ Π½Π° ΡΡΡΡΠΎΠΉΡΡΠ²Π°Ρ Ρ ΠΌΠ΅Π½ΡΡΠΈΠΌ ΡΠΊΡΠ°Π½ΠΎΠΌ.
Π‘Π»ΠΎΠΆΠΈΠ² ΠΏΠ΅ΡΠ²ΡΠ΅ Π±ΡΠΊΠ²Ρ, ΠΏΠΎΠ»ΡΡΠ°Π΅ΠΌ ΠΌΠ½Π΅ΠΌΠΎΠ½ΠΈΠΊΡ Π ΠΠ€Π
Π‘ΠΈΠ½ΡΠ°ΠΊΡΠΈΡ
Π£ΡΠ»ΠΎΠ²Π½ΠΎ, ΡΠ°ΡΡΠΈΡΠ΅Π½Π½ΡΠΉ ΡΠΈΠ½ΡΠ°ΠΊΡΠΈΡ Π½ΠΎΠ²ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π²ΡΠ³Π»ΡΠ΄ΠΈΡ ΡΠ°ΠΊ
<picture> <source srcset="<ΡΠΏΠΈΡΠΎΠΊ URL c Π΄Π΅ΡΠΊΡΠΈΠΏΡΠΎΡΠ°ΠΌΠΈ>" [sizes="<Π²Π°ΡΠΈ ΡΠ°Π·ΠΌΠ΅ΡΡ Π² Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ ΡΠ°ΡΠΊΠ»Π°Π΄ΠΊΠΈ>"] [media="<ΠΌΠ΅Π΄ΠΈΠ°Π²ΡΡΠ°ΠΆΠ΅Π½ΠΈΠ΅>"] [type="<mime/type>"] > <source ...> ... <img src="image.jpg" alt="My image" [srcset="<ΡΠΏΠΈΡΠΎΠΊ URL Ρ Π΄Π΅ΡΠΊΡΠΈΠΏΡΠΎΡΠ°ΠΌΠΈ>"] [sizes="<Π²Π°ΡΠΈ ΡΠ°Π·ΠΌΠ΅ΡΡ Π² Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ ΡΠ°ΡΠΊΠ»Π°Π΄ΠΊΠΈ>"]> </picture>
ΠΠ»Π΅ΠΌΠ΅Π½Ρ
picture
Π½Π΅ ΡΠ΅Π½Π΄Π΅ΡΠΈΡ Π½ΠΈΠΊΠ°ΠΊΠΎΠΉ ΠΊΠΎΠ½ΡΠ΅Π½Ρ, Π° Π»ΠΈΡΡ ΡΠ²Π»ΡΠ΅ΡΡΡ ΡΠΏΡΠ°Π²ΠΎΡΠ½ΡΠΌ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠΎΠΌ Π΄Π»Ρ Π²Π»ΠΎΠΆΠ΅Π½Π½ΠΎΠ³ΠΎ Π² Π½Π΅Π³ΠΎ ΡΠ΅Π³Π° img
.ΠΠΎΡΡΠΎΠΌΡ Π΄Π»Ρ Π±ΠΎΠ»ΡΡΠΈΠ½ΡΡΠ²Π° Π·Π°Π΄Π°Ρ Ρ
Π²Π°ΡΠΈΡ ΡΠΎΠΊΡΠ°ΡΠ΅Π½Π½ΠΎΠΉ Π·Π°ΠΏΠΈΡΠΈ, ΡΠΎΠ²ΡΠ΅ΠΌ Π±Π΅Π· ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ picture
<img src="image.jpg" alt="My image" [srcset="<ΡΠΏΠΈΡΠΎΠΊ URL Ρ Π΄Π΅ΡΠΊΡΠΈΠΏΡΠΎΡΠ°ΠΌΠΈ>"] [sizes="<Π²Π°ΡΠΈ ΡΠ°Π·ΠΌΠ΅ΡΡ Π² Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ ΡΠ°ΡΠΊΠ»Π°Π΄ΠΊΠΈ>"]>
ΠΠ°Π²Π°ΠΉΡΠ΅ ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌ ΠΊΠ°ΠΊ ΡΠ΅ΡΠ°ΡΡΡΡ Π²ΡΡΠ΅ΠΎΠ·Π½Π°ΡΠ΅Π½Π½ΡΠ΅ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ Π½ΠΎΠ²ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. ΠΡΠ΅ ΡΠ°ΠΉΠ»Ρ ΠΏΡΠΈΠΌΠ΅ΡΠΎΠ² ΠΌΠΎΠΆΠ½ΠΎ Π½Π°ΠΉΡΠΈ Π² ΡΡΠΎΠΌ ΡΠ΅ΠΏΠΎΠ·ΠΈΡΠΎΡΠΈΠΈ github.com/fetis/picture
ΠΠ»Ρ ΡΠ΅ΡΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΠΏΡΠΈΠΌΠ΅ΡΠΎΠ² ΠΈΠ· Π΄Π°Π½Π½ΠΎΠΉ ΡΡΠ°ΡΡΠΈ Π½Π° Π΄Π΅ΡΠΊΡΠΎΠΏΠ΅ Π²Π°ΠΌ ΠΏΠΎΠ½Π°Π΄ΠΎΠ±ΡΡΡΡ Π»ΠΈΠ±ΠΎ Firefox Nighlty (ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠ° picture
Π²ΠΊΠ»ΡΡΠ°Π΅ΡΡΡ Π½Π°ΡΡΡΠΎΠΉΠΊΠΎΠΉ dom.image.picture.enable
Π² about:config), Π»ΠΈΠ±ΠΎ Chrome Canary, Π»ΠΈΠ±ΠΎ Opera Developer. ΠΠ° ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΠΎΠΌ ΡΡΡΡΠΎΠΉΡΡΠ²Π΅ Π½ΠΎΠ²ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡΠΎΡΠ΅ΡΡΠΈΡΠΎΠ²Π°ΡΡ Π² Chrome Beta
Π Π΅ΡΠΈΠ½Π°
Π£ Π½Π°Ρ Π΅ΡΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ 400Ρ 300 ΠΏΠΊΡ, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΠΌΡ Ρ ΠΎΡΠΈΠΌ ΡΠ°ΠΊΠΆΠ΅ ΠΊΡΠ°ΡΠΈΠ²ΠΎ ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°ΡΡ ΠΏΡΠΈ Π΄Π²ΡΠΊΡΠ°ΡΠ½ΠΎΠΉ ΠΈ ΡΡΠ΅Ρ ΠΊΡΠ°ΡΠ½ΠΎΠΉ ΠΏΠ»ΠΎΡΠ½ΠΎΡΡΠΈ ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ. ΠΠ»Ρ ΡΡΠΎΠ³ΠΎ Π³ΠΎΡΠΎΠ²ΠΈΠΌ Π΅ΡΠ΅ 2 ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ, ΡΠ°Π·ΠΌΠ΅ΡΠ°ΠΌΠΈ 800×600 ΠΈ 1200Ρ 900 ΠΈ ΠΏΠΈΡΠ΅ΠΌ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΉ ΠΊΠΎΠ΄
<img src="images/400.jpg" srcset="images/800.jpg 2x, images/1200.jpg 3x" >
2x
ΠΈ 3x
ΡΡΠΎ Π΄Π΅ΡΠΊΡΠΈΠΏΡΠΎΡΡ ΠΏΠ»ΠΎΡΠ½ΠΎΡΡΠ΅ΠΉ ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ, ΠΎΠ½ΠΈ Π³ΠΎΠ²ΠΎΡΡΡ Π±ΡΠ°ΡΠ·Π΅ΡΡ, ΡΡΠΎ Π²ΠΎΡ ΡΡΠΈ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ Π±ΡΠ»ΠΈ ΠΏΠΎΠ΄Π³ΠΎΡΠΎΠ²Π»Π΅Π½Ρ Π΄Π»Ρ Π²ΠΎΡ ΡΡΠΎΠΉ ΠΏΠ»ΠΎΡΠ½ΠΎΡΡΠΈ, Π΅ΡΠ»ΠΈ Ρ
ΠΎΡΠ΅ΡΡ, ΠΌΠΎΠΆΠ΅ΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ. ΠΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, ΠΎΠ½ΠΈ Π½Π΅ Π·Π°ΡΡΠ°Π²Π»ΡΡΡ Π±ΡΠ°Π·ΡΠ΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΡΠΈ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ, Π° ΡΠΎΠ»ΡΠΊΠΎ ΠΏΠΎΠ΄ΡΠΊΠ°Π·ΡΠ²Π°ΡΡ Π΅ΠΌΡ. ΠΠΊΠΎΠ½ΡΠ°ΡΠ΅Π»ΡΠ½ΠΎΠ΅ ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ ΠΎΡΡΠ°Π΅ΡΡΡ Π·Π° Π½ΠΈΠΌ Π² Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ Π΄ΡΡΠ³ΠΈΡ
ΡΡΠ»ΠΎΠ²ΠΈΠΉ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΡΠ΅ΠΊΡΡΠ΅Π³ΠΎ ΡΠΎΠ΅Π΄ΠΈΠ½Π΅Π½ΠΈΡ.
ΠΡΡΠΈΠ±ΡΡ src
Π² Π΄Π°Π½Π½ΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ ΡΠ»ΡΠΆΠΈΡ ΠΈΡΡΠΎΡΠ½ΠΈΠΊΠΎΠΌ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ Π΄Π»Ρ ΠΏΠ»ΠΎΡΠ½ΠΎΡΡΠΈ < 2 ΠΈ ΡΠΎΠ»Π±Π΅ΠΊΠΎΠΌ Π½Π° ΡΠ»ΡΡΠ°ΠΉ, Π΅ΡΠ»ΠΈ Π±ΡΠ°ΡΠ·Π΅Ρ Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅Ρ Π½ΠΎΠ²ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ.
ΠΠ΄Π°ΠΏΡΠΈΠ²Π½ΠΎΡΡΡ
ΠΡΠ΅Π΄ΡΡΠ°Π²ΠΈΠΌ ΡΠ°ΡΠΊΠ»Π°Π΄ΠΊΡ, Π² ΠΊΠΎΡΠΎΡΠΎΠΉ Π΅ΡΡΡ Π΅Π΄ΠΈΠ½ΡΡΠ²Π΅Π½Π½Π°Ρ ΠΊΠΎΠ½ΡΡΠΎΠ»ΡΠ½Π°Ρ ΡΠΎΡΠΊΠ° (breakpoint) 700ΠΏΠΊΡ. ΠΡΠΈ ΡΠ°Π·ΠΌΠ΅ΡΠ΅ Π²ΡΡΠΏΠΎΡΡΠ° Π±ΠΎΠ»Π΅Π΅ 700 ΠΏΠΊΡ ΠΌΡ ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°Π΅ΠΌ ΡΠΏΡΠ°Π²Π° ΡΠ°ΠΉΠ΄Π±Π°Ρ ΠΈ ΡΠ°Π·ΠΌΠ΅Ρ Π½Π°ΡΠ΅Π³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±ΡΡΡ 75% ΠΎΡ ΡΠΈΡΠΈΠ½Ρ ΡΠΊΡΠ°Π½Π°. Π ΠΏΡΠΎΡΠΈΠ²Π½ΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ ΡΠ°ΠΉΠ΄Π±Π°Ρ ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°Π΅ΡΡΡ Π² ΠΊΠΎΠ½ΡΠ΅ ΡΡΡΠ°Π½ΠΈΡΡ ΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±ΡΡΡ ΡΠ°ΡΡΡΠ½ΡΡΠΎ Π½Π° Π²ΡΡ ΡΠΈΡΠΈΠ½Ρ. ΠΡΠΎ ΡΠ΅Π°Π»ΠΈΠ·ΡΠ΅ΡΡΡ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΌ ΠΊΠΎΠ΄ΠΎΠΌ
<img
src="images/400.jpg"
srcset=" 400w, images/800.jpg 800w, images/1200.jpg 1200w"
>
400w, 800w, 1200w
β ΡΡΠΎ Π΄Π΅ΡΠΊΡΠΈΠΏΡΠΎΡΡ ΡΠΈΡΠΈΠ½Ρ, ΠΎΠ½ΠΈ ΠΏΠΎΠ΄ΡΠΊΠ°Π·ΡΠ²Π°ΡΡ Π±ΡΠ°ΡΠ·Π΅ΡΡ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠ° ΠΊΠ°ΠΊΠΎΠΉ ΡΠΈΡΠΈΠ½Ρ Π½Π°Ρ
ΠΎΠ΄ΠΈΡΡΡ ΠΏΠΎ Π΄Π°Π½Π½ΠΎΠΌΡ URL ΠΈ Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ ΡΡΠΎΠΉ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΈ Π±ΡΠ°ΡΠ·Π΅Ρ ΠΏΡΠΈΠ½ΠΈΠΌΠ°Π΅Ρ ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ ΠΊΠ°ΠΊΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π»ΡΡΡΠ΅ Π²ΡΠ΅Π³ΠΎ ΠΏΠΎΠ΄ΠΎΠΉΠ΄Π΅Ρ Π² ΡΠ΅ΠΊΡΡΠ΅ΠΉ ΡΠΈΡΡΠ°ΡΠΈΠΈ. ΠΠ°ΠΊ ΠΈ Π² ΡΠ»ΡΡΠ°Π΅ Ρ ΡΠ΅ΡΠΈΠ½ΠΎΠΉ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ Π½ΠΎΡΠΈΡ ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄Π°ΡΠ΅Π»ΡΠ½ΡΠΉ Ρ
Π°ΡΠ°ΠΊΡΠ΅Ρ ΠΈ ΠΎΠΊΠΎΠ½ΡΠ°ΡΠ΅Π»ΡΠ½ΠΎΠ΅ ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ ΠΊΠ°ΠΊΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π³ΡΡΠ·ΠΈΡΡ ΠΎΡΡΠ°Π΅ΡΡΡ Π·Π° Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠΌ.Π Π°ΡΡΠΈΠ±ΡΡΠ΅ sizes
ΠΏΠ΅ΡΠ΅ΡΠΈΡΠ»ΡΡΡΡΡ ΡΠ°Π·ΠΌΠ΅ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π΄Π»Ρ Π²ΡΠ΅Ρ
ΠΊΠΎΠ½ΡΡΠΎΠ»ΡΠ½ΡΡ
ΡΠΎΡΠ΅ΠΊ Π² Π½Π°ΡΠ΅ΠΌ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅. ΠΠΎΠ½ΡΡΠΎΠ»ΡΠ½ΡΠ΅ ΡΠΎΡΠΊΠΈ Π·Π°Π΄Π°ΡΡΡΡ Π² Π²ΠΈΠ΄Π΅ ΠΎΠ±ΡΡΠ½ΠΎΠ³ΠΎ ΠΌΠ΅Π΄ΠΈΠ°Π²ΡΡΠ°ΠΆΠ΅Π½ΠΈΡ, Π±ΡΠ°ΡΠ·Π΅Ρ Π±Π΅ΡΠ΅Ρ ΠΏΠ΅ΡΠ²ΠΎΠ΅, ΠΊΠΎΡΠΎΡΠΎΠ΅ Π²ΠΎΠ·Π²ΡΠ°ΡΠ°Π΅Ρ ΠΡΡΠΈΠ½Ρ ΠΈ Π΄Π°Π»ΡΡΠ΅ ΡΠ΅ΠΏΠΎΡΠΊΡ Π½Π΅ ΡΠ°ΡΡΠΌΠ°ΡΡΠΈΠ²Π°Π΅Ρ. ΠΠ»Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΡΠΈΡΠΈΠ½Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π½ΠΎΠ²Π°Ρ Π΅Π΄ΠΈΠ½ΠΈΡΠ° Π΄Π»ΠΈΠ½Ρ vw, ΠΊΠΎΡΠΎΡΠ°Ρ Π²ΠΎΠ·Π²ΡΠ°ΡΠ°Π΅Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Π² ΠΏΡΠΎΡΠ΅Π½ΡΠ°Ρ
ΠΎΡ ΡΠΈΡΠΈΠ½Ρ Π²ΡΡΠΏΠΎΡΡΠ°.
ΠΡΠ»ΠΈ Π΄Π»Ρ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ Π½Π΅Ρ Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΠΎΡΡΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΊΠΎΠ½ΡΡΠΎΠ»ΡΠ½ΡΠ΅ ΡΠΎΡΠΊΠΈ, ΡΠΎ Π·Π°ΠΏΠΈΡΡ ΠΌΠΎΠΆΠ½ΠΎ ΡΠΎΠΊΡΠ°ΡΠΈΡΡ Π΄ΠΎ ΡΠ°ΠΊΠΎΠΉ
. Π Π΄Π»Ρ Π±ΠΎΠ»Π΅Π΅ ΡΠ»ΠΎΠΆΠ½ΡΡ
Π΄ΠΈΠ·Π°ΠΉΠ½ΠΎΠ² ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ CSS-ΡΡΠ½ΠΊΡΠΈΡ calc()
, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρsizes="(max-width: 30em) 100vw, (max-width: 50em) 50vw, calc(33vw - 100px)"
Π‘Π°ΠΌΡΠΉ ΡΠ»ΠΎΠΆΠ½ΡΠΉ Π² ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠΈ Π°ΡΡΠΈΠ±ΡΡ Π½Π° ΠΌΠΎΠΉ Π²Π·Π³Π»ΡΠ΄. ΠΡΠ»ΠΈ Π½Π΅ ΡΠΊΠ°Π·ΡΠ²Π°ΡΡ sizes
, ΡΠΎ Π±ΡΠ°ΡΠ·Π΅Ρ Π²ΡΠ΅Π³Π΄Π° Π²ΡΠ±ΠΈΡΠ°Π» ΡΠ°ΠΌΡΡ Π±ΠΎΠ»ΡΡΡΡ ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ. Π ΡΠΎΡΠ΅ΡΠ°Π½ΠΈΠΈ Ρ width
Π½Π΅ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ, Ρ
ΠΎΡΡ ΠΊΠ°Π·Π°Π»ΠΎΡΡ Π±Ρ Π»ΠΎΠ³ΠΈΡΠ½ΠΎΠ΅ ΡΠΎΡΠ΅ΡΠ°Π½ΠΈΠ΅ ΠΈ ΡΡΠ΄ Π΄ΡΡΠ³ΠΈΡ
Π³Π»ΡΠΊΠΎΠ². ΠΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ ΡΡΠΎ ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎΡΡΠΈ ΡΠ°Π½Π½Π΅ΠΉ ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΠΈ.
ΠΠ°ΠΊ Π²ΠΈΠ΄ΠΈΡΠ΅, ΠΌΡ ΡΠΆΠ΅ ΠΏΠΎΠΊΡΡΠ»ΠΈ 80% ΠΏΠΎΡΡΠ΅Π±Π½ΠΎΡΡΠ΅ΠΉ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠΉ Π²Π΅ΡΡΡΠΊΠΈ, Π° Π΅ΡΠ΅ Π½ΠΈ ΡΠ°Π·Ρ Π½Π΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π»ΠΈ picture
Π€ΠΎΡΠΌΠ°Ρ
ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ ΡΠΎΡΠΌΠ°ΡΠΎΠ² Π΄Π»Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ ΠΌΠ°Π»ΠΎ ΠΎΡΠ»ΠΈΡΠ°Π΅ΡΡΡ ΠΎΡ ΡΠΏΠΎΡΠΎΠ±ΠΎΠ² ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΡΡ Π΄Π»Ρ ΡΠ΅Π³ΠΎΠ²
video
ΠΈΠ»ΠΈ audio
<picture>
<source srcset="images/400.webp" type="image/webp">
<img src="images/400.jpg"
>
</picture>
ΠΡ ΡΠΊΠ°Π·ΡΠ²Π°Π΅ΠΌ ΡΠΏΠΈΡΠΎΠΊ ΠΈΡΡΠΎΡΠ½ΠΈΠΊΠΎΠ² ΠΈ mime/type Π΄Π»Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ, Π° Π±ΡΠ°ΡΠ·Π΅Ρ ΡΠΆΠ΅ Π²ΡΠ±ΠΈΡΠ°Π΅Ρ ΠΏΠ΅ΡΠ²ΡΠΉ, ΠΊΠΎΡΠΎΡΡΠΉ Π·Π½Π°Π΅Ρ. Π ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ ΡΠΎΠ»Π±Π΅ΠΊΠ° ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΈΠ· Π°ΡΡΠΈΠ±ΡΡΠ°
src
.ΠΠ°Π΄ΡΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅
ΠΠΎΠ³Π΄Π° ΠΌΡ ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°Π΅ΠΌ ΡΠΎΡΠΎ Π½Π° ΠΌΠ΅Π½ΡΡΠ΅ΠΌ ΡΠΊΡΠ°Π½Π΅ ΠΈΠ½ΠΎΠ³Π΄Π° ΠΈΠΌΠ΅Π΅Ρ ΡΠΌΡΡΠ» ΠΎΠ±ΡΠ΅Π·Π°ΡΡ Π»ΠΈΡΠ½ΠΈΠ΅ Π΄Π΅ΡΠ°Π»ΠΈ, ΠΎΡΡΠ°Π²ΠΈΠ² ΡΠΎΠ»ΡΠΊΠΎ ΠΎΡΠ½ΠΎΠ²Π½ΡΡ ΡΠ°ΡΡΡ. Π‘ ΡΡΠΎΠΉ Π·Π°Π΄Π°ΡΠ΅ΠΉ Π½Π°ΠΌ ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ ΡΠΏΡΠ°Π²ΠΈΡΡΡΡ Π°ΡΡΠΈΠ±ΡΡ
media
<picture>
<source media="(min-width: 900px)" srcset="images/original.jpg 1200w">
<source media="(min-width: 700px)" srcset="images/800crop.jpg 800w">
<img
srcset="images/400crop.jpg 400w"
>
</picture>
Π ΠΊΠ°ΠΆΠ΄ΠΎΠΌ Π°ΡΡΠΈΠ±ΡΡΠ΅
media
ΠΌΡ Π·Π°Π΄Π°Π΅ΠΌ ΠΌΠ΅Π΄ΠΈΠ°Π²ΡΡΠ°ΠΆΠ΅Π½ΠΈΠ΅, ΠΏΡΠΈ ΠΊΠΎΡΠΎΡΠΎΠΌ Ρ Π½Π°Ρ Π±ΡΠ΄Π΅Ρ ΠΌΠ΅Π½ΡΡΡΡΡ ΠΈΡΡ
ΠΎΠ΄Π½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΈ, Π² ΠΎΡΠ»ΠΈΡΠΈΠ΅ ΠΎΡ ΠΏΡΠ΅Π΄ΡΠ΄ΡΡΠΈΡ
ΠΏΡΠΈΠΌΠ΅ΡΠΎΠ², Π±ΡΠ°ΡΠ·Π΅Ρ Π±ΡΠ΄Π΅Ρ ΠΎΠ±ΡΠ·Π°Π½ Π΅ΠΌΡ ΡΠ»Π΅Π΄ΠΎΠ²Π°ΡΡ. ΠΠ±ΡΠ°ΡΠΈΡΠ΅ ΡΠ°ΠΊΠΆΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ ΠΊΠ°ΠΊ ΠΊΠ°Π΄ΡΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ Π·Π΄Π΅ΡΡ ΡΠΎΡΠ΅ΡΠ°Π΅ΡΡΡ Ρ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΡΡΡΡ, ΡΡΠΎΠ±Ρ ΡΠ°ΡΡΡΠ½ΡΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π° Π²ΡΡ ΡΠΈΡΠΈΠ½Ρ.Π ΠΠ€Π
Π ΡΠ΅ΠΏΠ΅ΡΡ Π²ΡΠ΅ 4 ΠΌΠ΅ΡΠΎΠ΄Π° Π² ΠΎΠ΄Π½ΠΎΠΌ ΡΠ»Π°ΠΊΠΎΠ½Π΅ π ΠΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ ΡΠ°ΠΊ Π±ΡΠ΄Π΅Ρ Π²ΡΠ³Π»ΡΠ΄Π΅ΡΡ Π²ΡΡΠ°Π²ΠΊΠ° ΠΊΠ°ΡΡΠΈΠ½ΠΎΠΊ ΡΠ΅ΡΠ΅Π· ΠΏΠ°ΡΡ Π»Π΅Ρ (ΠΏΡΠΈΠΌΠ΅Ρ ΠΈΠ· Π±Π»ΠΎΠ³Π° ΠΠΏΠ΅ΡΡ)
<picture> <source media="(min-width: 1280px)" sizes="50vw" srcset="opera-fullshot-200.webp 200w, opera-fullshot-400.webp 400w, opera-fullshot-800.webp 800w, opera-fullshot-1200.webp 1200w, opera-fullshot-1600.webp 1600w, opera-fullshot-2000.webp 2000w" type="image/webp"> <source sizes="(min-width: 640px) 60vw, 100vw" srcset="opera-closeup-200.webp 200w, opera-closeup-400.webp 400w, opera-closeup-800.webp 800w, opera-closeup-1200.webp 1200w, opera-closeup-1600.webp 1600w, opera-closeup-2000.webp 2000w" type="image/webp"> <source media="(min-width: 1280px)" sizes="50vw" srcset="opera-fullshot-200.jpg 200w, opera-fullshot-400.jpg 400w, opera-fullshot-800.jpg 800w, opera-fullshot-1200.jpg 1200w, opera-fullshot-1600.jpg 1800w, opera-fullshot-2000.jpg 2000w"> <img src="opera-closeup-400.jpg" alt="The Oslo Opera House" sizes="(min-width: 640px) 60vw, 100vw" srcset="opera-closeup-200.jpg 200w, 400w, opera-closeup-800.jpg 800w, opera-closeup-1200.jpg 1200w, opera-closeup-1600.jpg 1600w, opera-closeup-2000.jpg 2000w"> </picture>
ΠΠ΄Π΅ΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΡΡ 2 ΡΠΎΡΠΌΠ°ΡΠ° JPEG ΠΈ WebP. ΠΡΠΈ ΡΠΈΡΠΈΠ½Π΅ ΡΠΊΡΠ°Π½Π° Π±ΠΎΠ»Π΅Π΅ 1280 ΠΏΠΊΡ ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°Π΅ΡΡΡ ΠΏΠΎΠ»Π½ΠΎΡΠ°Π·ΠΌΠ΅ΡΠ½Π°Ρ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠ° Π² ΠΏΠΎΠ»ΠΎΠ²ΠΈΠ½Ρ Π²ΡΡΠΏΠΎΡΡΠ°. ΠΡΠΈ ΡΠΈΡΠΈΠ½Π΅ ΠΎΡ 640 Π΄ΠΎ 1279 ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°Π΅ΡΡΡ ΠΎΠ±ΡΠ΅Π·Π°Π½Π½ΠΎΠ΅ ΡΠΎΡΠΎ Π½Π° 60% ΡΠΈΡΠΈΠ½Ρ Π²ΡΡΠΏΠΎΡΡΠ°. ΠΡΠΈ ΡΠΈΡΠΈΠ½Π΅ ΡΠΊΡΠ°Π½Π° ΠΌΠ΅Π½ΡΡΠ΅ 640ΠΏΠΊΡ ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°Π΅ΡΡΡ ΠΎΠ±ΡΠ΅Π·Π°Π½Π½Π°Ρ ΡΠΎΡΠΎΠ³ΡΠ°ΡΠΈΡ Π½Π° 100% ΡΠΈΡΠΈΠ½Ρ. ΠΡΠ±ΠΎΡ ΠΏΠΎΠ΄ ΡΠ΅ΠΊΡΡΠ΅Π΅ DPI ΡΠΊΡΠ°Π½Π° ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΡΡ Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ ΡΠΈΡΠΈΠ½Ρ ΠΈΡΡ ΠΎΠ΄Π½ΡΡ ΡΠ°ΠΉΠ»ΠΎΠ².
ΠΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½Π°Ρ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ
ΠΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠ° Π±ΡΠ°ΡΠ·Π΅ΡΠ°ΠΌΠΈ caniuse.com/#search=picture
Π‘ΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΡ www.w3.org/html/wg/drafts/html/master/embedded-content.html#the-picture-element
Π Π°Π±ΠΎΡΠ°Ρ Π³ΡΡΠΏΠΏΠ° ΠΈ ΡΠΈΠΏΠΎΠ²ΡΠ΅ Π·Π°Π΄Π°ΡΠΈ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΎΠ½ΠΈ ΡΠ΅ΡΠ°Π»ΠΈ Ρ ΠΏΠΎΠΌΠΎΡΡΡ Π½ΠΎΠ²ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° responsiveimages.org
ΠΠ½ΠΎΠΆΠ΅ΡΡΠ²ΠΎ ΠΏΡΠΈΠΌΠ΅ΡΠΎΠ² ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ dev.opera.com/articles/responsive-images
habr.com
| Π‘ΠΏΡΠ°Π²ΠΎΡΠ½ΠΈΠΊ HTML
ΠΠ»Π΅ΠΌΠ΅Π½Ρ <picture> (ΠΎΡ Π°Π½Π³Π». «picture» β Β«ΠΊΠ°ΡΡΠΈΠ½Π°, ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅Β») ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΠ΅Ρ ΡΠΎΠ±ΠΎΠΉ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ Π΄Π»Ρ Ρ ΡΠ°Π½Π΅Π½ΠΈΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² <source>, ΠΊΠ°ΠΆΠ΄ΡΠΉ ΠΈΠ· ΠΊΠΎΡΠΎΡΡΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΡ ΠΈΠΌΠ΅Π½Π° ΡΠ°ΠΉΠ»ΠΎΠ² Π°Π»ΡΡΠ΅ΡΠ½Π°ΡΠΈΠ²Π½ΡΡ Π²Π΅ΡΡΠΈΠΉ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΈ ΡΠΎΠ³ΠΎ ΠΆΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π²ΠΌΠ΅ΡΡΠ΅ Ρ ΡΡΠ»ΠΎΠ²ΠΈΡΠΌΠΈ, ΠΏΡΠΈ ΠΊΠΎΡΠΎΡΡΡ ΡΠ΅ Π΄ΠΎΠ»ΠΆΠ½Ρ Π±ΡΡΡ Π·Π°Π³ΡΡΠΆΠ΅Π½Ρ. ΠΡΠΎ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΡΠΊΠ°Π·ΡΠ²Π°ΡΡ ΡΠ°Π·Π½ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Ρ ΡΡΡΡΠΎΠΌ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΡΠΊΡΠ°Π½Π°, ΠΏΠ»ΠΎΡΠ½ΠΎΡΡΠΈ ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ, ΡΠΎΡΠΌΠ°ΡΠ° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΈ Π΄ΡΡΠ³ΠΈΡ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΠΎΠ². ΠΡΠ±ΡΠ°Π½Π½ΡΠΉ Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠΌ Π²Π°ΡΠΈΠ°Π½Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π²ΡΠ²ΠΎΠ΄ΠΈΡΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ Π²Π»ΠΎΠΆΠ΅Π½Π½ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° <img>. ΠΠ»Π΅ΠΌΠ΅Π½Ρ <picture> ΠΌΠΎΠΆΠ΅Ρ ΡΡΠΊΠΎΡΠΈΡΡ Π·Π°Π³ΡΡΠ·ΠΊΡ Π²Π°ΡΠΈΡ ΡΠ°ΠΉΡΠΎΠ², ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎ Π½Π° ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ Π΄Π΅Π²Π°ΠΉΡΠ°Ρ .
ΠΡΠΈΠΌΠ΅ΡΠ°Π½ΠΈΠ΅: Π Π΄Π°Π½Π½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΌΠΎΠΆΠ΅Ρ Π²ΠΊΠ»Π°Π΄ΡΠ²Π°ΡΡΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² <source>, ΠΏΠΎΡΠ»Π΅ ΡΠ΅Π³ΠΎ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±ΡΡΡ Π²Π»ΠΎΠΆΠ΅Π½ ΠΎΠ΄ΠΈΠ½ <img> ΡΠ»Π΅ΠΌΠ΅Π½Ρ, Π·Π° ΠΊΠΎΡΠΎΡΡΠΌ ΠΌΠΎΠ³ΡΡ ΡΠ»Π΅Π΄ΠΎΠ²Π°ΡΡ ΡΠΊΡΠΈΠΏΡ-ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅ΠΌΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ.
ΠΠΎΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΎΠ±Π»Π°ΡΡΠ΅ΠΉ ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° <picture>:
- Π΄Π»Ρ ΠΠ-Π΄ΠΈΡΠΏΠ»Π΅Π΅Π² Β«RetinaΒ», ΠΎΡΠ»ΠΈΡΠ°ΡΡΠΈΡ ΡΡ Π²ΡΡΠΎΠΊΠΎΠΉ ΠΏΠ»ΠΎΡΠ½ΠΎΡΡΡΡ ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ, ΠΌΠΎΠΆΠ½ΠΎ Π·Π°Π³ΡΡΠΆΠ°ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Ρ Π²ΡΡΠΎΠΊΠΈΠΌ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ΠΌ;
- Π²ΡΠ²ΠΎΠ΄ΠΈΡΡ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ ΡΠ°Π·Π½ΠΎΠ³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ° Π΄Π»Ρ Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠ² ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ ΠΈΠ»ΠΈ Π½Π°ΡΡΠΎΠ»ΡΠ½ΡΡ ΡΡΡΡΠΎΠΉΡΡΠ², Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΠΎΠ±ΡΠ΅Π·ΠΊΠ° ΠΌΠ°Π»ΠΎΠ²Π°ΠΆΠ½ΡΡ ΡΠ°ΡΡΠ΅ΠΉ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, ΠΏΡΠΈ ΠΏΠΎΠΊΠ°Π·Π΅ Π½Π° ΡΡΡΡΠΎΠΉΡΡΠ²Π°Ρ Ρ ΠΌΠ΅Π½ΡΡΠΈΠΌ ΡΠΊΡΠ°Π½ΠΎΠΌ;
- Π·Π°Π³ΡΡΠΆΠ°ΡΡ ΠΏΠΎ-ΡΠ°Π·Π½ΠΎΠΌΡ ΠΎΡΠΈΠ΅Π½ΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π² ΡΠ°Π·Π½ΡΡ ΠΏΡΠΎΠΏΠΎΡΡΠΈΡΡ Π΄Π»Ρ ΡΠΎΠ³ΠΎ, ΡΡΠΎΠ±Ρ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΎΠ²Π°ΡΡ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡΠΌ Π² ΠΌΠ°ΠΊΠ΅ΡΠ΅, ΡΡΠΈΡΡΠ²Π°ΡΡΠ΅ΠΌ ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΡ ΡΡΡΡΠΎΠΉΡΡΠ²Π°;
- Π²ΡΠ²ΠΎΠ΄ΠΈΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π² Π²Π΅ΠΊΡΠΎΡΠ½ΠΎΠΌ ΡΠΎΡΠΌΠ°ΡΠ΅ SVG, Π° Π΄Π»Ρ Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠ², Π΅Π³ΠΎ Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡΠΈΡ , ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°ΡΡ ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ Ρ Π΄ΡΡΠ³ΠΈΠΌ ΡΠ°ΡΡΠΈΡΠ΅Π½ΠΈΠ΅ΠΌ.
Π‘ΠΈΠ½ΡΠ°ΠΊΡΠΈΡ
<picture>
<source srcset="URL">
...
<img src="..." alt="...">
</picture>
ΠΠ°ΠΊΡΡΠ²Π°ΡΡΠΈΠΉ ΡΠ΅Π³
ΠΠ±ΡΠ·Π°ΡΠ΅Π»Π΅Π½.
ΠΡΡΠΈΠ±ΡΡΡ
ΠΠ»Ρ ΡΡΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π΄ΠΎΡΡΡΠΏΠ½Ρ Π³Π»ΠΎΠ±Π°Π»ΡΠ½ΡΠ΅ Π°ΡΡΠΈΠ±ΡΡΡ.
Π Π°Π·Π»ΠΈΡΠΈΡ ΠΌΠ΅ΠΆΠ΄Ρ HTML 4.01 ΠΈ HTML5
ΠΠ»Π΅ΠΌΠ΅Π½Ρ <picture> Π±ΡΠ» Π²Π²Π΅Π΄Π΅Π½ Π² HTML 5.
ΠΡΠΈΠΌΠ΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ:
Π ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ Π·Π°Π³ΡΡΠΆΠ°Π΅ΠΌΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π·Π°Π²ΠΈΡΠΈΡ ΠΎΡ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΡΠΊΡΠ°Π½Π°:
ΠΡΠΈΠΌΠ΅Ρ HTML:
ΠΠΎΠΏΡΠΎΠ±ΡΠΉ ΡΠ°ΠΌ<picture>
<source media="(max-width: 25em)"
srcset="iphone.png">
<source media="(max-width: 48em)"
srcset="[email protected]">
<img src="iphone.png"
alt="iPhone">
</picture>
Π‘ΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΠΈ
ΠΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠ° Π±ΡΠ°ΡΠ·Π΅ΡΠ°ΠΌΠΈ
ΠΠ»Π΅ΠΌΠ΅Π½Ρ | ||||||
<picture> | 38+ | 25+ | ΠΠ° | 9.1+ | 38+ |
ΠΠ»Π΅ΠΌΠ΅Π½Ρ | ||||
<picture> | 38+ | 35+ | 9.3+ |
Π£ΡΠ΅Π±Π½ΠΈΠΊ HTML
HTML ΡΡΠΎΠΊΠΈ: HTML ΠΠ»Π΅ΠΌΠ΅Π½ΡΡ
HTML ΠΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ
wm-school.ru
ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΡΡΠ³Π° HTML5 picture Π΄Π»Ρ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ
ΠΡ Π°Π²ΡΠΎΡΠ°: ΠΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π΄Π°Π²Π½ΠΎ ΠΈΠ·Π²Π΅ΡΡΠ½Ρ ΠΊΠ°ΠΊ ΡΠ°ΠΌΡΠ΅ ΡΡΡΠ΄ΠΎΠ΅ΠΌΠΊΠΈΠ΅ Π°ΡΠΏΠ΅ΠΊΡΡ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠ³ΠΎ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π°. Π‘Π΅Π³ΠΎΠ΄Π½Ρ, ΠΌΡ ΡΠ²ΠΈΠ΄ΠΈΠΌ ΠΊΠ°ΠΊ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ picture Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ ΡΠ΅ΡΠ΅Π½ΠΈΡ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ ΠΏΡΡΠΌΠΎ ΡΠ΅ΠΉΡΠ°Ρ.
Β
ΠΠ΅ΡΠ΅Π²ΠΎΠ΄ Π²ΡΠΏΠΎΠ»Π½ΠΈΠ»Π°: ΠΠ°Π»Π΅ΡΠΈΡ ΠΠ°ΡΡΡΠΊΠ°ΡΠΠ΅Π½Ρ Π·ΠΎΠ²ΡΡ ΠΠ°Π»Π΅ΡΠΈΡ, Ρ ΠΆΠΈΠ²Ρ Π² ΠΠΈΠ΅Π²Π΅. ΠΠ΅ΡΠ΅Π²ΠΎΠ΄ΡΠΈΠΊ Π² ΠΏΡΠΎΡΠ»ΠΎΠΌ, ΡΠ΅ΠΉΡΠ°Ρ Ρ ΡΡΠΎΠ½Ρ-ΡΠ½Π΄ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊ. ΠΠ΅ΠΏΠ»ΠΎΡ ΠΎ Π²Π»Π°Π΄Π΅Ρ HTML5 ΠΈ CSS3, Twitter bootstrap, Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠΉ Π²Π΅ΡΡΡΠΊΠΎΠΉ, ΡΠ°Π±ΠΎΡΠ°Ρ Ρ jQuery, Π°ΠΊΡΠΈΠ²Π½ΠΎ ΠΈΠ·ΡΡΠ°Ρ ΡΠΈΡΡΡΠΉ JavaScript, ΠΈΠΌΠ΅Ρ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½ΠΈΠ΅ ΠΎΠ± MVC ΡΡΠ΅ΠΉΠΌΠ²ΠΎΡΠΊΠ°Ρ , Π² ΡΠ°ΡΡΠ½ΠΎΡΡΠΈ Ruby on Rails. |
ΠΠΎ-ΠΏΠ΅ΡΠ²ΡΡ , ΡΠ°ΠΌΠ° ΠΏΡΠΎΠ±Π»Π΅ΠΌΠ°
ΠΡΠ΅ΠΌΠ΅Π½Π° Π΄ΠΈΠ·Π°ΠΉΠ½Π° ΡΠ°ΠΉΡΠΎΠ² Ρ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠΉ ΡΠΈΡΠΈΠ½ΠΎΠΉ ΠΈ ΠΏΠΎΠ»Π½ΡΠΌ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΠ΅ΠΌ ΠΌΠ°ΠΊΠ΅ΡΡ Π΄Π°Π²Π½ΠΎ ΠΏΠΎΠ·Π°Π΄ΠΈ. Π Π½ΡΠ½Π΅ΡΠ½Π΅Π΅ Π²ΡΠ΅ΠΌΡ ΡΠΈΡΠΎΠΊΠΎΡΠΎΡΠΌΠ°ΡΠ½ΡΡ ΠΌΠΎΠ½ΠΈΡΠΎΡΠΎΠ², ΠΈΠ½ΡΠ΅ΡΠ½Π΅Ρ-ΡΠ΅Π»Π΅Π²ΠΈΠ΄Π΅Π½ΠΈΡ, ΠΏΠ»Π°Π½ΡΠ΅ΡΠΎΠ² ΠΈ ΡΠΌΠ°ΡΡΡΠΎΠ½ΠΎΠ² ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ² Π½Π°Ρ Π΄ΠΈΠ·Π°ΠΉΠ½ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΏΡΠΈΠ½ΠΈΠΌΠ°ΡΡ Π² ΡΠ°ΡΡΠ΅Ρ Π»ΡΠ±ΡΠ΅ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΡ β ΠΎΡ 320 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ ΠΈ Π΄ΠΎ 7680.
ΠΡΠ΅ ΡΡΠΈ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΡ ΠΏΡΠ΅Π΄ΡΡΠ²Π»ΡΡΡ ΡΡΠ΅Π±ΠΎΠ²Π°Π½ΠΈΡ ΠΊ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡΠΌ β ΠΎΠ½ΠΈ Π΄ΠΎΠ»ΠΆΠ½Ρ ΡΠ°ΡΡΡΠ³ΠΈΠ²Π°ΡΡΡΡ ΠΈ ΡΠΌΠ΅Π½ΡΡΠ°ΡΡΡΡ, ΡΡΠΎΠ±Ρ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΎΠ²Π°ΡΡ Π²ΡΠ΅ΠΌΡ ΡΠ°Π·Π½ΠΎΠΎΠ±ΡΠ°Π·ΠΈΡ ΡΡΠ΅Π±ΠΎΠ²Π°Π½ΠΈΠΉ. ΠΡΠΎ ΠΌΠΎΠΆΠ΅Ρ ΠΎΠΊΠ°Π·Π°ΡΡΡΡ ΠΏΡΠΎΠ±Π»Π΅ΠΌΠΎΠΉ, Ρ.ΠΊ. Π·Π° ΠΈΡΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅ΠΌ Π²Π΅ΠΊΡΠΎΡΠ½ΠΎΠΉ Π³ΡΠ°ΡΠΈΠΊΠΈ, Π±ΠΎΠ»ΡΡΠΈΠ½ΡΡΠ²ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ ΠΈΠΌΠ΅Π΅Ρ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΡ ΡΠΈΡΠΈΠ½Ρ Π² ΠΏΠΈΠΊΡΠ΅Π»ΡΡ , ΠΊΠΎΡΠΎΡΠ°Ρ Π½Π΅ ΠΈΠ·ΠΌΠ΅Π½ΡΠ΅ΡΡΡ.
Π’Π°ΠΊ ΡΡΠΎ ΠΆΠ΅ Π΄Π΅Π»Π°ΡΡ?
ΠΡΠ½Π΅ΡΠ½Π΅Π΅, ΡΠ°ΠΌΠΎΠ΅ ΡΠ°ΡΠΏΡΠΎΡΡΡΠ°Π½Π΅Π½Π½ΠΎΠ΅ ΡΠ΅ΡΠ΅Π½ΠΈΠ΅
ΠΠ°ΠΊ ΠΏΡΠ°Π²ΠΈΠ»ΠΎ, Π²Ρ Π½Π°ΠΉΠ΄Π΅ΡΠ΅ ΡΠ»Π΅Π΄ΡΡΡΠ΅Π΅ Π² CSS ΠΊΠΎΠ΄Π΅ ΠΏΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈ Π»ΡΠ±ΠΎΠ³ΠΎ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠ³ΠΎ ΡΠ°ΠΉΡΠ°:
ΠΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈΠΉ ΠΊΡΡΡ ΠΏΠΎ Π²Π΅ΡΡΡΠΊΠ΅ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠ³ΠΎ ΡΠ°ΠΉΡΠ° Ρ Π½ΡΠ»Ρ!
ΠΠ·ΡΡΠΈΡΠ΅ ΠΊΡΡΡ ΠΈ ΡΠ·Π½Π°ΠΉΡΠ΅, ΠΊΠ°ΠΊ Π²Π΅ΡΡΡΠ°ΡΡ ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΡΠ΅ ΡΠ°ΠΉΡΡ Π½Π° HTML5 ΠΈ CSS3
Π£Π·Π½Π°ΡΡ ΠΏΠΎΠ΄ΡΠΎΠ±Π½Π΅Π΅img { max-width: 100%; height: auto;}
img {Β Β Β Β max-width: 100%;Β Β Β Β height: auto;} |
ΠΡΠΎΡ ΠΊΠΎΠ΄ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ Π½Π°ΡΡΡΠΎΠΉΠΊΡ max-width: 100%; Π΄Π»Ρ ΡΠΎΠ³ΠΎ, ΡΡΠΎΠ±Ρ ΡΠ±Π΅Π΄ΠΈΡΡΡΡ Π² ΡΠΎΠΌ, ΡΡΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π΅ Π±ΡΠ΄Π΅Ρ Π²ΡΠ΄Π°Π²Π°ΡΡΡΡ Π·Π° ΠΏΡΠ΅Π΄Π΅Π»Ρ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ°. ΠΡΠ»ΠΈ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΈΠΉ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ ΡΡΠ°Π½Π΅Ρ ΠΌΠ΅Π½ΡΡΠ΅ ΡΠΈΡΠΈΠ½Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π±ΡΠ΄Π΅Ρ ΡΠΌΠ΅Π½ΡΡΠ°ΡΡΡΡ Π²ΠΌΠ΅ΡΡΠ΅ Ρ Π½ΠΈΠΌ. ΠΠ°ΡΡΡΠΎΠΉΠΊΠ° height: auto; ΠΏΡΠΈΡΡΡΡΡΠ²ΡΠ΅Ρ Π΄Π»Ρ ΡΠΎΠ³ΠΎ, ΡΡΠΎΠ±Ρ ΠΏΡΠΈ ΡΠΌΠ΅Π½ΡΡΠ΅Π½ΠΈΠΈ ΡΠΎΡ ΡΠ°Π½ΡΠ»ΠΈΡΡ ΠΏΡΠΎΠΏΠΎΡΡΠΈΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ.
ΠΠ΄Π½ΠΎ Β«ΡΠ΅Π·ΠΈΠ½ΠΎΠ²ΠΎΠ΅Β» ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π΄Π»Ρ Π²ΡΠ΅Ρ ΡΡΡΡΠΎΠΉΡΡΠ²
ΠΡΠΎ ΡΠ΅ΡΠ°Π΅Ρ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ Π² ΠΎΠ΄Π½ΠΎΠΌ ΠΊΠ»ΡΡΠ΅, ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡ Π½Π°ΠΌ ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°ΡΡ ΠΎΠ΄Π½ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΏΡΠΈ ΡΠ°Π·Π½ΡΡ ΠΎΠ±ΡΡΠΎΡΡΠ΅Π»ΡΡΡΠ²Π°Ρ . ΠΠΎ, ΠΎΠ½ΠΎ Π½Π΅ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π½Π°ΠΌ ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°ΡΡ ΡΠ°Π·Π½ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π΄Π»Ρ ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ ΠΎΠ±ΡΡΠΎΡΡΠ΅Π»ΡΡΡΠ².
ΠΠΎΠ²ΠΎΠ΅ ΡΠ΅ΡΠ΅Π½ΠΈΠ΅: ΡΡΠ³ picture
picture β ΡΡΠΎ Π½ΠΎΠ²ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ, ΠΊΠΎΡΠΎΡΡΠΉ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΡΡΠ°ΡΡ ΡΠ°ΡΡΡΡ HTML5. ΠΠ½ Π·Π½Π°ΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΡΠΊΠΎΡΠΈΡ ΠΏΡΠΎΡΠ΅ΡΡ ΡΠ°Π·ΠΌΠ΅ΡΠ΅Π½ΠΈΡ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ Π°Π½Π°Π»ΠΎΠ³ΠΈΡΠ½ΠΎ ΠΏΡΠΈΠ½ΡΠΈΠΏΠ°ΠΌ ΡΠ°Π±ΠΎΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² audio ΠΈ video. ΠΠ½ ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΡ Π·Π°Π΄Π°Π²Π°ΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² source, ΠΊΠ°ΠΆΠ΄ΡΠΉ ΠΈΠ· ΠΊΠΎΡΠΎΡΡΡ Π±ΡΠ΄Π΅Ρ ΡΠΊΠ°Π·ΡΠ²Π°ΡΡ Π½Π° ΡΠ°Π·Π»ΠΈΡΠ½ΡΠ΅ ΡΠ°ΠΉΠ»Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ Π²ΠΌΠ΅ΡΡΠ΅ Ρ ΡΡΠ»ΠΎΠ²ΠΈΡΠΌΠΈ, ΠΏΡΠΈ ΠΊΠΎΡΠΎΡΡΡ ΠΎΠ½ΠΈ Π΄ΠΎΠ»ΠΆΠ½Ρ Π·Π°Π³ΡΡΠΆΠ°ΡΡΡΡ.
ΠΠ½ ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΡ Π²Π°ΠΌ Π·Π°Π³ΡΡΠΆΠ°ΡΡ ΡΠ°Π·Π»ΠΈΡΠ½ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π² Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ:
Π Π΅Π·ΡΠ»ΡΡΠ°ΡΠΎΠ² ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΠ°, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, Π²ΡΡΠΎΡΠ° ΠΎΠΊΠ½Π° ΠΏΡΠΎΡΠΌΠΎΡΡΠ°, ΡΠΈΡΠΈΠ½Π°, ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΡ
ΠΠ»ΠΎΡΠ½ΠΎΡΡΡ ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ
Π§ΡΠΎ ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ, ΡΡΠΎ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅:
ΠΠ°Π³ΡΡΠΆΠ°ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠΈΡ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ², Ρ ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½ΠΎΠΉ ΠΎΡΠ΄Π°ΡΠ΅ΠΉ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ ΠΈΠΌΠ΅ΡΡΡΡΡΡ ΡΠΈΡΠΈΠ½Ρ ΠΊΠ°Π½Π°Π»Π°.
ΠΠ°Π³ΡΡΠΆΠ°ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Ρ ΡΠ°Π·Π»ΠΈΡΠ½ΠΎΠΉ ΠΎΠ±ΡΠ΅Π·ΠΊΠΎΠΉ ΠΈ ΠΏΡΠΎΠΏΠΎΡΡΠΈΡΠΌΠΈ Π² ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΠΈ Ρ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ΠΌ ΡΠ°Π·ΠΌΠ΅ΡΠΊΠΈ Π΄Π»Ρ ΡΠΊΡΠ°Π½ΠΎΠ² ΡΠ°Π·Π½ΠΎΠΉ ΡΠΈΡΠΈΠ½Ρ.
ΠΠ°Π³ΡΡΠΆΠ°ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Ρ Π²ΡΡΠΎΠΊΠΈΠΌ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ΠΌ Π΄Π»Ρ ΡΠΊΡΠ°Π½ΠΎΠ² Ρ Π²ΡΡΠΎΠΊΠΎΠΉ ΠΏΠ»ΠΎΡΠ½ΠΎΡΡΡΡ ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ.
Π Π°Π·Π½ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π·Π°Π³ΡΡΠΆΠ°ΡΡΡΡ Π² Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ ΠΎΠ±ΡΡΠΎΡΡΠ΅Π»ΡΡΡΠ²
ΠΠ°ΠΊ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ ΡΠ»Π΅ΠΌΠ΅Π½Ρ picture?
ΠΡΠ½ΠΎΠ²Π½ΡΠ΅ ΡΠ°Π³ΠΈ Π΄Π»Ρ ΡΠ°Π±ΠΎΡΡ Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌ picture ΡΡΠΎ:
Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΠΎΡΠΊΡΡΠ²Π°ΡΡΠΈΡ ΠΈ Π·Π°ΠΊΡΡΠ²Π°ΡΡΠΈΡ ΡΡΠ³ΠΎΠ² picture.
ΠΠ½ΡΡΡΠΈ ΡΡΠΈΡ ΡΡΠ³ΠΎΠ² ΡΠΎΠ·Π΄Π°ΠΉΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½Ρ source Π΄Π»Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ Π·Π°ΠΏΡΠΎΡΠ°, ΠΊΠΎΡΠΎΡΡΠΉ Π²Ρ Ρ ΠΎΡΠΈΡΠ΅ ΠΏΡΠΎΠΈΠ·Π²Π΅ΡΡΠΈ.
ΠΠΎΠ±Π°Π²ΡΡΠ΅ Π°ΡΡΠΈΠ±ΡΡ media Π²Π°ΡΠ΅ΠΌΡ Π·Π°ΠΏΡΠΎΡΡ Π΄Π»Ρ ΡΠ°ΠΊΠΈΡ Π²Π΅ΡΠ΅ΠΉ ΠΊΠ°ΠΊ Π²ΡΡΠΎΡΠ° ΠΎΠΊΠ½Π° ΠΏΡΠΎΡΠΌΠΎΡΡΠ°, ΡΠΈΡΠΈΠ½Π°, ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΡ, ΠΈ Ρ.Π΄.
ΠΠΎΠ±Π°Π²ΡΡΠ΅ Π°ΡΡΠΈΠ±ΡΡ srcset Ρ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠΈΠΌ ΠΈΠΌΠ΅Π½Π΅ΠΌ ΡΠ°ΠΉΠ»Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π΄Π»Ρ Π·Π°Π³ΡΡΠ·ΠΊΠΈ.
ΠΠΎΠ±Π°Π²ΡΡΠ΅ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ ΠΈΠΌΠ΅Π½Π° ΡΠ°ΠΉΠ»ΠΎΠ² Π²Π°ΡΠ΅ΠΌΡ srcset Π°ΡΡΠΈΠ±ΡΡΡ, Π΅ΡΠ»ΠΈ Π²Ρ Ρ ΠΎΡΠΈΡΠ΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡ ΡΠΊΡΠ°Π½Ρ Ρ Π²ΡΡΠΎΠΊΠΎΠΉ ΠΏΠ»ΠΎΡΠ½ΠΎΡΡΡΡ ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ Π Π΅ΡΠΈΠ½Π°.
ΠΠΎΠ±Π°Π²ΡΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½Ρ img Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ Π·Π°ΠΏΠ°ΡΠ½ΠΎΠ³ΠΎ Π²Π°ΡΠΈΠ°Π½ΡΠ°.
ΠΠΎΡ Π½Π΅ΡΠ»ΠΎΠΆΠ½ΡΠΉ ΠΏΡΠΈΠΌΠ΅Ρ, ΠΊΠΎΡΠΎΡΡΠΉ ΠΏΡΠΎΠ²Π΅ΡΡΠ΅Ρ, Π΅ΡΠ»ΠΈ ΠΎΠΊΠ½ΠΎ ΠΏΡΠΎΡΠΌΠΎΡΡΠ° ΠΌΠ΅Π½ΡΡΠ΅ 768 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ, ΠΈ Π² ΡΠ»ΡΡΠ°Π΅ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΡ Π·Π°Π³ΡΡΠΆΠ°Π΅Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΌΠ΅Π½ΡΡΠ΅Π³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ°:
ΠΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈΠΉ ΠΊΡΡΡ ΠΏΠΎ Π²Π΅ΡΡΡΠΊΠ΅ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠ³ΠΎ ΡΠ°ΠΉΡΠ° Ρ Π½ΡΠ»Ρ!
ΠΠ·ΡΡΠΈΡΠ΅ ΠΊΡΡΡ ΠΈ ΡΠ·Π½Π°ΠΉΡΠ΅, ΠΊΠ°ΠΊ Π²Π΅ΡΡΡΠ°ΡΡ ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΡΠ΅ ΡΠ°ΠΉΡΡ Π½Π° HTML5 ΠΈ CSS3
Π£Π·Π½Π°ΡΡ ΠΏΠΎΠ΄ΡΠΎΠ±Π½Π΅Π΅<picture> <source srcset=»smaller.jpg» media=»(max-width: 768px)»> <source srcset=»default.jpg»> <img srcset=»default.jpg» alt=»My default image»></picture>
<picture>Β Β Β Β <source srcset=»smaller.jpg» media=»(max-width: 768px)»>Β Β Β Β <source srcset=»default.jpg»>Β Β Β Β <img srcset=»default.jpg» alt=»My default image»></picture> |
ΠΡ Π·Π°ΠΌΠ΅ΡΠΈΡΠ΅, ΡΡΠΎ ΡΠΈΠ½ΡΠ°ΠΊΡΠΈΡ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½Π½ΡΠΉ Π² Π°ΡΡΠΈΠ±ΡΡΠ΅ media ΡΠΎΡΠ½ΠΎ ΡΠ°ΠΊΠΎΠΉ ΠΆΠ΅, ΠΊΠ°ΠΊ ΠΈ ΡΠΎΡ, ΠΊ ΠΊΠΎΡΠΎΡΠΎΠΌΡ Π²Ρ ΠΏΡΠΈΠ²ΡΠΊΠ»ΠΈ, ΡΠΎΡΡΠ°Π²Π»ΡΡ ΠΌΠ΅Π΄ΠΈΠ° Π·Π°ΠΏΡΠΎΡΡ Π½Π° CSS. ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠ°ΠΊΠΈΠ΅ ΠΆΠ΅ ΠΏΡΠΎΠ²Π΅ΡΠΊΠΈ, Π·Π½Π°ΡΠΈΡ, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠΎΠ·Π΄Π°ΡΡ Π·Π°ΠΏΡΠΎΡΡ Π΄Π»Ρ max-width, min-width, max-height, min-height, orientationΠΈ ΡΠ°ΠΊ Π΄Π°Π»Π΅Π΅.
ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΡΠΈ ΠΏΡΠΎΠ²Π΅ΡΠΊΠΈ Π΄Π»Ρ ΡΠΎΠ³ΠΎ, ΡΡΠΎΠ±Ρ Π·Π°Π³ΡΡΠΆΠ°ΡΡ Π°Π»ΡΠ±ΠΎΠΌΠ½ΡΡ ΠΈΠ»ΠΈ ΠΏΠΎΡΡΡΠ΅ΡΠ½ΡΡ Π²Π΅ΡΡΠΈΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π² Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΠΈ ΡΡΡΡΠΎΠΉΡΡΠ²Π°, ΠΈ Π²Ρ ΡΠ°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ Π·Π°ΠΏΡΠΎΡΡ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ². ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ:
<picture> <source srcset=»smaller_landscape.jpg» media=»(max-width: 40em) and (orientation: landscape)»> <source srcset=»smaller_portrait.jpg» media=»(max-width: 40em) and (orientation: portrait)»> <source srcset=»default_landscape.jpg» media=»(min-width: 40em) and (orientation: landscape)»> <source srcset=»default_portrait.jpg» media=»(min-width: 40em) and (orientation: portrait)»> <img srcset=»default_landscape.jpg» alt=»My default image»></picture>
<picture>Β Β Β Β <source srcset=»smaller_landscape.jpg» media=»(max-width: 40em) and (orientation: landscape)»>Β Β Β Β <source srcset=»smaller_portrait.jpg» media=»(max-width: 40em) and (orientation: portrait)»>Β Β Β Β <source srcset=»default_landscape.jpg» media=»(min-width: 40em) and (orientation: landscape)»>Β Β Β Β <source srcset=»default_portrait.jpg» media=»(min-width: 40em) and (orientation: portrait)»>Β Β Β Β <img srcset=»default_landscape.jpg» alt=»My default image»></picture> |
ΠΠΎΠ΄ Π²ΡΡΠ΅ Π·Π°Π³ΡΡΠΆΠ°Π΅Ρ ΡΠΌΠ΅Π½ΡΡΠ΅Π½Π½ΡΡ, ΠΎΠ±ΡΠ΅Π·Π°Π½Π½ΡΡ Π΄Π»Ρ Π°Π»ΡΠ±ΠΎΠΌΠ½ΠΎΠΉ ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΠΈ Π²Π΅ΡΡΠΈΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π΄Π»Ρ ΡΡΡΡΠΎΠΉΡΡΠ²Π° Ρ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠ΅ΠΉ ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΠ΅ΠΉ. ΠΠ½ Π·Π°Π³ΡΡΠΆΠ°Π΅Ρ ΡΠ²Π΅Π»ΠΈΡΠ΅Π½Π½ΡΡ Π²Π΅ΡΡΠΈΡ ΡΠΎΠ³ΠΎ ΠΆΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π΄Π»Ρ ΡΡΡΡΠΎΠΉΡΡΠ² Ρ Π±ΠΎΠ»ΡΡΠΈΠΌ ΡΠΊΡΠ°Π½ΠΎΠΌ.
ΠΡΠ»ΠΈ ΡΡΡΡΠΎΠΉΡΡΠ²ΠΎ ΠΈΠΌΠ΅Π΅Ρ ΠΏΠΎΡΡΡΠ΅ΡΠ½ΡΡ ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΡ, ΠΎΠ½ Π·Π°Π³ΡΡΠΆΠ°Π΅Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅, ΠΎΠ±ΡΠ΅Π·Π°Π½Π½ΠΎΠ΅ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ: Π² ΠΌΠ΅Π½ΡΡΠ΅ΠΌ ΡΠ°Π·ΠΌΠ΅ΡΠ΅ β Π΄Π»Ρ Π½Π΅Π±ΠΎΠ»ΡΡΠΈΡ ΡΡΡΡΠΎΠΉΡΡΠ² ΠΈ ΡΠ²Π΅Π»ΠΈΡΠ΅Π½Π½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π΄Π»Ρ ΡΡΡΡΠΎΠΉΡΡΠ² Ρ Π±ΠΎΠ»Π΅Π΅ Π²ΡΡΠΎΠΊΠΈΠΌ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ΠΌ.
ΠΡΠ»ΠΈ Π²Ρ Ρ ΠΎΡΠΈΡΠ΅ ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»ΡΡΡ Π²Π΅ΡΡΠΈΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ Ρ ΡΠ°Π·Π»ΠΈΡΠ½ΡΠΌ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ΠΌ Π΄Π»Ρ ΡΠΊΡΠ°Π½ΠΎΠ² Ρ Π±ΠΎΠ»Π΅Π΅ Π²ΡΡΠΎΠΊΠΎΠΉ ΠΏΠ»ΠΎΡΠ½ΠΎΡΡΡ, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΡΠΎ ΡΠ΄Π΅Π»Π°ΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΡ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΡ ΠΈΠΌΠ΅Π½ ΡΠ°ΠΉΠ»ΠΎΠ² Π°ΡΡΠΈΠ±ΡΡΡ srcset. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, Π΄Π°Π²Π°ΠΉΡΠ΅ ΠΏΠΎΡΠΌΠΎΡΡΠΈΠΌ Π½Π° ΠΏΠ΅ΡΠ²ΡΠΉ ΠΏΡΠΈΠΌΠ΅Ρ ΠΊΠΎΠ΄Π° Π²ΡΡΠ΅ Ρ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ΠΌ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠΈ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΡ ΡΠΊΡΠ°Π½Π° Β«Π Π΅ΡΠΈΠ½Π° 2Ρ Β»:
<picture> <source srcset=»smaller.jpg, smaller_retina.jpg 2x» media=»(max-width: 768px)»> <source srcset=»default.jpg, default_retina.jpg 2x»> <img srcset=»default.jpg, default_retina.jpg 2x» alt=»My default image»></picture>
<picture>Β Β Β Β <source srcset=»smaller.jpg, smaller_retina.jpg 2x» media=»(max-width: 768px)»>Β Β Β Β <source srcset=»default.jpg, default_retina.jpg 2x»>Β Β Β Β <img srcset=»default.jpg, default_retina.jpg 2x» alt=»My default image»></picture> |
ΠΠ΅Π΄ΠΈΠ° Π·Π°ΠΏΡΠΎΡ ΠΎΠ±ΡΠ°Π±Π°ΡΡΠ²Π°Π΅ΡΡΡ Π² ΠΏΠ΅ΡΠ²ΡΡ ΠΎΡΠ΅ΡΠ΅Π΄Ρ, ΡΠ°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΊΠΎΠ½ΡΡΠΎΠ»ΠΈΡΠΎΠ²Π°ΡΡ ΡΠ°Π·ΠΌΠ΅ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π½Π° ΡΠΊΡΠ°Π½Π΅. ΠΠ°ΡΠ΅ΠΌ, ΠΏΡΠΎΠ²Π΅ΡΡΠ΅ΡΡΡ ΠΏΠ»ΠΎΡΠ½ΠΎΡΡΡ ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ ΡΠΊΡΠ°Π½Π° ΠΈ Π΅ΡΠ»ΠΈ Π²ΡΡΠΎΠΊΠ°Ρ ΠΏΠ»ΠΎΡΠ½ΠΎΡΡΡ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅ΡΡΡ ΠΈ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½Π° Π½Π°ΡΡΡΠΎΠΉΠΊΠ°ΠΌΠΈ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ, Π±ΡΠ΄Π΅Ρ Π·Π°Π³ΡΡΠΆΠ΅Π½Π° Π²Π΅ΡΡΠΈΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Ρ Π±ΠΎΠ»Π΅Π΅ Π²ΡΡΠΎΠΊΠΈΠΌ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ΠΌ.
ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ picture ΡΠ΅Π³ΠΎΠ΄Π½ΡΡΠ½ΠΈΠΉ Π΄Π΅Π½Ρ
Π‘Π΅ΠΉΡΠ°Ρ ΡΠΎΠ΄Π½Π°Ρ ΠΈΠΌΠΏΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΡΠΈΡ picture Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡ Π² ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠ΅ Π΄Π»Ρ Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠ² Chrome, Firefox ΠΈ Opera.Π Π±ΡΠ΄ΡΡΠ΅ΠΌ, ΠΌΡ ΡΠΊΠΎΡΠ΅Π΅ Π²ΡΠ΅Π³ΠΎ, ΡΠ²ΠΈΠ΄ΠΈΠΌ Π±ΠΎΠ»Π΅Π΅ ΡΠΈΡΠΎΠΊΡΡ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΡ ΠΈ Π² ΠΎΡΡΠ°Π»ΡΠ½ΡΡ Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ . ΠΠΎ, Π½Π° ΡΠ΅Π³ΠΎΠ΄Π½ΡΡΠ½ΠΈΠΉ Π΄Π΅Π½Ρ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠ° ΡΠΎΠ»ΡΠΊΠΎ ΠΎΠΆΠΈΠ΄Π°Π΅ΡΡΡ.
ΠΠΎΠΊΠ° ΡΡΠΎ, Π²Π°ΠΌ Π½Π΅ Π½ΡΠΆΠ½ΠΎ ΠΆΠ΄Π°ΡΡ, Π΅ΡΠ»ΠΈ Π²Ρ Ρ ΠΎΡΠΈΡΠ΅ Π½Π°ΡΠ°ΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ picture ΠΏΡΡΠΌΠΎ ΡΠ΅ΠΉΡΠ°Ρ. ΠΠ°ΠΌ Π²ΡΠ΅Π³ΠΎ Π»ΠΈΡΡ Π½ΡΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Picturefill 2.0 β ΠΏΠΎΠ»ΠΈΠ·Π°ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»ΡΠ΅ΠΌΠΎΠ΅ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠ°ΠΌΠΈ ΠΈΠ· Filament Group.
ΠΠΎΡΠ»Π΅ ΡΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ Π²Ρ ΡΠΊΠ°ΡΠ°Π΅ΡΠ΅ ΡΠ°ΠΉΠ» picturefill.js Π² ΡΠ²ΠΎΠΉ ΠΏΡΠΎΠ΅ΠΊΡ, ΠΎΠ½ ΠΌΠΎΠΆΠ΅Ρ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡΡΡ Π²ΡΠ΅Π³ΠΎ Π»ΠΈΡΡ Π·Π°Π³ΡΡΠ·ΠΊΠΎΠΉ Π΅Π³ΠΎ Π² ΡΠ΅ΠΊΡΠΈΡ head Π²Π°ΡΠ΅Π³ΠΎ ΡΠ°ΠΉΡΠ°:
<script src=»picturefill.js»></script>
<script src=»picturefill.js»></script> |
Π’Π°ΠΊΠΆΠ΅ Π΅ΡΡΡ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ Π·Π°Π³ΡΡΠΆΠ°ΡΡ ΡΠΊΡΠΈΠΏΡ Π°ΡΠΈΠ½Ρ ΡΠΎΠ½Π½ΠΎ Π΄Π»Ρ Π±ΠΎΠ»ΡΡΠ΅ΠΉ ΡΡΡΠ΅ΠΊΡΠΈΠ²Π½ΠΎΡΡΠΈ, ΠΎ ΡΠ΅ΠΌ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΡΠΎΡΠΈΡΠ°ΡΡ Π² Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°ΡΠΈΠΈ Picturefill. ΠΠΌΠ΅ΡΡΠ΅ Ρ Π·Π°Π³ΡΡΠ·ΠΊΠΎΠΉ ΡΡΠΎΠ³ΠΎ ΡΠΊΡΠΈΠΏΡΠ°, ΡΠ»Π΅ΠΌΠ΅Π½Ρ picture Π±ΡΠ΄Π΅Ρ ΡΠ°Π±ΠΎΡΠ°ΡΡ ΡΠ°ΠΊ, ΠΊΠ°ΠΊ Ρ ΠΎΠΏΠΈΡΠ°Π», Ρ Π½Π΅Π±ΠΎΠ»ΡΡΠΈΠΌΠΈ ΠΎΠ³ΡΠ°Π½ΠΈΡΠ΅Π½ΠΈΡΠΌΠΈ.
ΠΠ³ΡΠ°Π½ΠΈΡΠ΅Π½ΠΈΡ Picturefill
IE9
Picturefill ΠΎΡΠ»ΠΈΡΠ½ΠΎ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ Π² Π΄ΡΡΠ³ΠΈΡ Π²Π΅ΡΡΠΈΡΡ IE, ΠΎΠ΄Π½Π°ΠΊΠΎ IE9 Π½Π΅ ΡΠ°ΡΠΏΠΎΠ·Π½Π°Π΅Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ source, ΠΊΠΎΡΠΎΡΡΠ΅ Π·Π°Π²Π΅ΡΠ½ΡΡΡ Π² ΡΡΠ³ΠΈ picture. Π§ΡΠΎΠ±Ρ ΠΎΠ±ΠΎΠΉΡΠΈ ΡΡΠΎ, ΡΡΠ»ΠΎΠ²Π½ΠΎ ΠΎΠ±Π΅ΡΠ½ΠΈΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ source Π² ΡΡΠ³ΠΈ video, ΡΡΠΎ ΡΠ΄Π΅Π»Π°Π΅Ρ ΠΈΡ Π²ΠΈΠ΄ΠΈΠΌΡΠΌΠΈ Π΄Π»Ρ IE9, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ:
<picture> <!—[if IE 9]><video><![endif]—> <source srcset=»smaller.jpg» media=»(max-width: 768px)»> <source srcset=»default.jpg»> <!—[if IE 9]></video><![endif]—> <img srcset=»default.jpg» alt=»My default image»></picture>
<picture>Β Β Β Β <!—[if IE 9]><video><![endif]—>Β Β Β Β <source srcset=»smaller.jpg» media=»(max-width: 768px)»>Β Β Β Β <source srcset=»default.jpg»>Β Β Β Β <!—[if IE 9]></video><![endif]—>Β Β Β Β <img srcset=»default.jpg» alt=»My default image»></picture> |
Android 2.3
Π’Π°ΠΊΠΆΠ΅ ΠΊΠ°ΠΊ IE9, Android 2.3 Π½Π΅ Π²ΠΈΠ΄ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ source Π²Π½ΡΡΡΠΈ ΡΡΠ³ΠΎΠ² picture. ΠΠ΄Π½Π°ΠΊΠΎ, ΠΎΠ½ ΡΠ°ΡΠΏΠΎΠ·Π½Π°Π΅Ρ Π°ΡΡΠΈΠ±ΡΡ srcset, ΠΊΠΎΠ³Π΄Π° ΡΠΎΡ ΠΏΡΠΈΡΠ²Π°ΠΈΠ²Π°Π΅ΡΡΡ ΠΎΠ±ΡΡΠ½ΠΎΠΌΡ ΡΡΠ³Ρ img. Π£Π±Π΅Π΄ΠΈΡΠ΅ΡΡ Π² ΡΠΎΠΌ, ΡΡΠΎ Π²Ρ Π²ΠΊΠ»ΡΡΠ°Π΅ΡΠ΅ Π·Π°ΠΏΠ°ΡΠ½ΠΎΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ img Ρ Π΄Π΅ΡΠΎΠ»ΡΠ½ΡΠΌ ΠΈΠΌΠ΅Π½Π΅ΠΌ ΡΠ°ΠΉΠ»Π° Π² Π°ΡΡΠΈΠ±ΡΡΠ΅ srcset Π΄Π»Ρ Android 2.3 ΠΈΠ»ΠΈ Π»ΡΠ±ΠΎΠ³ΠΎ Π΄ΡΡΠ³ΠΎΠ³ΠΎ Π±ΡΠ°ΡΠ·Π΅ΡΠ° ΡΠΎ ΡΡ ΠΎΠΆΠ΅ΠΉ ΠΏΡΠΎΠ±Π»Π΅ΠΌΠΎΠΉ.
Π’ΡΠ΅Π±ΡΠ΅ΡΡΡ JavaScript ΠΈ ΡΠΎΠ΄Π½Π°Ρ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠ° ΠΌΠ΅Π΄ΠΈΠ° Π·Π°ΠΏΡΠΎΡΠΎΠ²
Π’Π°ΠΊ ΠΊΠ°ΠΊ ΡΡΠΎ ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ ΡΠ΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Π½ΠΎ Π½Π° JavaScript, ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²Π΅Π½Π½ΠΎ, ΠΎΠ½ΠΎ Π½ΡΠΆΠ΄Π°Π΅ΡΡΡ Π² JavaScript Π΄Π»Ρ ΠΊΠΎΡΡΠ΅ΠΊΡΠ½ΠΎΠΉ ΡΠ°Π±ΠΎΡΡ Π² Π±ΡΠ°ΡΠ·Π΅ΡΠ΅. Picturefill 2.0 Π½Π΅ ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»ΡΠ΅Ρ ΡΠ΅ΡΠ΅Π½ΠΈΠΉ Π΄Π»Ρ βno-jsβ, ΠΏΠΎΡΠΎΠΌΡ ΡΡΠΎ Π² ΠΏΡΠΎΡΠΈΠ²Π½ΠΎΠΌ ΡΠ»ΡΡΠ°Π΅, ΠΌΠ½ΠΎΠΆΠ΅ΡΡΠ²ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ ΡΡΠ°Π»ΠΎ Π±Ρ ΠΏΠΎΡΠ²Π»ΡΡΡΡΡ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ°Ρ , ΠΊΠΎΠ³Π΄Π° ΡΠΎΠ΄Π½Π°Ρ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠ° Π±ΡΠ΄Π΅Ρ ΡΠ΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Π½Π°. ΠΠ΄Π½Π°ΠΊΠΎ, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Picturefill 1.2 Π΅ΡΠ»ΠΈ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ βno-jsβ Π²Π°ΠΆΠ½Π° Π΄Π»Ρ Π²Π°Ρ.
Π‘Π»Π΅Π΄ΡΡΡΠΈΠΌ ΡΡΠ΅Π±ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ Picturefill ΡΠ²Π»ΡΠ΅ΡΡΡ ΡΠΎΠ΄Π½Π°Ρ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠ° ΠΌΠ΅Π΄ΠΈΠ° Π·Π°ΠΏΡΠΎΡΠΎΠ², Π΄Π»Ρ ΡΠΎΠ³ΠΎ ΡΡΠΎΠ±Ρ Π·Π°ΠΏΡΠΎΡΡ Π² Π°ΡΡΠΈΠ±ΡΡΠ΅ media ΡΠ°Π±ΠΎΡΠ°Π»ΠΈ. ΠΡΠ΅ ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡ ΠΌΠ΅Π΄ΠΈΠ° Π·Π°ΠΏΡΠΎΡΡ, Π² ΡΠΎ Π²ΡΠ΅ΠΌΡ ΠΊΠ°ΠΊ IE8 ΠΈ Π½ΠΈΠΆΠ΅ ΡΠ²Π»ΡΠ΅ΡΡΡ Π΅Π΄ΠΈΠ½ΡΡΠ²Π΅Π½Π½ΡΠΌ Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡΠΈΠΌ Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠΌ Ρ Π½Π΅Π±ΠΎΠ»ΡΡΠΎΠΉ ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎΠΉ Π±Π°Π·ΠΎΠΉ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΉ.
ΠΠΎΠ·ΠΌΠΎΠΆΠ½Ρ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ HTTP Π·Π°ΠΏΡΠΎΡΡ
ΠΠ»Ρ Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠ², ΠΈΠΌΠ΅ΡΡΠΈΡ ΡΠΎΠ΄Π½ΡΡ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΡ srcset, Π½ΠΎ Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡΠΈΡ picture, Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ Π·Π°Π΄Π°Π½Π½ΠΎΠ΅ ΠΈΠΌΡ ΡΠ°ΠΉΠ»Π° Π² Π·Π°ΠΏΠ°ΡΠ½ΠΎΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ΅ img ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ Π·Π°ΠΏΡΠΎΡΠ΅Π½ΠΎ Π΄ΠΎ ΡΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ Π±ΠΎΠ»Π΅Π΅ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ΡΡΠ΅Π΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π±ΡΠ΄Π΅Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΎ Π² ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ΅ img. ΠΡΠ° ΠΏΡΠΎΠ±Π»Π΅ΠΌΠ° Π²ΡΠ΅ΠΌΠ΅Π½Π½Π°Ρ ΠΈ ΠΎΠ½Π° ΡΠ΅ΡΠΈΡΡΡ ΡΠΎΠ³Π΄Π°, ΠΊΠΎΠ³Π΄Π° ΡΠΎΠ΄Π½Π°Ρ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠ° picture Π±ΡΠ΄Π΅Ρ ΡΠ΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Π½Π°.
ΠΠ²ΡΠΎΡ: Kezz Bracey
ΠΡΡΠΎΡΠ½ΠΈΠΊ: http://webdesign.tutsplus.com
Π Π΅Π΄Π°ΠΊΡΠΈΡ: ΠΠΎΠΌΠ°Π½Π΄Π° webformyself.
ΠΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈΠΉ ΠΊΡΡΡ ΠΏΠΎ Π²Π΅ΡΡΡΠΊΠ΅ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠ³ΠΎ ΡΠ°ΠΉΡΠ° Ρ Π½ΡΠ»Ρ!
ΠΠ·ΡΡΠΈΡΠ΅ ΠΊΡΡΡ ΠΈ ΡΠ·Π½Π°ΠΉΡΠ΅, ΠΊΠ°ΠΊ Π²Π΅ΡΡΡΠ°ΡΡ ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΡΠ΅ ΡΠ°ΠΉΡΡ Π½Π° HTML5 ΠΈ CSS3
Π£Π·Π½Π°ΡΡ ΠΏΠΎΠ΄ΡΠΎΠ±Π½Π΅Π΅PSD to HTML
ΠΡΠ°ΠΊΡΠΈΠΊΠ° Π²Π΅ΡΡΡΠΊΠΈ ΡΠ°ΠΉΡΠ° Π½Π° CSS Grid Ρ Π½ΡΠ»Ρ
Π‘ΠΌΠΎΡΡΠ΅ΡΡwebformyself.com
HTML5: picture
ΠΠ»Π΅ΠΌΠ΅Π½Ρ picture ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π±ΠΎΠ»Π΅Π΅ Π³ΠΈΠ±ΠΊΠΎ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ΠΈΡ ΠΊ ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΡ ΡΠ°ΠΉΡΠΎΠ² ΠΏΡΠΈ ΠΏΠΎΠΌΠΎΡΠΈ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ. Π Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ² ΡΠΊΡΠ°Π½Π° ΠΈ ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΠΈ ΠΌΠΎΠΆΠ½ΠΎ Π²ΡΠ²ΠΎΠ΄ΠΈΡΡ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ΡΡΠ΅Π΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅, Π° Π½Π΅ ΠΏΡΡΠ°ΡΡΡΡ ΡΠ°ΡΡΡΠ³ΠΈΠ²Π°ΡΡ ΠΈΠ»ΠΈ ΡΠΆΠΈΠΌΠ°ΡΡ ΠΎΠ΄Π½ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅. ΠΡΠΈ ΡΡΠΎΠΌ Π±ΡΠ°ΡΠ·Π΅Ρ Π·Π°Π³ΡΡΠΆΠ°Π΅Ρ ΡΠΎΠ»ΡΠΊΠΎ ΠΎΠ΄Π½ΠΎ Π½ΡΠΆΠ½ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅, Π° Π½Π΅ Π²ΡΠ΅.
ΠΠΎΡΡΠ΅Π½ΠΈΡΡΠ΅ΠΌΡ Π½Π° ΠΊΠΎΡΠΊΠ°Ρ .
<style>
img {display: block; margin: 0 auto;}
</style>
<picture>
<source
media="(min-width: 650px)"
srcset="images/kitten-stretching.png">
<source
media="(min-width: 465px)"
srcset="images/kitten-sitting.png">
<img
src="images/kitten-curled.png"
alt="a cute kitten">
</picture>
ΠΠΎΠΏΡΠΎΠ±ΡΠΉΡΠ΅ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΡΠ°Π·ΠΌΠ΅ΡΡ Π±ΡΠ°ΡΠ·Π΅ΡΠ°, ΡΡΠΎΠ±Ρ ΡΠ²ΠΈΠ΄Π΅ΡΡ ΡΡΠΈ ΡΠ°Π·Π½ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΊΠΎΡΠ°. ΠΠΎΡΠΌΠΎΡΡΠΈΠΌ, ΠΊΠ°ΠΊ ΡΡΠΎ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ.
Π‘Π°ΠΌ ΡΠ»Π΅ΠΌΠ΅Π½Ρ picture Π½Π΅ ΠΈΠΌΠ΅Π΅Ρ Π°ΡΡΠΈΠ±ΡΡΠΎΠ². ΠΡΡ ΡΠ°Π±ΠΎΡΠ° ΡΠΎΡΡΠ΅Π΄ΠΎΡΠΎΡΠ΅Π½Π° Π² source. Π ΠΎΠ±ΡΠ·Π°ΡΠ΅Π»ΡΠ½ΠΎΠΌ Π°ΡΡΠΈΠ±ΡΡΠ΅ srcset ΡΠΊΠ°Π·ΡΠ²Π°Π΅ΠΌ ΠΏΡΡΡ ΠΊ ΡΠ°ΠΉΠ»Ρ. Π’Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΡΠΊΠ°Π·Π°ΡΡ ΡΡΠ°Π·Ρ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠ°ΠΉΠ»ΠΎΠ² ΡΠ΅ΡΠ΅Π· Π·Π°ΠΏΡΡΡΡ Ρ ΡΠΊΠ°Π·Π°Π½ΠΈΠ΅ΠΌ ΠΊΠΎΡΡΡΠΈΡΠΈΠ΅Π½ΡΠ° ΡΠ°Π·ΡΠ΅ΡΠ½ΠΈΡ (srcset=»kitten.png, [email protected] 2x»). ΠΡΠ°ΡΠ·Π΅Ρ ΠΏΡΠΎΡΠΌΠ°ΡΡΠΈΠ²Π°Π΅Ρ source ΡΠ²Π΅ΡΡ Ρ Π²Π½ΠΈΠ·, ΡΡΠΈΡΡΠ²Π°Ρ ΠΏΠ΅ΡΠ²ΡΠΉ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ΡΡΠΈΠΉ ΠΈ ΠΈΠ³Π½ΠΎΡΠΈΡΡΡ ΠΎΡΡΠ°Π»ΡΠ½ΡΠ΅.
ΠΠ΅ΠΎΠ±ΡΠ·Π°ΡΠ΅Π»ΡΠ½ΡΠΉ Π°ΡΡΠΈΠ±ΡΡ media ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΡΠΊΠ°Π·Π°ΡΡ Π½ΡΠΆΠ½ΡΠΉ ΡΠ°Π·ΠΌΠ΅Ρ Π² ΡΠΎΡΠΌΠ°ΡΠ΅ ΡΠ΅Π»Π΅ΠΊΡΠΎΡΠ° CSS @media.
ΠΠ΅ΠΎΠ±ΡΠ·Π°ΡΠ΅Π»ΡΠ½ΡΠΉ Π°ΡΡΠΈΠ±ΡΡ sizes ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π·Π°Π΄Π°ΡΡ ΠΎΠΏΠΈΡΠ°ΡΠ΅Π»Ρ ΡΠΈΡΠΈΠ½Ρ (sizes=»100vw») ΠΈΠ»ΠΈ ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡ (sizes=»(max-width: 30em) 100vw»).
Π’Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΡΠΊΠ°Π·Π°ΡΡ ΡΠΏΠΈΡΠΎΠΊ Π·Π°ΠΏΡΠΎΡΠΎΠ² (sizes=»(max-width: 30em) 100vw, (max-width: 50em) 50vw, calc(33vw — 100px)»), Π² ΠΊΠΎΡΠΎΡΠΎΠΌ ΠΏΠΎΡΠ»Π΅Π΄Π½ΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ ΠΊΠ°ΠΊ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ.
ΠΠ΅ΠΎΠ±ΡΠ·Π°ΡΠ΅Π»ΡΠ½ΡΠΉ Π°ΡΡΠΈΠ±ΡΡ type ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΡΠΊΠ°Π·Π°ΡΡ MIME-ΡΠΈΠΏ (type=»image/webp» ΠΈΠ»ΠΈ type=»image/vnd.ms-photo»).
ΠΠ»Π΅ΠΌΠ΅Π½Ρ img Π²ΡΠ²ΠΎΠ΄ΠΈΡΡΡ Π² ΡΠΎΠΌ ΡΠ»ΡΡΠ°Π΅, Π΅ΡΠ»ΠΈ Π½Π΅ ΠΎΠΊΠ°Π·Π°Π»ΠΎΡΡ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ΡΡΠ΅Π³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π² source. Π€Π°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈ ΡΡΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ. Π Π°Π·ΠΌΠ΅ΡΠ°ΠΉΡΠ΅ Π΅Π³ΠΎ Π²ΡΠ΅Π³Π΄Π° ΠΏΠΎΡΠ»Π΅Π΄Π½ΠΈΠΌ.
ΠΡΡΠΎΡΠ½ΠΈΠΊ. Π’Π°ΠΌ ΠΆΠ΅ Π΅ΡΡΡ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ ΠΏΡΠΈΠΌΠ΅ΡΡ.
Π Π΅ΠΊΠ»Π°ΠΌΠ°
webmaster.alexanderklimov.ru