WebP」タグアーカイブ

画像容量を小さくする方法 第4回:軽い画像フォーマット「WebP」、ただし使い方には要注意

ウェブ担当の嶋です。

シリーズ「画像容量を小さくする方法」、過去4回に渡って色々と説明してきましたがそこでは主に「JPEG」「PNG」「GIF」といった定番の画像フォーマットを中心に説明してきました。

過去のエントリー内にも何度か出てきていますが、ウェブページやスマートフォンアプリなどでは先述のもの以外にも「WebP」と呼ばれる画像フォーマットが徐々に使われるようになってきました。

Googleが開発したWebPは既存のフォーマットよりもファイルサイズが小さくなること、iOS14からiPhoneのSafariでもサポートされるようになったことから注目されるようになりました。しかし、現時点ではJPEGやPNGと同じ感覚で使ってしまうと様々な面で問題が起こり得るフォーマットでもあります。

一体WebPとはどんな画像フォーマットなのか、そして実際に運用するにあたって注意するべき点はどんなところなのかをまとめてみました。 続きを読む

カテゴリー: 画像形式 | タグ: , , , , , | 2022/03/08 更新

OPTPiX Spritestudio Ver.6.6.3 でアニメーションWebPが出力可能になりました!

こんにちは、SpriteStudio スペシャリストの大野です。​
2021年12月14日にアップデートされた SpriteStudio Ver.6.6.3 で、レンダリングにアニメーション WebP の出力が追加されました。
注意:2021/12/16現在、iOS(14以降)上のWebブラウザ、macOS(Big Sur以降)上のSafariでアニメーションWebPを再生したときに、チラツキや表示欠けなどの発生が確認されています。

WebP は、米 Google が開発しているウェブサイトのトラフィック量軽減と表示速度短縮の為に開発されたフォーマットで、アルファチャンネル付きのアニメーションが可能になっています。​

アルファチャンネル付きアニメーションは SpriteStudio の得意とするところですので、活用の幅が広がるのではないかと思います。​
今回は活用例の1例として、ゆっくりMovieMaker4β での活用方法をご紹介しようと思います。​

WebP については、弊社の以前のブログ記事でも取り上げていますので、こちらもご覧ください。
OPTPiX Labs ブログ:『WebP』+『PNG24高圧縮化加工』で画質とファイルサイズを、両立。

※アニメーション WebP は現在の主要なブラウザでは殆ど対応されていますが、古いバージョンのブラウザでは再生されない場合があります。ご注意ください。

続きを読む

カテゴリー: OPTPiX SpriteStudio | タグ: , , | 2021/12/16 更新

画像容量を小さくする方法:第3回 画像フォーマットの種類と適性

ウェブ担当の嶋です。

画像容量を小さくする方法、前回は画像サイズについての基礎知識やピクセル密度についてご紹介しました。画像の最適化処理は主にPCで行うことになると思いますが、それを見る環境がスマートフォンの場合はリサイズする場合も気を使わないといけない、といったものでした。

さて、画像のサイズが決まったら今度は画像ファイルとして保存する作業を行います。見た目は同じ画像でも、デジタルの世界ではそのフォーマットはいくつかの種類があります。それぞれの特長、得手不得手などをご紹介していきます。

続きを読む

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