画像のフォーマット(形式)にはJPEG、PNG、TIFFなど様々ありますが、普段ネットで見る画像・写真の形式はぶっちゃけ9割以上JPEG(JPGとも)です。JPEGは圧縮することで画質をほとんど維持したままサイズ(MBやKB)を大幅に小さくできるというメリットがあるため、ネットのようなスピードが要求される場所では多く使われています。圧縮すると元に戻せないと不可逆な性質があるのでクオリティが求められる場面では向いていません。実は、その「JPEG」には2種類あるのをご存知ですか?ITに詳しいつもりの私(中学生の時から自作PCを作っていたので)でも最近知りました。プログレッシブとベースラインなのですが、とはいっても両者の拡張子や解像度は同じなんです。何が違うのでしょうか?もくじ読み込まれ方が違うベースラインプログレッシブどうやって選ぶ?サイズが軽いのはどっち?読み込まれ方が違う両者の違いはPCやスマホに保存された写真を見ているだけではわかりませんが、ウェブページで画像をを開いた(ダウンロードした)ときの読み込まれ方が違います。ウェブページはなるべく速くローディングできる必要があります。テキストやHTMLは軽いのですぐ読み込まれますが、画像はサイズが大きいのでなるべく解像度を落とし、圧縮します。することで回線の遅いスマホでも速く読み込むことができます。Mini運営者の私としても、このサイトは写真・画像の多いので(写真ギャラリーではありあませんが)なるべく画質を維持しつつサイズを落とすことに立ち上げ当初苦心していました。スポンサーリンクベースラインウェブブラウザが画像を読み込むときに左上の端からオリジナル画質で順に読み込みます。プログレッシブウェブブラウザが読み込むときに最初は全体的に画質の低い(=ギザギザした)画像を読み込み、後から解像度を高くしていく方式です。スマホのような遅い回線に有利で、ベースラインだと例えば30%しか読み込まれなかったら上の30%分しか表示されないのに対し、プログレッシブならすべての読み込みが終わらなくても全体像がある程度わかります。やって選ぶ?PhotoshopでJPEG保存するときに選択できます。意外と飛ばしがちな人が多いと思いますが。メニュー>ファイル>別名で保存フォーマット:JPEGJPEGオプション形式オプションベースラインには「標準」と「最適化」の2種類があります。「標準」はブラウザで画像を読み込むときに左上から順に最高画質で読み込んでいく方式で、「最適化」は「ハフマン符号」というアルゴリズムで「標準」よりさらに圧縮します。プログレッシブではスキャンの数を選ぶことができ、これはブラウザが何回に分けて読み込むかを指定します。サイズが軽いのはどっち?ベースラインとプログレッシブの特徴を紹介しました。同じ画像、同じ解像度、同じ圧縮率ではどっちがサイズ(KB、MB)が軽いのでしょうか?比べてみました。Photoshopでそれぞれで保存してみました。KBプログレッシブ(スキャン3):765KBすると、わずかですがプログレッシブJPEGの方が軽いことがわかります。タグ:jpegjpgphotoshopweb開発フォーマットこの記事をシェアするTwitterシェアGoogle+はてブfeedlyPocket前の記事へ軽視してはいけない。「非破壊編集」について解説するよ。Popular8bitや16bitってどういう意味?階調について。Mini|このサイトについて|お問い合わせ|。