ファイルサイズ」タグアーカイブ

SmartJPEGが「中小企業優秀新技術・新製品賞」優秀賞を受賞しました

こんにちは。SmartJPEG のマーケティング担当、若狭です。

りそな中小企業振興財団と日刊工業新聞社の共催で行われた「中小企業優秀新技術・新製品賞」で画像軽量化ソリューション「SmartJPEG」が、ソフトウェア部門で最も権威のある「優秀賞」を受賞いたしましたことを、ご報告いたします。

とてもありがたいことに、ウェブテクノロジは過去に、画像最適化ソフト「OPTPiX」(後継は OPTPiX imésta)や、マンガデザインツール「コミPo!」でも受賞しており、今回は3回目の受賞となります。

「コミPo!」と「OPTPiX」が受賞した時の記念盾

続きを読む

カテゴリー: SmartJPEG | タグ: , , , | 2018/04/19 更新

FacebookのOGP画像の仕様変更 キーワードは「1200px × 630px」と「PNG」

こんにちは、ウェブ担当の嶋です。2015年もどうぞよろしくお願いいたします。

さて、以前「OGPを設定して、Facebookでシェアした時の画像を大きく表示させる方法」というエントリーでFacebookでシェアした時に表示される画像の件を取り上げました。その後Facebookの仕様が変更され、画像の取り扱いが変わりましたので改めて整理してみたいと思います。キーワードは「1200px × 630px」、そして「PNG」です。

続きを読む

カテゴリー: Facebook | タグ: , , , , , , , , , , , , | 2017/12/29 更新

将来の帯域制限を見据えると、”減色”です。

Android端末3台持ち。ソリューション営業部の浅井です。

“WindowsMobile”、どころか”WindowsCE”はおろか、”PalmOS”のころからパケット通信の恩恵に預っている私なんですが、今はデータ通信も「パケット定額」が当たり前~ってんで、定額を”前提”としたWebサービスが定番。

Webサービスの中心として成長したソーシャルコンテンツ。数年前までは自宅のPCからのアクセスが当然だった”mixi”や”Facebook”などのSNSはもちろん、動画配信系の”YouTube”や”ニコニコ動画”。更にはケータイやスマートフォンからのアクセスが大前提の”ソーシャルゲーム”も、この「パケット定額」なくしてはサービスが成り立たないのが現在のWebサービス、であります。

が! ここにきて永遠と思われたこの「パケット定額」が無くなるのでは? という話題が。

続きを読む

カテゴリー: 画像減色 | タグ: , , | 2016/08/25 更新

Flash Playerのメモリ使用量を1/3に抑えるテクニック

ウェブテクノロジ開発部の西田です。

この記事では、主にモバイル機器向けFlashコンテンツを開発されている方々に向けて、Flash Playerでのメモリ使用量とSWFファイルのファイルサイズを抑える方法についてご紹介します。
同時に、Flashコンテンツに画像を組み込む際の注意点についても紹介します。

現在、日本で普及しているほとんどのフィーチャーフォン(いわゆるガラケー)にはFlash Liteが搭載されており、Androidでも2.2以降からはFlashが搭載されています。ソーシャルゲームをはじめ、グラフィカルでリッチなFlashコンテンツが日々増えてきていますが、それにともないSWFファイルのファイルサイズやFlash Playerのメモリ使用量が問題になってくることがしばしばあるのではないでしょうか。

1. Flash Playerのメモリ使用量が1/3になる!

まずは同じくらいのファイルサイズの画像(JPEG、PNG)を組み込んだSWFファイルを作成し、SWFファイルのファイルサイズとFlash Player(エミュレーター)のメモリ使用量にどれくらいの違いが出るかを比較してみました。
※画像はクリック・タップすると拡大されます。


  • JPEG
  • PNG-8 512x512 50KB
    PNG-8(透過なし)
  • PNG-8 512x512 alpha
    PNG-8(透過あり)

表1. JPEG/PNGのメモリ使用量・SWFファイルサイズの比較

フォーマット JPEG PNG-8(透過なし) PNG-8(透過あり)
画像サイズ 512×512pixel 512×512pixel 512×512pixel
画像ファイルサイズ 50,843 byte 51,503 byte 51,771 byte
SWFファイルサイズ 50,937 byte 49,743 byte 49,933 byte
メモリ使用量 1,202KB 388 KB 388 KB
  • 計測環境:Flash Lite3.0 色深度:32bit ディスプレイサイズ:240×320
  • このページで表示している画像は実際に使った画像を縮小して表示しています。各画像のリンク先が、この実験で使用した元画像です。

図1. JPEG/PNGのメモリ使用量・SWFファイルサイズの比較グラフ

 JPEG/PNGのメモリ使用量・SWFファイルサイズの比較グラフ

同程度のファイルサイズの画像を使用しても、PNGでは劇的にメモリ使用量が抑えられていることがわかります
だったらすべての画像をPNGにすればいいの? というとそういうわけにもいきません。
では、どのような場合にPNGを使えば良いのかを考えていきましょう。

2. まずは画像フォーマットのおさらいから

Flashやインターネットなどでは主にJPEG、GIF、PNGといった画像フォーマットが使われています。
ここでは、それぞれの画像フォーマットについておさらいをしておきましょう。

表2. JPEG、GIF、PNGの特徴

JPEG

GIF

PNG-8

PNG-24

PNG-32

圧縮方式

不可逆圧縮
(画像劣化あり)

可逆圧縮

可逆圧縮

可逆圧縮
(画像劣化なし)

可逆圧縮
(画像劣化なし)

色数

1677万色
(24bit)

1677万色中
256(8bit)

1677万色中
256(8bit)

1677万色
(24bit)

1677万色
(24bit)

透過
(アルファ)

不可

可能
(透明1色のみ)

可能
(アルファチャンネル)

不可

可能
(アルファチャンネル)

アニメーション

不可

可能

不可

不可

不可

 

それぞれの画像フォーマットの長所と短所も簡単にまとめておきましょう。

 

表3. JPEG、GIF、PNGの長所と短所

JPEG 長所 – 写真画像の圧縮に向いている
– 圧縮率が可変なので、低圧縮(高画質)から高圧縮(低画質)まで、用途によって選べる
短所 – 線画、アニメ調、ロゴ、画面キャプチャのような画像の圧縮には向いていない
– 非可逆圧縮のため、圧縮率を高くすると画質が劣化する
– 透過やアニメーションはできない
– 画像をメモリに展開したとき、1ピクセルあたり3バイト使用する(メモリ使用量大)
GIF 長所 – 線画、アニメ調、ロゴ、画面キャプチャのような画像の圧縮に向いている
– アニメーションができる
– 透明色が使える
– 画像をメモリに展開したとき、1ピクセルあたり1バイト使用する(メモリ使用量小)
短所 – 256色までしか表現できない
PNG 長所 – 線画、アニメ調、ロゴ、画面キャプチャのような画像の圧縮に向いている
– PNG-24/32(フルカラー)では、圧縮しても画像が劣化しない
– PNG-8(インデックスカラー…256色、16色など)にもPNG-24/32(フルカラー)にも対応できる(インデックスカラーに減色する際の品質によって結果が大きく左右されますが、「OPTPiX imésta」を使えば高品質の減色が可能です)
– アルファチャンネルを持つことができ、半透明の表現が可能
– PNG-8(インデックスカラー)の場合、画像をメモリに展開したとき、1ピクセルあたり1バイト使用する(メモリ使用量小)
短所 – PNG-24/32(フルカラー)ではJPEGよりもファイルサイズが大きくなる
– PNG-24/32(フルカラー)の場合、画像をメモリに展開したとき、1ピクセルあたり3バイト/4バイト使用する(メモリ使用量大)
– アニメーションできない

一般的には、写真などはJPEG、画像自体でアニメーションさせたいときはGIF、ロゴやボタンなどはGIFかPNGフォーマットが適しています。

3. ではモバイル機器向けのFlashでは何を使う?

それぞれの画像フォーマットには得意・不得意があるので、画像の使用用途や目的に応じて適切な画像フォーマットを選択する必要があります。
実際にFlash内に画像を組み込み、SWFファイルのメモリ使用量とファイルサイズを見てみましょう。

 

表4. 各画像フォーマット毎のSWFファイルサイズ・メモリ使用量の比較

JPEG 512x512 70% GIF 512x512 256color
フォーマット JPEG(画質 70) フォーマット GIF
画像サイズ 512×512pixel 画像サイズ 512×512pixel
画像ファイルサイズ 23,455 byte 画像ファイルサイズ 55,901 byte
SWFファイルサイズ 23,549 byte SWFファイルサイズ 49,743 byte
メモリ使用量 1,129KB メモリ使用量 388 KB

 

PNG 512x512 fullcolor PNG 512x512 256color
フォーマット PNG-24 フォーマット PNG-8
画像サイズ 512×512pixel 画像サイズ 512×512pixel
画像ファイルサイズ 142,427 byte 画像ファイルサイズ 51,503 byte
SWFファイルサイズ 165,015 byte SWFファイルサイズ 49,743 byte
メモリ使用量 1,267KB メモリ使用量 388 KB
  • 計測環境 Flash Lite3.0 色深度:32bit ディスプレイサイズ:240×320
  • 表示している画像は実際に使った画像を縮小しています。各画像のリンク先が、この実験で使用した元画像です。

画素数が大きくフルカラーで扱いたい画像の場合は、圧縮率を調整できるJPEGを使うとSWFファイルのサイズを抑えることができます。しかしながら、アニメ調の画像では、やはり画質が劣化してしまいメモリ使用量も大きくなります。

フルカラーにこだわらなくてもよい場合は、GIFかPNG-8を使えばメモリ使用量とSWFファイルサイズを抑えることができます。ただし、この場合は減色する際の品質が重要となってきます。「OPTPiX imésta」を使えば高い品質で減色することが可能です。

また、GIFでは単色での透過しかできずFlash内でそのままGIFアニメーションを使うこともできないため、色数を256色まで制限できる場合は、メモリ使用量とSWFファイルサイズを抑え、綺麗に透過させるにはPNG-8が有効です。

 

4. 画像圧縮設定にご注意を!

画像フォーマットや画質を適切に選択していても、Adobe Flash CSにPNGやGIFなどの画像を組み込んだ際に、自動的にJPEG圧縮されてしまうことがあります。ついつい陥りやすい問題ですので注意が必要です。

画像のプロパティ

 

Adobe Flash CSの「ライブラリ」からアイテムを選択し画像のプロパティを確認してみましょう。
大きな画像の場合、圧縮の項目が「写真画質(JPEG)」に設定されることがあります。
この場合、PNGやGIFを組み込もうとしてもJPEG圧縮されてしまい、画質が劣化した画像が表示されてしまいます。
せっかくターゲットに合わせて調整した綺麗な画像が、いつの間にか劣化して表示されてしまうということは不本意です。しかも、メモリ使用量も増加してしまいます。

画像のプロパティ

圧縮の項目を「劣化なし(PNG/GIF)」とした場合、PNGやGIFはJPEG圧縮されなくなり、ターゲットに合わせて調整した画像が意図通りに表示されるようになります。また、メモリ使用量も前述した通りに抑えることができます。

 

表5. 圧縮設定によるメモリ使用量SWFファイルサイズの比較

元画像のフォーマット PNG-8 PNG-8
元画像ファイルサイズ 51,503 byte 51,503 byte
画像サイズ 512×512pixel 512×512pixel
圧縮設定 写真画質(JPEG) 劣化なし(PNG/GIF)
SWFファイルサイズ 29,899 byte 49,743 byte
メモリ使用量 1,140 KB 388 KB
  • 計測環境 Flash Lite3.0 色深度:32bit ディスプレイサイズ:240×320

 

5. Flashの今後について

Adobeがモバイルブラウザー向けFlash Playerの開発を終了する、との報道もあり今後の動向が気になるところですが、実際のところ、まだフィーチャーフォンは多く使われており、Android機でもFlash Playerを搭載している機種がほとんどです。コンテンツを提供する業界でも、フィーチャーフォンユーザー向けのコンテンツを充実させる方向で進んでいるようです。

今回ご紹介した方法を参考に、軽くて快適なFlashコンテンツ作成の一助になれば幸いです。

カテゴリー: 開発・プログラミング | タグ: , , , , | 2016/08/25 更新

スマートフォンアプリで、綺麗な画像を軽くして組み込む方法

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

今回は、スマートフォンアプリ(アンドロイド(Android)アプリ)と、iOSアプリ(iPhoneアプリ/iPadアプリ)で綺麗な画像を軽く扱いたい開発者の方のために、解決策をご紹介いたします。

※ 本エントリーはブログ掲載時点の情報をまとめたものです。将来的に仕様が変更になる可能性もあるのであらかじめご了承ください。

ファイルサイズの制限

さて、スマートフォンアプリでは、アプリケーションのファイルサイズに制限があります。「Android Market」ではアップロード可能なアプリの上限サイズが「50MBまで」と制限されていますし、

Android Market では50MBまで

Android Market では50MBまで

「App Store」では3G回線経由にてダウンロード可能なアプリの上限サイズは「20MBまで」と制限されています。

AppStoreでは20MBまで

AppStoreでは20MBまで

ちなみに、iOSでは、WiFi経由でダウンロード可能なアプリの上限サイズは2GBとのことです。

また、それぞれの端末のメモリストレージの量も現段階では「PCのように豊富にある」「湯水のように使える」とは言えない状況です。「Android Market」や「App Store」の制限もさることながら、アプリケーションは少しでも軽いほうがユーザーに喜ばれるのは確かです。

画像をキレイなまま軽く!

努力してソースコードを短くしてもアプリケーションのサイズが劇的に小さくなることはほとんど無いと言えるでしょう。

アプリケーションの中で大きくサイズを使っているのは「画像データ」なのです。

スマートフォンの画面の解像度は、昔のPCに匹敵するほど大きく(広く)なっています。最近は、WVGA:800×480以上の端末が増えています。この大きさの画像データを複数枚持つだけでアプリの容量はどんどん増えていきます。

画像の数を減らすことなく、アプリの容量を抑えようとして画像データを必要以上に圧縮すると画像内にモスキートノイズが増えてしまい、スマートフォンのキレイで広い画面のメリットを損なう結果になってしまいます。

画像は写真なのか、図表やイラストなのかをチェック!!

写真の画像はJPEG形式が最適です。キレイに小さく圧縮できます。しかし、図表やイラストの画像はJPEG形式で圧縮(保存)するとモスキートノイズだらけのひどい結果になります。

図表の画像を使う場合はPNG形式で圧縮(保存)してください。圧縮には減色で対応するとキレイな画像のまま軽くすることができます。

雑誌やパンフレットのように写真と図表や文字が混在しているような画像はあるか?

写真と図表が混在している画像は、JPEG形式?PNG形式?どちらで保存すればキレイなまま軽くできるでしょうか。

手間を惜しまないのであれば、写真の画像と図表の画像を分離するとよいでしょう。

次の図のように、写真の部分を切り出してJPEG形式で保存し、図表や文字の部分はPNG形式で保存します。そして、表示するときに1つの画像に見えるようにくっつけるわけです。

特にモスキートノイズの入りやすい文字周りはPNG形式で保存するとJPEG形式と同じバイトサイズにまで圧縮しても表示がクッキリとキレイになります。

しかし、この作業。技術や理論が理解できても実際にやってみるととても大変です。

特に、画像の枚数が多かったり、何度も改修がかかるような画像に対してこの作業を手でやるのは・・・コスト的にも品質的にも問題があります。

この作業を確実に全自動で計算&分割&保存してしまうのが「ハイブリッドフォーマット」で画像を保存できる「OPTPiX imesta 7 for Mobile & Social」です。

詳しくは「電子書籍・雑誌やコミックをキレイに!軽く!ハイブリッド画像作成ツール – OPTPiX imesta 7 for Mobile & Social」のページをご覧ください。

サンプルソースコードの提供

「・・・で、そのハイブリッド画像をアプリで表示するには、どうしたらいいの?」

アプリとして動作実績のあるアンドロイド(Android)アプリのサンプルソースコードと、iOSアプリ(iPhoneアプリ/iPadアプリ)のサンプルソースコードともにご用意しています。

「サンプルソースコードを参考にしたい」開発者の方はお問い合わせフォームからお問い合わせください。

カテゴリー: スマートフォン開発 | タグ: , , , , , , , , , , , , | 2016/08/25 更新