画像フォーマットの使い分け

この記事は約3分で読めます。
記事内に広告が含まれています

花火写真

こんにちは、さち です!

今更感たっぷりですが
今回は画像のフォーマット(保存形式)についてまとめてみます。
(また私の備忘録です、すみません…)
この記事で扱う画像フォーマットは
一般的によく扱われる「JPEG」「GIF」「PNG」「BMP」に絞ります。

それでは、さっそく見ていきましょう!

スポンサーリンク

JPEG(ジェイペグ)

写真画像に向いている不可逆圧縮の画像ファイル形式です。
(可逆圧縮もできますがほとんど使われていないようです)
不可逆圧縮を行うと必ず画質に劣化が生じます
その分、ファイルサイズは非常に小さくなります。
(BMPの1/10~1/100程度になると言われてます)

圧縮率を上げるとブロックノイズモスキートノイズが発生するので
画質とファイルサイズのバランスを考え圧縮率を選びましょう。

また、JPEGは写真画像に大きな効果を発揮します
色数が少ないコントラストがハッキリとした画像には向きません。

GIF(ジフ)

色数が少ないコントラストがハッキリとした画像に向いている
可逆圧縮の画像ファイル形式です。
可逆圧縮は、ファイルサイズを小さくしても画質劣化は起きません。
ただし、不可逆圧縮に比べて圧縮率は低くなります。

扱える色数が256色までなので用途が限られます。
ネット上ではアイコンなどの小さなイラスト画像によく使われます。

また、「透明色」を扱えるので画像の背景を透かすことができます。

GIF が他の形式と異なる点はアニメーションができることです。
アニメーションする(動く)画像を作る場合は
自動的に GIF を選ぶことになります。

PNG(ピング)

PNGは、オールラウンダーな可逆圧縮の画像ファイル形式です。
GIF のような色数制限もありません。
JPEG, GIF どちらにも向かない画像には PNG を使えばOK。

また、色の透明度(アルファチャンネル)を設定できるため
画像全体を半透明にするなんてことも可能です。

GIF と同じく透明色を扱えますが
アルファチャンネルに未対応のブラウザ(IE6など)は
透明色の部分が変色してしまうので注意。
IE7以降, Firefox, Opera, Safari は対応してるので
IE6 のことを気にしなければ使用に問題はありません。

アニメーション(MNG, APNG)もできますが
対応ブラウザが少ないため使うのは控えた方がよいです。

BMP(ビットマップ)

「BMP」は無圧縮の画像ファイル形式です。
(16色,256色の場合のみ圧縮が可能)
無圧縮なので当然ファイルサイズが大きいです。

Windows の「ペイント」のデフォルト形式なので認知度は高いですが
インターネット上ではほぼ使われません
(ファイルサイズが他の形式より格段に大きいため)
自分の PC 内でのみ扱う画像であれば「BMP」でも問題ないですが
ネットにアップする画像では「BMP」以外を使った方がよいです。

その他のフォーマットに
JPEG のノイズ問題点を改善した「JPEG2000」がありますが
未対応ブラウザが多いためあまり使われません。

JavaScript を用いて
IE6 でアルファチャンネル付きPNGを表示させる方法もあるようです。
興味がある人は「PNG IE6 アルファチャンネル」で検索してみて下さい。

画像を保存する時は、最適な形式を見極めましょう!

コメント

"),m.no_overlay||s.append("
");var c=s.find("img:first"),d=s.find("img:last");s.append("
");var l=s.find(".twentytwenty-handle");l.append(""),l.append(""),s.addClass("twentytwenty-container"),c.addClass("twentytwenty-before"),d.addClass("twentytwenty-after");var i=s.find(".twentytwenty-overlay");i.append("
"),i.append("
");var a=function(t){var e,n,i,a,o=(e=t,n=c.width(),i=c.height(),{w:n+"px",h:i+"px",cw:e*n+"px",ch:e*i+"px"});l.css("vertical"===r?"top":"left","vertical"===r?o.ch:o.cw),a=o,"vertical"===r?(c.css("clip","rect(0,"+a.w+","+a.ch+",0)"),d.css("clip","rect("+a.ch+","+a.w+","+a.h+",0)")):(c.css("clip","rect(0,"+a.cw+","+a.h+",0)"),d.css("clip","rect(0,"+a.w+","+a.h+","+a.cw+")")),s.css("height",a.h)},o=function(t,e){var n,i,a;return n="vertical"===r?(e-v)/p:(t-w)/f,i=0,a=1,Math.max(i,Math.min(a,n))};g(window).on("resize.twentytwenty",function(t){a(e)});var w=0,v=0,f=0,p=0,y=function(t){(t.distX>t.distY&&t.distX<-t.distY||t.distX-t.distY)&&"vertical"!==r?t.preventDefault():(t.distXt.distY&&t.distX>-t.distY)&&"vertical"===r&&t.preventDefault(),s.addClass("active"),w=s.offset().left,v=s.offset().top,f=c.width(),p=c.height()},h=function(t){s.hasClass("active")&&(e=o(t.pageX,t.pageY),a(e))},u=function(){s.removeClass("active")},_=m.move_with_handle_only?l:s;_.on("movestart",y),_.on("move",h),_.on("moveend",u),m.move_slider_on_hover&&(s.on("mouseenter",y),s.on("mousemove",h),s.on("mouseleave",u)),l.on("touchmove",function(t){t.preventDefault()}),s.find("img").on("mousedown",function(t){t.preventDefault()}),m.click_to_move&&s.on("click",function(t){w=s.offset().left,v=s.offset().top,f=c.width(),p=c.height(),e=o(t.pageX,t.pageY),a(e)}),g(window).trigger("resize.twentytwenty")})}}(jQuery)
タイトルとURLをコピーしました