HTML 5.1ã®srcset・sizes属性ã¨pictureè¦ç´ ã®ä½¿ã„æ–¹ – レスãƒãƒ³ã‚·ãƒ–イメージã§ç”»åƒè¡¨ç¤ºã‚’最é©åŒ– - ICS MEDIA日本ã®ã‚¦ã‚§ãƒ–サイトã«ãŠã‘るスマートフォン・タブレットユーザーã®ã‚·ã‚§ã‚¢ã¯ç´„40%ã§ã‚ã‚Šã€ã‚¦ã‚§ãƒ–デザインã¯ãƒ¬ã‚¹ãƒãƒ³ã‚·ãƒ–対応ã—モãƒã‚¤ãƒ«ã‚’æ„è˜ã—ãŸè¨è¨ˆãŒå¿…é ˆã§ã™ï¼ˆå‚照「StatCounterã€)。 HTMLã®ã€Œãƒ¬ã‚¹ãƒãƒ³ã‚·ãƒ–イメージã€ã‚’使ãˆã°ã€HTMLã®ã‚¿ã‚°ã ã‘ã§è¡¨ç¤ºç«¯æœ«ã«ã‚ã‚ã›ãŸç”»åƒã‚’é…ä¿¡ã§ãã¾ã™ã€‚ 本記事ã§ã¯ã€ã‚µãƒ³ãƒ—ルを通ã—ã¦ãƒ¬ã‚¹ãƒãƒ³ã‚·ãƒ–イメージã®ç‰¹å¾´ã¨ä½¿ã„æ–¹ã«ã¤ã„ã¦è§£èª¬ã—ã¾ã™ã€‚ ã“ã®è¨˜äº‹ã§å¦ã¹ã‚‹ã“㨠imgè¦ç´ ã®srcset属性ã¨sizes属性ã®ä½¿ã„æ–¹ pictureè¦ç´ ã®ä½¿ã„æ–¹ レスãƒãƒ³ã‚·ãƒ–イメージã¨ã¯ä¸€ä½“何ã‹ï¼Ÿ レスãƒãƒ³ã‚·ãƒ–イメージã¨ã¯ã€ãƒ¬ã‚¹ãƒãƒ³ã‚·ãƒ–ãªã‚¦ã‚§ãƒ–サイトã«ãŠã‘ã‚‹ç”»åƒã®å–り扱ã„方を定ã‚ãŸHTMLã®æŠ€è¡“。2016年勧告ã®HTML 5.1ã«è¿½åŠ ã•ã‚ŒãŸä»•æ§˜ã§ã™ï¼ˆç¾åœ¨ã®HTMLã®ä»•æ§˜æ›¸ï¼‰ã€‚主ãªç‰¹å¾´ã¯æ¬¡ã®é€šã‚Šã§ã™ã€‚ CSSã‚„JavaScriptを使ã‚ãšã€HTMLã®ã¿ã§ãƒ¬ã‚¹ãƒãƒ³ã‚·ãƒ–ãªç”»åƒã‚’å–ã‚Š
ç”»åƒæœ€é©åŒ–戦略 WebP ç·¨ | blog.jxck.io
ç”»åƒæœ€é©åŒ–戦略 Picture ç·¨ | blog.jxck.io
srcsetã¨sizes
Better SVG Fallback and Art Direction With The <picture> Element
{{#tags}}- {{label}}
{{/tags}}