https://webcode-lab.com/attic/

Coding Rules・SEO施策 チェックサイト

  • keyvisualimage
  • keyvisualimage
  • keyvisualimage
  • keyvisualimage
  • keyvisualimage
  • keyvisualimage
  • keyvisualimage
  • keyvisualimage
  • keyvisualimage
  • keyvisualimage
  • keyvisualimage
  • keyvisualimage
  • keyvisualimage
  • keyvisualimage
HOME > Common Rules > 画像

画像


SPEED UP施策の依頼があった場合の、画像の基本的なルールです。
画像はページスピードアップの最も重要な要素となります。
画像を、見た目を変えず適切に軽量化することで、ページスピードへの大きな効果が望めます。
※下記は、エックスサーバーでの設定です。


画像


キービジュアルなど大きい画像の保存
JPG画像は、フォトショップ等で保存時、「プログレッシブ」を選択(JPGは画質60~80)
 →「プログレッシブ」画像は読み込み時、徐々に描画される
ネット上のロスレス圧縮ツール等でロスレス圧縮
 (例サイト: PNGロスレス圧縮ツール  JPGロスレス圧縮ツール
 →かなり軽量化できる

画像コーディング
imgタグへの「width="" height=""」記述付与・なるべく実サイズで使用(PCサイト)
特にキービジュアルなど大画像imgタグへのサイズ記述必須(PCサイト)
画像でのロールオーバーはスプライト画像で行う


画像の種類
JPG形式・・・基本的に大画像や写真、多彩色を使う画像、大きい画像
PNG形式・・・透過を必要とする場合や、小さめでシンプルな色数が少ない画像

注意点・備考
PNGは多用すると、ページがとても重たくなるので注意、大画像にはJPGを使用
PNGはシンプルな色彩であればPNG-8で保存

ページの先頭へ


次回までにお願いする課題

  • 課題1. 知っているHTML5のマーキング情報を、みなさんへ共有しましょう。
  • 課題2. 共有CSS・共有JSを構築しましょう。提案をお待ちしています。
  • 課題3. 今後サイトコーディングで必要になるプラグインを教えてください。
  • 課題4. 分からないことなどあれば聞いてください。
12/04勉強会