[B! img] kazrooのブックマーク

kazroo id:kazroo

imgに関するkazrooのブックマーク (3)

【2020年夏】imgタグにはwidthとheight属性を書くのがいいらしい
そうなんです。 2020年夏、ページの読み込み中にレイアウトがシフトしないように、img要素にはwidthとheight属性を記述するのがいいらしいんです。 <img src="link/to/image.jpg" width="300" height="400" alt="画像の説明"> その昔、これが普通の時代もあったんですけどね。レスポンシブな時代にはwidthとheight属性を書かないのが一般的（？）になっていました。また、widthとheight属性が記述してあってもCSSでwidth: 100%; height: auto;が指定されているとレイアウトシフトが発生してしまっていました。参考： img要素のサイズ属性の記述の有無についてのTwitterのアンケートなんでいまさら？なぜなら、2019年の後半にブラウザにレイアウトシフトを回避するための新たな機能が実装されたか
kazroo 2020/07/02
タグ

CSS

img

レスポンシブ

ブラウザ

width

height
リンク
SVG画像を使う場合SEO検索で気を付ける事
それに対し今も一般的に使っているGIF・JPG・PNGはいずれもビットマップ形式の画像と呼ばれ、画像を点の集合で表現しています。ビットマップ形式とベクター形式ビットマップ形式はその性質上、画像を構成しているピクセル数が作成時点で決まっています。ですので想定サイズを超過（拡大）してしまうと画像が荒くなり、ぼやけた状態になってしまいます。それに対してベクター形式フォーマットのSVG画像は拡大縮小に柔軟に対応します。演算により効率良く形や色を表現するので、サイズ変更がされてもその都度鮮明な画像を維持できるのです。ここが通常のGIF・JPG・PNGを使うよりもSVG画像を使う方が利点となる部分ですね。 SVGの2種類の書き方 SVG画像の具体的な記述の仕方については割愛しますが、大きく分けて2種類の記述方法があります。インラインによるSVG画像の記述例 <svg role="img"
kazroo 2020/06/07
SVG

SEO

使い方

画像

テキスト

HTML

タイトル

title

img

object
リンク
[HTML] 今更だけど、ちゃんとレスポンシブな画像の設定方法を理解する。srcsetとsizesを使いこなそう。
[HTML] 今更だけど、ちゃんとレスポンシブな画像の設定方法を理解する。srcsetとsizesを使いこなそう。HTMLレスポンシブMediaQuery 世間のWebサイトをみてみると「横幅120pxのサムネイルに、1600pxの画像が使われている」ということがちょいちょいありまして、ソースコードを確認してみるとウインドウサイズが2000pxの場合の場合は800pxで表示して、スマホだと120pxで表示する。またRetina対応をしているから、解像度の2倍が必要で、800px@2xだから、大きい方にあわせてるというパターンを結構みかけるので、あらためてimgの属性であるsrcsetとsizesについてまとめておきます。大きい画像はファイルサイズが大きいおそらくこの記事をご覧いただく方には「何を当たり前な」と思われると思うのですが、もう少しお付き合いください。猫のオリジナル画像
kazroo 2018/10/05
webデザイン

レスポンシブ

画像

HTML

img

タグ
リンク
1