デザイン

デザイン

画像のサイズファイルを抑えるにはPhotoshopの「PNGとしてクイック書き出し」最強説!(2016年8月時点)

2,450 views

読了時間 : 約1分41秒

UXの観点からも、また最近ではSEOの観点からもWebページの「パフォーマンス」面への注目が高まっていますね。そしてその最たるものが「ページ表示速度」。

 

このページ表示速度を上げる方法は数々ありますが、最もシンプルかつ効果が大きい方法は「画像のファイルサイズを可能な限り小さくすること」です。

 

参考記事)ここらでこの約7年間にWebページはどれだけ「太った」のか?を考えてみよう。

https://www.seleqt.net/design/how-fatty-web-pages-are-now/

 

ファイルサイズを小さくする方法もいろいろありますが、ここではPhotoshopの「PNGとして書き出し最強説」をご紹介したいと思います。

 

graph-all

 

まず上図ですが、これは「1×1pixel」の真っ白なPNGファイルを、さまざまなデザイン/グラフィックソフトで書き出した時のバイト数を比較したものです(バイト数が小さいほうがここでは良しとします)。

 

一番サイズが大きかったのは「Photoshopの名前をつけて保存」で書き出したPNGファイル。ついでmac専用のグラフィックデザインソフト「Affinity Designer」の「PNG8での書き出し」と「PNG24の書き出し」が続きます。

 

一方、サイズが最も小さかったのは「PhotoshopのPNGとしてクイック書き出し」、「PhotoshopのPNG24として書き出し」(同率)、そしてSketchの「Save for web disabled」が続きます。上図では、「Photoshopの名前をつけて保存」が突出しすぎていて下位が見にくいので、詳しい下位の状況は下図をご覧ください。

 

graph-nosaveas

 

どうしてこれだけ「書き出し/保存形式」によってサイズが異なるかというと、その形式によって不要なデータが入っているからです。例えばPhotoshopで「通常の書き出し」を行うと、背景色や物理サイズや変更データなどの不要物が紛れ混んでしまいます。

 

 

そんな中、最もファイルサイズを軽く書き出せたのは、Photoshopに最近追加された「PNGとしてクイック書き出し」の機能でした。

 

もし書き出しのカラーが256種類以下であるなら、Photoshopの「PNGとしてクイック書き出し」機能をお使いになってみてはいかがでしょうか。

 

 

(関連記事)

【インフォグラフィック】画像ファイルの形式を正しく選ぶ方法がわかりやすい。ページ表示速度が劇的に変化!

https://www.seleqt.net/design/how-to-choose-image-file-types-infographics/

 

 

(※本稿は「PNG optimisation」を翻訳・再編集したものです)

【コンビニでも使える!メルペイ初回利用1500円分招待コード】

当サイト限定招待コード:CMUTDF

 
・利用可能店舗:メルカリ、コンビニ、ドラッグストア等
・金額:500円分
※さらにメルペイスマート払で1000円分ポイント!
 友達招待でさらに500円分ポイント!

メルカリ-フリマアプリ&スマホ決済メルペイ

メルカリ-フリマアプリ&スマホ決済メルペイ

無料

 

ピックアップ! さらに今このキャンペーン中です↓

dポイント最大10%『4・5・6月の金・土曜限定!』
■キャンペーン期間:2020/4/1日(水)0:00 ~ 6/30(火)23:59

 

 

【MOV初回限定 合計2,000円相当無料クーポン3枚】

クーポンコード:seleqt2000

 
対応地域:神奈川県、東京都、大阪府、京都府、兵庫県(新登場)
 
2000円オフで登録» »MOVの初回利用2000円オフのクーポンを使って登録はこちら!
 
アプリDLはこちらから↓

MOV《モブ》- タクシー配車

MOV《モブ》- タクシー配車

DeNA Co., Ltd.無料

 

 

 

Seleqtをご覧頂いた方だけに「朗報」
\当サイト限定特別クーポン/

【UberEats初回1000円オフクーポン】
interjpq2206j2tw

 

対象店舗:マック、ガスト、スタバ、ピザハット、松屋 等
※1000円分無料で頼めます。〇〇円以上とかもナシ!完全無料でお試しOK
割引額:1000円引き

 

1000円オフで登録» »当サイト限定の初回利用1000円オフのクーポンを使って登録はこちら!

 

アプリDLはこちらから↓

Uber Eats: 地元で人気の料理をお届け

Uber Eats: 地元で人気の料理をお届け

無料

 

おすすめ新着記事

おすすめタグ