コラム・豆知識
画像に意味を持たせるalt属性の考え方
<img>タグにおけるalt属性は、単なる補足情報ではなく、画像の「意味」を伝える重要な要素です。
たとえば製品画像であれば「商品名＋用途」、インフォグラフィックであれば「図の要点」を簡潔に記述することで、画像が見えない環境でも内容が伝わる構造になります。
視覚的な装飾である場合は、alt=""と空にして、読み上げを回避するのが適切です。
loading="lazy"の活用で表示パフォーマンスを最適化
loading="lazy"属性を使うと、画面外の画像は必要になるまで読み込まれなくなります。
これにより初期描画が軽くなり、モバイル環境や低速通信時でもユーザーにストレスを与えにくいページになります。
ただし、ファーストビュー内に表示される画像には適用しない方が好ましい場合もあるため、実際の表示位置を確認して使い分けましょう。
WebPやAVIF形式の導入で軽量かつ高品質な画像配信
画像フォーマットとしてWebPやAVIFを導入すると、JPEGやPNGと比べてファイルサイズを大幅に削減できます。
これにより、読み込み速度が向上し、通信量の節約にもつながります。
<picture>要素とsourceタグを組み合わせれば、ブラウザに応じた最適なフォーマットを提供することも可能です。
画像サイズと表示サイズの整合性
表示サイズに対して画像ファイルが大きすぎると、無駄な通信が発生し、逆に小さすぎるとぼやけて表示されます。
適切なサイズで画像を出力し、widthやheight属性、CSSのobject-fitなどで表示を調整することで、意図した見た目を保ちながらパフォーマンスも最適化できます。
また、レスポンシブ対応にはsrcsetやsizesの併用が有効です。
画像の役割に応じた適切な扱い方
画像には「情報伝達」「雰囲気演出」「操作誘導」などさまざまな役割があります。
情報を補足する画像はalt属性を活用し、意味のある構造としてHTMLに組み込みます。
一方で、ビジュアル演出だけの背景画像や装飾画像はCSSで管理したり、aria-hidden="true"を使って支援技術の干渉を防ぐことで、全体のアクセシビリティや構造の明瞭さを保つことができます。
ツールの仕組み解説
DPIの変更を監視するために、各DPI選択ラジオボタンにイベントを設定しています。
dpiInputs.forEach(input => {
input.addEventListener('change', updateSizes);
});
ユーザーが画像をアップロードすると、外部スクリプトからfilesUploadedというカスタムイベントが発火します。これによりアップロードされた画像を処理します。
document.addEventListener('filesUploaded', (e) => {
const files = e.detail.files; handleFiles(files);
});
handleFiles関数では、画像ファイルを読み込んでimgオブジェクトを生成し、縦横サイズとともにimages配列に格納しています。
img.onload = () => {
images.push({
name: file.name, width: img.width, height: img.height, src: e.target.result
}); sortAndUpdateList();
};
アップロードされた画像はファイル名順に並び替えられ、画面上にリストとして表示されます。
images.sort((a, b) => a.name.localeCompare(b.name));
ここでポイントになるのがDPIによるサイズ調整です。Web上の表示DPIは72dpiが基本なので、指定されたDPIで画像サイズを相対的に変換します。
function getAdjustedSize(size) {
const dpi = getCurrentDpi();
return Math.round(size * (72 / dpi));
}
最終的に、画像ごとにサムネイルと<img>タグが生成され、コピーしやすい形式で出力されます。
const imgTag = `<img src="images/${img.name}" width="${adjustedWidth}" height="${adjustedHeight}" alt="">`;