画像容量」タグアーカイブ

画像容量を小さくする方法:第2回 「画像サイズの調整」

ウェブ担当の嶋です。

画像容量を小さくする方法、第1回では画像容量をなぜ小さくする必要があるのかについて述べました。回線速度や端末のスペックが進化した現在でも、画像容量は使用用途に合わせて最適化する必要があります。

しかし、「画像を最適化しましょう」と言うことは簡単ですが、具体的にどういう形で最適化すればよいのでしょうか。

今回は画像の最適化作業の最初の段階として「画像サイズ」の調整についてお話いたします。

続きを読む

カテゴリー: OPTPiX Labs | タグ: , , , , ,

画像容量を小さくする方法:第1回 画像容量に関する基礎知識

ウェブ担当の嶋です。

本ブログに「画像容量を小さくする方法」というエントリーの投稿があります。10年も前の記事なのですが、検索経由でページにたどり着く方が結構いらっしゃるようで、今でもアクセスが多い記事になっています。

10年前といえばiPhoneがまだ4S、スマホの回線も3Gが主流だった時代。改めて見てみるとエントリー内にも「816✕612はブログで表示するには大きすぎる」というように今ではちょっと違和感を感じる内容も記載されています。

年を追うごとにスマホのカメラで撮影する画像の容量やネット経由で取得するデータ容量もどんどん大きくなっています。それとともにスマホは5Gの普及が始まりましたし、増設用のmicroSDカードも一昔前のノートPCのHDD並みの容量になりました。

「もう画像容量なんて気にしなくても別にいいんじゃない?」

答えはNoです。
そもそも気にしなくていいなら「画像容量を小さくする方法」というページのアクセス数が伸びるわけがなく……。

画像を何に使うのかにもよりますが、通信速度が高速になったり、端末のスペックが向上した今だからこそ、改めて画像容量を減らすことの重要性が注目されていると言っていいでしょう。単に減らすだけではなく、画像容量をうまく減らす、と言ったほうがいいかもしれません。

以前の記事のアップデートの意味も含め、新しい情報も加えた上で何回かに分けて掲載していきたいと思います。第一回の今回は画像容量に関する基礎知識についてお送りします。

続きを読む

カテゴリー: OPTPiX Labs | タグ: , , | 2021/04/21 更新

キャプチャ画面はJPEGではなくインデックスPNGで

こんちには。ウェブテクノロジ開発部の山崎です。

仕事でもプライベートでも、
いつもお世話になっているGoogleさんにお伝えしたいことがありまして、
この場を借りることにしました。

まずは以下のキャプチャ画面を見ていただきたいのですが、
Googleさんの検索サイトで「ウェブテクノロジ」と入力したあとで、
検索結果に表れる虫眼鏡のアイコンをクリックすると、
対象サイトのキャプチャ画面(サムネイル画像)が表示されます。

Googleキャプチャ画面

このキャプチャ画面の画像ですが・・・ちょっと荒すぎませんか? (どう思われますか?みなさん)

わたしはJPEGのモスキートノイズが・・・気になって仕方がないのです(職業病??)。

JPEG画像の圧縮率を高くすると、どうしてもこうなる傾向があるのはわかりますが、
特に「キャプチャ画面の場合はJPEG画像ではなくインデックスPNGを使ってください!」とお伝えしたいのです。

特に、弊社の製品に組み込まれている減色エンジンをぜひご検討いただきたい!と思うのです。

Google(の中のひと)さま、もしこのブログをご覧になりましたら、
弊社のツール・・・「OPTPiX imestaシリーズ」をぜひ一度お試しください。

ちなみに、弊社のWebページを「OPTPiX imesta」を使ってインデックスPNGに変換すると・・・

キャプチャ画像のPNGとJPEGの比較画像

同じ画像容量でも、インデックスPNGとJPEGでこれだけ違います。
左がインデックスPNG、右がJPEGのキャプチャ画像になります。

 

カテゴリー: 画像形式 | タグ: , , , | 2020/06/16 更新

画像容量を小さくする方法

こんにちは。ウェブテクノロジ開発部の山崎です。

本記事は2011年に書かれたものです。その後の画像のトレンドの変化に合わせ、2021年現在の情報で画像容量を小さくするためのブログ記事の公開をスタートしました。よろしければそちらもご覧ください。

突然ですが、今日は、画像容量の減らしかた!について書かせていただきたいと思います。

「画像容量」と書くと、難しく聞こえますが、写真などの画像ファイルのファイルサイズのことになります。
「写真容量」と書いても「画像サイズ」と書いても「画像ファイルサイズ」と書いても、
同じ画像の容量のことを指しています。

さて、画像容量を小さくしたい方は意外に多いのではないでしょうか。
たとえば、ブログに画像をアップロードしている方。

  • ブログにアップロードできる画像の1枚あたりの容量が、最大500KBまでとか、300KBまでとか、制限があったり。
  • ブログにアップロードできるフォルダの許容量が1GBまでとか、30MBまでとか、制限があったり。

制限が無かったとしても、容量を小さくおさえることは、サーバーの運営コストもおさえられますし、
通信コストもおさえられますし、なによりブログが表示されるまでの時間に影響します。

もちろん、サーバーを管理しているかたは常に気になる話題だと思います。
しかし、すべてのユーザが気にしていることではないので、
サーバーの容量はすぐにいっぱいになってしまうようです。

画像の容量を減らしたい方には、ぜひとも使っていただきたい機能があります。
それは「OPTPiX WebFree」のファイルサイズの上限を指定した画像容量の調整
(画像最適化)機能
です。

では、具体的に画像の容量の減らし方を解説します。

1.縦横サイズを調整する

たとえば、OPTPiX WebFreeのページでサンプル画像として使っている以下の画像ですが、
実は携帯電話で撮った画像なのです。

携帯電話で撮影した画像

携帯電話で撮影した画像

上の画像は
縦横サイズ : 816×612
画像容量 : 450KB

と、一般的なブログで表示するには、大きすぎる写真になっています。

この情報は、Windows 7 などでは、エクスプローラーなどで画像ファイルを選択したり、
マウスカーソルを乗せたりするだけで、プロファイル情報として表示されます。

サンプル画像プロパティ

サンプル画像プロパティ

最近は、デジタルカメラの性能が非常に高くなり、
標準で撮影しても 4000×3000 pix などと大きな画像も珍しくなくなりました。

そのようなデジカメで撮った大きな画像を知らずにアップロードすると、
必要も無いのにWebサイトが重くなり、表示に時間がかかったり、
スマートフォンなどでは表示できなかったり、いろいろ問題が起こります。

OPTPiX Webfreeの機能の一つとして、まずは、画像の縦横サイズを縮小することで
画像の容量を減らすことが可能です。
縦横それぞれ半分にすれば、画像容量は理論的には1/4になります。
ここでは、816×612 を 408×306 にしてみます。

画像の縦横サイズを50%にしてみる

画像の縦横サイズを50%にしてみる

縦横サイズ : 408×306
画像容量 : 53KB

と、この画像の場合はもとの容量の8分の1以下になりました。
予想外に小さくなりましたね。

 

2. 上限サイズを指定して圧縮する

実は、「OPTPiX WebFree」には、他の画像加工ツールには存在しない機能があります。
それが「画像容量の上限サイズを指定した圧縮機能」なのです。

他のツールでは、80とか、70とか、数字を指定して圧縮率を変えていきます。
このとき画像の容量(ファイルサイズ)がいくらになるのか、圧縮してみないと分かりません。

80を指定した時は80KBだったからといって、60を指定すれば60KBになるわけでは無いのです。
やってみないと分からないのです。

このため、作業効率が悪いのです。
希望する容量にするには何度も試行錯誤というやり直しが必要になります。

この点は「OPTPiX WebFree」や弊社の他のツール(たとえば「OPTPiX imestaシリーズ」)にアドバンテージがあります。
以下のように、上限サイズ(たとえば40KB以下)を指定できるのです。
試行錯誤はいりません。最適化された画像が手に入ります。

上限サイズ40KBを指定して圧縮

上限サイズ40KBを指定して圧縮

一回のボタンで、指定サイズ以下でもっとも高画質な画像になります。

JPEG以外の画像フォーマット、PNGでも、GIFでも、
どのファイル形式でも容量を指定した画像の圧縮(画像最適化)ができます

「OPTPiX WebFree」のもう一つのおすすめ機能である「エンハンストフィルター」も通して、
キレイに美味しそうにした40KB以下の画像を置いておきます。

40KB以下に調整した画像

40KB以下に調整した画像

いかがでしょうか。

ブログに画像をアップロードする際には、
ぜひ「無料画像加工サイト OPTPiX WebFree」をご活用いただき、
画像容量を小さく・軽く・そしてキレイに!していただきたいと思います。

また、たくさんの画像の加工処理を行ったり、減色の際に細かな設定を行いたい、
という方にはWindows用アプリケーションである「OPTPiX imesta 7 for mobile & Social」
おすすめします。

よろしくお願いいたします。

※ OPTPiX WebFreeはβ公開を終了しました。

カテゴリー: 画像減色 | タグ: , , , | 2021/04/16 更新