タグ

関連タグで絞り込む (13)

タグの絞り込みを解除

imgに関するytkwsmのブックマーク (5)

  • decoding="async"とloading="lazy"の違い| PerfData

    画像の読込処理の違い ページ作成日 2019年12月19日 ページ更新日 2021年3月2日 著者: 竹洞 陽一郎 Webページにおいて、画像は重要な役割を果たしており、高解像度化と利用される枚数は増えていく傾向にあります。 その一方で、画像は、従来どおりの実装をしていると、HTMLのパース処理を遅延させる要因となります。 画像をいかに遅延要因としないようにするかの処理として、decoding="async"とloading="lazy"の違いを解説します。 decoding属性は、画像のデコード処理に関しての指示をユーザエージェントに明示する属性です。 decoding="async"と指定することで、画像のデコード処理を非同期にバッググラウンド処理し、他のコンテンツの表示処理が終わった時に更新処理で画像を一緒に出します。 記述の仕方としては、以下のようになります。 <img class

    decoding="async"とloading="lazy"の違い| PerfData

  • <img>: 画像埋め込み要素 - HTML | MDN

    HTMLガイドコンテンツカテゴリーコメント日付と時刻の形式制約検証ビューポートの meta 要素レスポンシブ画像マイクロデータマイクロフォーマット後方互換モードと標準モードHTML 早見表手引HTML で用語を定義するデータ属性の使用別オリジンの画像の利用画像の上にヒットマップを追加する読み込みが速い HTML ページを作成するJavaScript の追加リファレンス要素<a><abbr><acronym> 非推奨; <address><area><article><aside><audio><b><base><bdi><bdo><big> 非推奨; <blockquote><body><br><button><canvas><caption><center> 非推奨; <cite><code><col><colgroup><data><datalist><dd><del><details

    <img>: 画像埋め込み要素 - HTML | MDN
    ytkwsm
    ytkwsm 2019/03/04
    decodingが使えるかcaniuseでよくわからなかったけど、こちら見た感じiOS/macOS両safari以外はいけるのかな。。
    リンク

  • Webパフォーマンスの振り返り 2018 - Webパフォーマンスについて

    2018年も、残り一カ月となりました。 WebパフォーマンスのAdventカレンダーを今年も開催したので、その初日のエントリーとして（遅れているものの）、今年のWebパフォーマンスを振り返ります。 ベアメタル回帰 今年のWeb（に限らず）パフォーマンスで特徴的だったのは、ベアメタルへの回帰でしょう。 IT業界が長い方はご存じだとは思いますが、集中と分散、仮想と物理のサイクルは繰り返されて来ました。 今後も繰り返されるでしょう。 仮想化技術の宿命 クラウドコンピューティングの基礎となっているのは、仮想化技術です。 AWSをはじめとして、多くのクラウドコンピューティングのプラットフォームを提供している事業者は、コンピューティングリソース（計算能力）を塊として扱い、それを物理の枠を超えて、論理の単位で切り出す方法として、各種ハイパーバイザーをベースにした仮想化技術を用いています。 仮想化技術は、

    Webパフォーマンスの振り返り 2018 - Webパフォーマンスについて

  • [HTML5] img要素の正しいalt - Qiita

    alt属性の正しい書き方について書いてあるサイトを検索していたらSEOに関する記事ばっかりで萎えたので書いておく。 alt属性の意味 HTML5でのaltはスクリーンリーダーやロボット等、画像を見る事ができないユーザーに対しても適切な情報を伝えるためのフォールバック。 alt属性には「その画像が表している”文脈”」を書く 例としてたまたまTLに流れてきた画像を拝借します。 おいしそうですね。 via (8) Twitter 例文 ある晩、私はimg要素のalt要素について正しい説明をしているサイトを探していた。 ところがなかなか見つからないのに業を煮やし、仕方が無いので自らQiitaに記事を書くことにしたのだった。 記事を書くためには画像が必要である。私はおもむろにTwitterのURLを叩き、タイムラインを表示する。やあ、おあつらえ向きな画像があるじゃないか。 リボンの串が刺さっていると

    [HTML5] img要素の正しいalt - Qiita
    ytkwsm
    ytkwsm 2014/09/04
    alt属性の正しい使い方と、これはtitle属性じゃね？という話
    リンク

  • [HTML5]正しいfigure要素の使い方(文脈まで深く考えた)

    figure要素には何を入れられるのか figure要素には何を入れられるか、どう使うべきなのかが疑問になったので考えてみました。 発端：リストにタイトルをつけたい このfigure要素について考えるきっかけになったのは、ブログ内で「タイトルの付いたリスト」を作りたいと思った時です。 別に見出し要素の直後にリストを置けば読み手にはそれについてのリストだと認識されるんでしょうけど…場合によってはなんかしっくりきません。 だって画像はfigureで囲めばfigcaptionで、inputにはlabelで、tableにはcaptionでマークアップ的にしっかり関連づいたキャプションがつけられるのに、リストや定義リスト、あとコードにキャプションがつけられないのは変ですよ、変だよなー。と思ってたわけです。 figure要素の説明を読んだ HTML5.JPを読みに行きましょう。すると figure 要

    [HTML5]正しいfigure要素の使い方(文脈まで深く考えた)
    ytkwsm
    ytkwsm 2014/06/06
    コンテンツから参照される、キャプションつけたいコンテンツを囲む、という感じ？
    リンク
  • 1

お知らせ

もっと読む

公式Twitter

  • @HatenaBookmark

    リリース、障害情報などのサービスのお知らせ

  • @hatebu

    最新の人気エントリーの配信

はてなブックマーク

公式Twitter

はてなのサービス

  • App Storeからダウンロード
  • Google Playで手に入れよう
Copyright © 2005-2025 Hatena. All Rights Reserved.