「JPEG?」ブログに最適な写真サイズと拡張子の話「PNG?」 | ヒメとまいにち

「JPEG?」ブログに最適な写真サイズと拡張子の話「PNG?」

 

スポンサーリンク

ブログに貼る画像に適した拡張子

皆さん、ブログに貼りつける画像ファイルって、

何で保存したものを使っていますか？

主に、JPEG（JPG）、PNG、GIFがあると思うんですが、

見た目には違いがないように思います。

ある？

試しにヒメちーの画像

２０パーセントに縮小してから

jpegで保存した画像１１６KB

JPEGで保存した画像

２０パーセントに縮小してから

pngで保存した画像１７０KB

PINGで保存した画像

ファイル形式の違いをざっくりと説明すると、

JPEG（ジェイペグ）とは、ファイルの拡張子でもあり、

静止画像データの圧縮形式のことを指します。

JPEGとは、静止画像データの圧縮形式の一つ。

フルカラーの画像を多少の劣化を伴いながら高い圧縮率で圧縮できるのが特徴で、

写真など自然画像の記録に向いている。

ファイル名の標準の拡張子は「.jpg」あるいは「.jpeg」と表記される

 

PNGには８bitは前述のGIFと同じ２５６色に対応する８bit（PNG-8）と、

フルカラーの保存が可能な24bit（PNG-24）の２種類がある。

また、圧縮率が同等で同じ内容のGIF形式ファイルより１０〜３０％小さい。

棒グラフや折れ線グラフのような図版、シンプルなイラストの保存に適している。

となっています。

多分普通に、カメラで撮った写真って、JPEG方式で保存されているし、

それを加工したり圧縮したりしても、同じ拡張子のまま使ってると思うんです。

参考までに、一般的に適してるとされる用途

「JPEG」：写真やグラデーションがある画像、色数が多い画像向き。
「GIF」：色数が少ない、シンプルな画像向き。ファイルサイズを小さくできる。
「PNG」：図版、シンプルなイラスト向き。ファイルサイズはGIFより小さい。

ところが、わたしが使っている画像編集ソフト、

保存するときにこういうメッセージが出るんです。

jpegで保存した画像１０８KB

画像加工ソフトの警告

で、劣化する、とまで言われてしまうと、

PNGの方がいいのかなーって思って、そうしていたんですが、

同じ大きさで保存した写真のサイズはちょっとPNGの方が重いんですよね。

ページ読み込み速度を測ったら、悲惨な結果。

一枚はほんの７０KB程度の差でもちりも積もれば…なわけで。

画像サイズを改善せよ、と出ました。

ほんとはもっと、改善するべき項目が出たけれど、

よくわからないのでわかるとこから始めようかしら、なんて。

ワードプレスには、画像の最適化、というプラグインがあるのですが、

プラウインによる最適化

これを使うと、元画像、最適化されたもの、コピーと３枚に増えちゃうんです。

重複する画像ファイル

いくら無制限のサーバーを借りているとはいえ、どうなんだろう、というのと、

自分がなんだかいや、という理由で使っていないのですが、

やはりJPGを使った方がいいんでしょうか？

見た目には差がありますか？

どう思います？←丸投げｗ

 

スポンサーリンク

決定的瞬間を撮られる猫

ヒメちーは？どう思う？

ヒメはよくわかりませんが、ヒメが可愛く写ってればいいと思います。

猫の画像

そ、そうねえ…それはそうなんだけど…

じゃあ、頑張って可愛い写真撮るわ。

あ！

アクビをする猫の画像

パシャ！

アクビをする猫の画像

パシャ！パシャ！

アクビをする猫の画像

アクビをする猫の画像

決定的瞬間を撮ったわね。

これは高画質で載せちゃわなくっちゃ。

 

 

今日のお昼

スーパーのチルドコーナーで買った物。

シマダヤの鶏白湯まぜそば。

ゆでたキャベツ、ホウレンソウ、わかめ、チャーシュー、ゆで卵。

見本通りの具材はなにひとつ入れなかったけれど、

すっごい美味しかった！

これはリピだわー！

シマダヤ鳥白湯まぜそば

 

このエントリーをはてなブックマークに追加　　ブログランキング・にほんブログ村へ

よろしければ読者登録お願いします。
ヒメとまいにち - にほんブログ村
スポンサーリンク
ブログ ワードプレス
ヒメ ブログ 美味しいもの
スポンサーリンク
シェアする
スポンサーリンク
ねぇやん
ヒメとまいにち
スポンサーリンク

コメント

  1. 名前:kirime :投稿日：2020/10/23(金) 18:44:36 ID：cwNTAzOTk

    各方式で、得意不得意がありますので、拘るならその辺を把握しておくと良いですね。
    例えば、色数の少ない落書きを同じ解像度で保存すると、PNGのほうが容量が少なくなります。
    フルカラーならJPEGの方が少なくなりますが、一部の色にノイズが入ります。
    例の画像でも、色味が少し違っていると思います。

    でも、オリジナルの画像は他の人が知る由もないので、見た目にこだわるなら自分で観て良い方に、要領の都合なら、小さくなる方で良いのではないでしょうか。

    返信
  • ねぇやん名前:ねぇやん :投稿日：2020/10/25(日) 07:03:51 ID：Q3NTgwNjI

    わたしは、もともと写真が綺麗ではない(きれいに写せよw)ので、
    少しでもきれいに、と思うのですが、
    ふたつの画像、見た目で違いますか？
    正直PNGもJPEGも違いがわからなくって…(-_-;)
    でも重たいとすぐに重いぞーと指導が入るので、
    写真はJPEGで行こうと思います。
    ありがとうございました(*´ω`*)

    返信
  • 名前:えたばりゅ :投稿日：2020/10/24(土) 08:13:00 ID：Q0ODU1ODk

    僕は普通の画像はJPGで、塗りとか透明度を加工した画像は、なんかJPGだと上手く反映されないんで、PNGにしてます(^^♪
    特に記事の一発目の画像はアイキャッチ兼ねてるんで、加工してPNGって時が多いっすね(^^;

    そういえば、JIFはあんまり使わないかな～～(´ー｀)

    返信
    • ねぇやん名前:ねぇやん :投稿日：2020/10/25(日) 07:04:43 ID：Q3NTgwNjI

      やっぱり使い分けてらっしゃるんですね、
      皆さんちゃんと考えられててすごい(>_<)

      返信
  • 名前:AKAZUKIN :投稿日：2020/10/24(土) 10:04:00 ID：k2Mzk3MTM

    私は背景を透明にしたいので（イラストということもあって）PNG一択なんですけど、
    画像の圧縮は悩みどころですよねー。。
    オンラインで無料で画像の圧縮をしてくれるサイトがあるので

    https://tinypng.com/

    ↑こちらを使ってみるとか、どうでしょうか・・
    （JPEGも圧縮できるみたいです）

    返信
    • ねぇやん名前:ねぇやん :投稿日：2020/10/25(日) 07:05:51 ID：Q3NTgwNjI

      ありがとうございます、ブロサーのコメントでも、こちらのサイト進めていただきました。
      時間のある時に、ちょっと見てみたいと思います(｀･ω･´)ゞ

      返信
    '}function p(){return z.documentElement.clientHeight?z.documentElement.clientHeight:Math.round(A.height())}function q(a){var b=v();b&&(27===a.keyCode&&b.options("esc")&&b.close(),9===a.keyCode&&r(a,b))}function r(a,b){var c=b.element().find(G),d=c.index(z.activeElement);a.shiftKey&&d<=0?(c.get(c.length-1).focus(),a.preventDefault()):a.shiftKey||d!==c.length-1||(c.get(0).focus(),a.preventDefault())}function s(){b.each(D,function(a,b){b.resize()})}function t(a){1===D.unshift(a)&&(C.addClass("lity-active"),A.on({resize:s,keydown:q})),b("body> *").not(a.element()).addClass("lity-hidden").each(function(){var a=b(this);void 0===a.data(F)&&a.data(F,a.attr(E)||null)}).attr(E,"true")}function u(a){var c;a.element().attr(E,"true"),1===D.length&&(C.removeClass("lity-active"),A.off({resize:s,keydown:q})),D=b.grep(D,function(b){return a!==b}),c=D.length?D[0].element():b(".lity-hidden"),c.removeClass("lity-hidden").each(function(){var a=b(this),c=a.data(F);c?a.attr(E,c):a.removeAttr(E),a.removeData(F)})}function v(){return 0===D.length?null:D[0]}function w(a,c,d,e){var f,g="inline",h=b.extend({},d);return e&&h[e]?(f=h[e](a,c),g=e):(b.each(["inline","iframe"],function(a,b){delete h[b],h[b]=d[b]}),b.each(h,function(b,d){return!d||(!(!d.test||d.test(a,c))||(f=d(a,c),!1!==f?(g=b,!1):void 0))})),{handler:g,content:f||""}}function x(a,e,f,g){function h(a){k=b(a).css("max-height",p()+"px"),j.find(".lity-loader").each(function(){var a=b(this);c(a).always(function(){a.remove()})}),j.removeClass("lity-loading").find(".lity-content").empty().append(k),m=!0,k.trigger("lity:ready",[l])}var i,j,k,l=this,m=!1,n=!1;e=b.extend({},H,e),j=b(e.template),l.element=function(){return j},l.opener=function(){return f},l.options=b.proxy(d,l,e),l.handlers=b.proxy(d,l,e.handlers),l.resize=function(){m&&!n&&k.css("max-height",p()+"px").trigger("lity:resize",[l])},l.close=function(){if(m&&!n){n=!0,u(l);var a=B();if(g&&(z.activeElement===j[0]||b.contains(j[0],z.activeElement)))try{g.focus()}catch(a){}return k.trigger("lity:close",[l]),j.removeClass("lity-opened").addClass("lity-closed"),c(k.add(j)).always(function(){k.trigger("lity:remove",[l]),j.remove(),j=void 0,a.resolve()}),a.promise()}},i=w(a,l,e.handlers,e.handler),j.attr(E,"false").addClass("lity-loading lity-opened lity-"+i.handler).appendTo("body").focus().on("click","[data-lity-close]",function(a){b(a.target).is("[data-lity-close]")&&l.close()}).trigger("lity:open",[l]),t(l),b.when(i.content).always(h)}function y(a,c,d){a.preventDefault?(a.preventDefault(),d=b(this),a=d.data("lity-target")||d.attr("href")||d.attr("src")):d=b(d);var e=new x(a,b.extend({},d.data("lity-options")||d.data("lity"),c),d,z.activeElement);if(!a.preventDefault)return e}var z=a.document,A=b(a),B=b.Deferred,C=b("html"),D=[],E="aria-hidden",F="lity-"+E,G='a[href],area[href],input:not([disabled]),select:not([disabled]),textarea:not([disabled]),button:not([disabled]),iframe,object,embed,[contenteditable],[tabindex]:not([tabindex^="-"])',H={esc:!0,handler:null,handlers:{image:i,inline:j,youtube:k,vimeo:l,googlemaps:n,facebookvideo:m,iframe:o},template:''},I=/(^data:image\/)|(\.(png|jpe?g|gif|svg|webp|bmp|ico|tiff?)(\?\S*)?$)/i,J=/(youtube(-nocookie)?\.com|youtu\.be)\/(watch\?v=|v\/|u\/|embed\/?)?([\w-]{11})(.*)?/i,K=/(vimeo(pro)?.com)\/(?:[^\d]+)?(\d+)\??(.*)?$/,L=/((maps|www)\.)?google\.([^\/\?]+)\/?((maps\/?)?\?)(.*)/i,M=/(facebook\.com)\/([a-z0-9_-]*)\/videos\/([0-9]*)(.*)?$/i,N=function(){var a=z.createElement("div"),b={WebkitTransition:"webkitTransitionEnd",MozTransition:"transitionend",OTransition:"oTransitionEnd otransitionend",transition:"transitionend"};for(var c in b)if(void 0!==a.style[c])return b[c];return!1}();return i.test=function(a){return I.test(a)},y.version="2.2.2",y.options=b.proxy(d,y,H),y.handlers=b.proxy(d,y,H.handlers),y.current=v,b(z).on("click.lity","[data-lity]",y),y});
    タイトルとURLをコピーしました