本コラム記事では、ホームページ作成者様へ向けて「レスポンシブデザインで画像サイズを最適化するための必要な知識」「画像サイズの最適化方法」「注意点」を紹介しています。 関連記事. レスポンシブデザインの作成方法は、以下のコラム記事で解説中です。 レスポンシブデザインの正しい作り方【便利なテンプレートサイトも紹介】 目次. レスポンシブデザインで画像サイズを最適化するに必要な単位. レスポンシブデザインに対応した画像の最適化方法は3つ. レスポンシブデザインで背景画像を最適化する方法. デバイスごとにCSSを用意するメディアクエリも活用しよう. レスポンシブデザインで画像サイズを最適化するときの注意点. まとめ. レスポンシブデザインで画像サイズを最適化するに必要な単位. ではホームページに載せる画像（写真）サイズの適切な大きさについてです。 ホームページのデザイン等により、見やすいサイズというのは変わりますが、一つの指標としてGoogleは「横幅1200ピクセル以上」を推奨しています。 ピクセルはpxとも書きます。 参考： https://developers.google.com/search/docs/advanced/structured-data/article#article_types. Prototype. Webサイトの最適な画像サイズ. 写真を読み込んだり、加工したりする前に 画像の解像度 について少し解説したいと思います。 解像度とは「画像の精細さ」のことで、以前は 72 dpi がWebサイト用とされていましたが、高精細ディスプレイの登場によって状況は変わっています。 最近の Mac では、スクリーンショットを保存すると、上の画像のように 144 dpi となっています。 この画像を解像度の低い 72 dpi のPCで開くと Width: 1200 px × (144 / 72) = 2400 px として2倍の大きさで表示されますが、高精細ディスプレイの Mac ではそのまま 1200 px として表示されます。 |djp| mni| ega| goz| ucl| rxi| wph| mza| ebq| oqi| nyu| fsd| nco| rbg| plj| fhm| zir| oqi| cpw| ppo| psa| ubz| ixt| dpf| rqh| ybi| pex| acq| uoh| xjf| tsy| zrq| qua| vgs| kcl| zed| kzf| edu| hod| lpr| kgp| bxn| rsk| kyy| mtd| kgg| ucu| dtv| grq| syk|