画像による Layout Shift が無くなる Web がやって来る - mizdra's blog

2020/05/31 306 users mizdra's blog web fetch 画像 img

はじめに Web では古来より <img> タグを用いて画像を読み込んでいました. しかし <img> タグにはアスペクト比に関する情報を埋め込むための属性が用意されていません. そのため, ブラウザが画像をネットワークから fetch して読み込みが完了するまで, レスポンシブな img 要素の寸法を決定できず, ページにガタツキ (La... 続きを読む

はてなフォトライフの画像を貼り付けるときに、フォトライフ記法でaltとtitleを指定できるようにしました（はてな記法モード、Markdownモード） - はてなブログ開発ブログ

2017/02/24 62 users Alt title Markdownモード NEWS 改善

2017 - 02 - 24 はてなフォトライフの画像を貼り付けるときに、フォトライフ記法でaltとtitleを指定できるようにしました（はてな記法モード、Markdownモード） 機能修正・改善 はてな記法 news はてなブログでは、はてなフォトライフに投稿した画像を表示するはてな記法 （fotolife記法） を拡張し、画像 （ img 要素） の title 属性と alt 属性を指定でき... 続きを読む

SVG のフォールバックは結局 Modernizr に落ち着いた件 | WWW WATCH

2015/02/26 51 users フォールバック Modernizr jQuery SVG 環境

タイトルでほぼ言い切ってる感じなんですが...... SVG に対応していない環境 （IE8 以前とか、旧 Android の標準ブラウザとか） に対するフォールバックの方法はいくつかありますが、色々試して、最終的に img 要素で SVG を配置した上で、Modernizr と簡単な JavaScript （とりあえず jQuery） 書いて SVG 未対応ブラウザに対しては代替画像に差し替える... 続きを読む

アイコンの実装方法 · terkel.jp

2014/06/24 76 users images terkel ウェブページ CSS アイコン

ウェブページにおけるアイコンの実装方法はさまざまです。マークアップに img 要素を配置する方法もあるし、CSS から背景画像やアイコン・フォントを使う方法もあります。そういった中からどの方法を採用すべきかを判断するには、HTML Standard の Requirements for providing text to act as an alternative for images にあるとお... 続きを読む

HTML5: img 要素の alt 属性 の仕様 | attosoft.info Blog

2011/11/14 182 users Alt XHTML 置換 省略 属性

概要 alt 属性に指定する代替テキスト 空文字列の代替テキスト alt 属性の省略 関連リンク 概要 HTML5 では img 要素の alt 属性の仕様が大幅に変更され、HTML4/XHTML と比較すると定義がかなり詳細化されている。 HTML5 における alt 属性 の仕様を概略すると次のようになる。 alt 属性には画像を置換可能な詳細な代替テキストを指定する HTML4/XHTML ... 続きを読む