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

 

スポンサーリンク

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

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

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

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

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

ある?

試しにヒメちーの画像

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

jpegで保存した画像116KB

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

pngで保存した画像170KB

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

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

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

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

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

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

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

 

PNGには8bitは前述のGIFと同じ256色に対応する8bit(PNG-8)と、

フルカラーの保存が可能な24bit(PNG-24)の2種類がある。

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

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

となっています。

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

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

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

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

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

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

jpegで保存した画像108KB

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

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

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

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

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

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

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

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

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

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

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

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

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

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

どう思います?←丸投げw

 

スポンサーリンク

決定的瞬間を撮られる猫

ヒメちーは?どう思う?

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

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

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

あ!

パシャ!

パシャ!パシャ!

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

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

 

 

今日のお昼

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

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

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

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

すっごい美味しかった!

これはリピだわー!

 

  

コメント

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

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

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

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

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

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

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

    https://tinypng.com/

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

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