画像サイズを取得し width・height属性を自動で付ける

かつてはimgタグに幅や高さの属性を入れずとも、CSSで表示サイズをコントロールすればOKみたいな流れが主流でしたが、2021年6月中旬から導入された Googleのアルゴリズム「 Core Web Vitels 」の指標 CLS(Cumulative Layout Shift)に影響するという事も有って、記述する重要性(と必要性)が出て参りました。

CLS は「累積レイアウト変更」の意味で、視覚要素の安定性を示す指標です。

imgタグに width 及び height 属性が明示されていない事で起きる「レイアウトシフト」については、過去記事で扱っているので下記をお読み下さいませ。m(__)m

imgタグに width・height属性を自動で付けてくれる JavaScript

imgタグに width 及び height 属性を直接入れておく事で「レイアウトシフト」は防げます。

しかし、ワンポイント利用の比較的小さな画像にまで付けていないと Lighthouse や PageSpeed Insights 等で『画像要素でwidthとheightが明示的に指定されていない』とチェックされます。

小さい画像の場合は表示も瞬時なので視認に問題無いと思いますが、そこそこ容量が大きく表示が遅い画像が文中に有った場合のレイアウトシフトはとても読み難いものになります。

「私のブログ(サイト)はレイアウトシフト起きて無いから width や height 付けて無いけど大丈夫~」とか、思わないで下さいね。見ているのは自分だけでは有りません。なるかどうかは閲覧者の(デバイスや通信)環境次第なのですから。

そんな時「記事数がとんでもなくいっぱい有って画像修正に手が付けられない~」等、昔に遡って修正するのが大変な方・Lighthouse や PageSpeed Insights でチェックされるのが嫌な方、img要素のsrcから画像のサイズを取得してwidth・height属性を自動で付けてくれる JavaScript が助けてくれます。(^^) 作者様に感謝です。

私はJS書けないので ^^;、詳しくは下記の記事をお読み下さい。

【JavaScript】img要素の画像サイズを取得してwidth・heightを自動追加する

【JavaScript】img要素の画像サイズを取得してwidth・heightを自動追加する

本記事では、JavaScriptでimg要素の画像サイズを取得してwidth・height属性を自動で追加する方法をご紹介しています。 上記の疑問にお答えします。 では、解説していきます。 画像サイズ

圧縮したJSはこちら。↓ 全部繋がっているので、途中で切らないようにお願いします。(記述位置は </body> の直前)

<!--permanent_area-->
<script>
const myFunc=function(src){return new Promise(function(resolve,reject){const image=new Image();image.src=src;image.onload=function(){resolve(image)};image.onerror=function(error){reject(error)}})};const imgs=document.getElementsByTagName('img');for(const img of imgs){const src=img.getAttribute('src');myFunc(src).then(function(res){if(!img.hasAttribute('width')){img.setAttribute('width',res.width)}if(!img.hasAttribute('height')){img.setAttribute('height',res.height)}if(!img.hasAttribute('alt')){img.setAttribute('alt','')}}).catch(function(error){console.log(error)})}
</script>
<!--/permanent_area-->

JS作者 ryohei 様に、上記記事には無い「alt が無い場合は自動で空の alt を付加する」よう作って頂きました♪
また、'22/02/19 の記事更新で『width・height属性が設定されていないimg要素にのみ自動追加する』項を追加して頂きました。(上記は『設定無しのみ自動追加』のJSです。)有難うございます!

FC2ブログで利用する場合は、上記のように <!--permanent_area--> ~~ <!--/permanent_area--> でJSを括ると個別記事ページのみに適用されます。(全てのページに使いたい場合はオレンジ部分を外して下さい。)

ブラウザ右クリックの「ページのソースを表示」では分かりませんが、デベロッパーツール(開発者ツール)で見て頂くと width・height・alt が付加されているのが分かります。

記事を読み難くするレイアウトシフトを防ぐとっても有難いJSですが「全ての画像を読み込んでから画像サイズを取得し img要素に設定する」という流れなので、多少表示速度に影響が出る事をご理解頂いた上で使用して下さい。

一番良いのは「記事作成時、imgタグに width 及び height 属性を直接入れておく事(あと alt も)」です。←自分も然り。

自力で修正できる方は是非直しましょう。(^^ゞ

img要素のalt属性を自動で付けてくれる JavaScript

JS作者 ryohei 様は「img要素がalt属性を持っていない場合に自動追加する JavaScript」の記事も掲載されています。ワンポイント画像に alt 付けていなかった方、修正が大変な方は是非どうぞ。(^-^)

【JavaScript】img要素がalt属性を持っていない場合に自動追加する

【JavaScript】img要素がalt属性を持っていない場合に自動追加する

本記事では、JavaScriptでimg要素がalt属性を持っていない場合に自動追加する方法をご紹介しています。 上記の疑問にお答えします。 では、解説していきます。 img要素を取得する ドキュメン

テスト画像1
<img src="画像URL" alt="テスト-ガンダム">
width,height 無し alt 有り

テスト-ガンダム

テスト画像2
<img src="画像URL" width="500" height="375">
width,height 有り alt 無し

テスト結果
下画像の通り、テスト画像1には実寸 width="800" height="600" が追加され、テスト画像2はそのまま width="500" height="375" で altが無かったので追加されました。

テスト-ガンダム-Devツール

因みにこの↑画像は width="500" height="281" の表示です。(クリックで原寸表示)
今更ですが確認まで。width,height が書かれて無い場合は、画像の実寸値が追加されます。(表示はテンプレートの幅次第)

Comments

初めまして。

画像がいっぱい有り過ぎて、こういうのを探していました。
有難うございます。
2021-11-25-00:24 はぃはぃ
[ 返信 * 編集 ]
aki

Re: はぃはぃ 様へ

初めまして、こんにちは。コメント頂き有難うございます。

レイアウトシフトはとても困ります。読んでる所がガクンと動くと目線の移動が大変で…。
width・height 属性は大事ですが、画像データが重い物ほど通信速度で影響が出ますので、画像の容量圧縮にも気を付けたいものです。
私が作ったJSでは無いですけど(^^; 大変な場合に是非ご利用下さいませ。
2021-11-25-13:48 aki
[ 返信 * 編集 ]

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます
2021-11-27-03:03 -
[ 返信 ]
aki

Re: - 様へ

こんばんは。コメント頂き有難うございます。

後程お伺いさせて頂きますね。(^^)
2021-11-27-20:37 aki
[ 返信 * 編集 ]

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます
2022-02-15-17:24 -
[ 返信 ]

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます
2022-02-15-18:06 -
[ 返信 ]
aki

Re: - 様へ

返信が遅くなってゴメンナサイ。m(__)m
そちらでお返事致しますね。
2022-02-18-05:01 aki
[ 返信 * 編集 ]

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます
2022-02-20-10:21 -
[ 返信 ]
aki

Re: - 様へ

こんにちは。そちらでお返事しておりますのでお読み下さい。
2022-02-20-14:20 aki
[ 返信 * 編集 ]





非公開コメント