このコースはウェブ デベロッパーの初心者から上級者までを対象としたもので、画像ソースを効率的にリクエストしてレンダリングする方法の基礎から、一般的な画像形式がサーバーからクライアントに渡される仕組みの詳細までカバーしています。このコースでは、画質を損なうことなく、画像の転送サイズを可能な限り小さくする方法について説明します。少なくとも、誰にも見えないようにすることはできません。
このシリーズを最初から最後まで通して、最新のウェブでの画像の仕組みを包括的に理解したり、日常業務で使用する特定のコンセプトやマークアップ パターンのリファレンスとして利用したりできます。
ウェブ開発を初めて行う方は、マークアップの基本的な使い方については HTML を学ぶコース、スタイル設定の基礎については CSS を学ぶコース、レスポンシブ レイアウトで画像がレンダリングされる仕組みについてはレスポンシブ デザインを学ぶコースをご覧ください。
主な内容は次のとおりです。
ウェブ上の画像の歴史
1993 年の image 要素から始まる、ウェブ上の画像の歴史
主なパフォーマンスの問題
画像リクエストのサイズとパフォーマンスを可能な限り高める方法を学習します。
ベクター画像
ウェブで使用されているベクター画像形式である SVG について学びます。
ラスター画像
JPEG、GIF、PNG、WebP などのラスター画像。
画像形式: GIF
GIF 画像形式と画像エンコードの仕組みについて説明します。
画像形式: PNG
どのような場合に PNG が最適な画像形式であるかをご確認ください。
画像形式: JPEG
ウェブで最も一般的な画像形式について説明します。
画像形式: WebP
WebP について学び、この形式と他の形式の違いを理解します。
画像形式: AVIF
AV1 Image File Format（AVIF）は、オープンソースの AV1 動画コーデックに基づくエンコードです。
レスポンシブ画像
レスポンシブ画像の詳細
記述構文
srcset と size を使用して、画像のソースとその使用方法に関する情報をブラウザに提供します。
規範的な構文
絵要素について調べてください。
圧縮とエンコードの自動化
高性能な画像ソースの生成を、開発プロセスのシームレスな一部にしましょう。
サイト生成ツール、フレームワーク、CMS
WordPress などの CMS やその他のサイト生成ツールを使用して、レスポンシブな画像を簡単に使用する方法について説明します。
画像コンテンツ配信ネットワーク
画像 CDN が画像コンテンツを変換して最適化する仕組みについて学習します。
まとめ
その他のリソース
それでは、画像について学びましょう。