Webページ制作実践：HTML/CSS基礎⑧

2025/4/5　「HTML/CSS基礎⑧」の記録です。

講師：⼤浜 信彦先生

本日の課題

Webページ制作実践で作成したページのキャプチャを取得してWordPressの投稿ページに貼り付けを行いましょう。（出来たところまでで大丈夫です）

画像型式と品質・サイズ

1. GIF: 256色の可逆圧縮形式。背景透過やアニメーションが可能。
2. JPEG: フルカラー（1677万色）の非可逆圧縮形式。写真に適するが、圧縮率により画像劣化の可能性あり。
3. PNG-8: 256色の可逆圧縮形式。GIFに類似。
4. PNG-24: フルカラー対応の可逆圧縮形式。画像劣化なしで背景透過が可能。

WebP

Googleが開発した画像形式。

• 圧縮方法により、非可逆圧縮（JPEGのように）や可逆圧縮（PNGのように）を選択可能。
• 高画質でありながら、ファイルサイズを抑えることができる。
• 主にウェブサイトで利用され、ページ読み込み速度を向上させる目的で使用されます。

SVG

• Scalable Vector Graphics の略。
• 画像ではなく、ベクター形式（座標データ）で保存される。
• 拡大縮小しても画像劣化しないので、アイコンやロゴ、図形デザインに最適。
• XMLベースであり、テキストエディタで編集可能。
• アニメーションやインタラクティブなデザインも作成可能。