アルファチャンネル」タグアーカイブ

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

ウェブ担当の嶋です。

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

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

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

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

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

Twitter投稿時にJPEGに変換されないPNG画像の条件

ウェブ担当の嶋です。

Twitter社は、「2019年2月11日以降、投稿画像の処理方法を変更した」とアナウンスしました。

これまでも、Twitterに投稿したPNG画像はサーバー側で加工されてしまうと言われてきましたが、今回はTwitter社が開発者フォーラムで「サーバー側で画像処理するよ」と明言したことになります。

英文で、かつ技術的な内容を含むため非常に難解ですが、かいつまんで言うと

  • 投稿画像が多く、それを保存しておくサーバーの維持が大変
  • 特に高解像度のPNGはファイルサイズが大きく負担が大きい
  • そのため大きいPNG画像はJPEGに変換することにした

という感じです。

普段の投稿がスマホで撮った猫や美味しそうなケーキの写真という方々には影響のない話ですが、イラストレーターやデザイナーさんにとっては重要なアナウンスです。

Twitter社もすべてのPNG画像を変換します、と言ったわけではありません。特定の条件を満たすPNG画像は変換をせずにそのまま投稿できるようにしたそうです。

実は今回のケース、一部の人にとっては「PNG投稿時の制限緩和」にも該当する内容になっています。このエントリーではその特定の条件についての解説と、投稿できるPNG画像の作成方法についてご説明します。

なお、断りのない限り本エントリーの情報は2019年3月現在の情報、動作を元に作成しています。

続きを読む

カテゴリー: Web | タグ: , , , , , | 2020/06/16 更新

Chromeの対応で活用の幅が広がりそうなアニメーション画像「APNG」についてまとめてみました

ウェブ担当の嶋です。

先日Google ChromeやOperaがAPNG(アニメーションPNG)に対応しました。ブラウザでアニメーション画像を表示する場合、アニメーションGIFやmp4などの動画ファイル、そしてHTML5を利用したアニメーションなどが選択肢にあがりますが、これに一つフォーマットが追加されたということになります。

なぜ今APNGなのか。そしてアニメーション画像としてAPNGを使うメリットはどこにあるのか、ちょっとまとめてみました。

※ 本エントリーではAPNG画像を使用しています。対応していないブラウザ(Internet Explorer等)で見た場合はアニメーションしない静止画として表示されますのであらかじめご了承下さい。また、本エントリーの情報は2017年7月現在の情報です。 続きを読む

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

Unity 5 で高品質な PVRTC テクスチャを使用する方法

Unity 5 では、テクスチャファイルの管理方法が変更されました。そのため、Unity 4 以前と同じ方法では、外部ツールで圧縮済みのテクスチャファイルをそのまま読み込んで使用することができなくなりました。

これでは、せっかく OPTPiX imésta 7 for Mobile & Social (以下、imésta) で作成したPVRTCテクスチャも、Unity 5 ではその高品質を活かすことができません。

そこで今回は、imésta で作成した PVRTC テクスチャをそのままUnity 5 で使用する手順をご紹介します。

※ この方法は2016年8月現在公開されているUnity 5での方法です。今後アップデートなどで下記の方法が使用できなくなる可能性もあります。

続きを読む

カテゴリー: OPTPiX ClearPVRTC for Unity 5 | タグ: , , , , | 2020/06/16 更新

テクスチャ圧縮フォーマットPVRTCのTips CEDEC2013復習編(2)

ウェブテクノロジ R&D部の上田です。

今回は前回に引き続いて、CEDEC2013の公募セッションから、テクスチャ圧縮フォーマットのPVRTCに関するTipsをピックアップしてご紹介したいと思います。
続きを読む

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