画像容量を小さくする方法 第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 更新

SpriteStudioのカスタムシェーダー機能 3つの制作事例をご紹介

こんにちは、SpriteStudio エバンジェリストの池田陽朗です。

今回はSpriteStudio Ver.6.4から搭載されている「カスタムシェーダー機能」について制作例を3つご紹介します。 皆さまのご制作のヒントになれば嬉しいです。

※ OPTPiX SpriteStudioのインストールパッケージにカスタムシェーダーファイルは同梱されておりません。OPTPiX ヘルプセンターでサンプルのシェーダーファイルを配布していますのでご活用ください。

カスタムシェーダー機能とは?

「シェーダー」の意味はツールによって異なりますが、SpriteStudioにおけるカスタムシェーダー機能は素材に対して様々な効果を付与する機能になります。

図の左上がオリジナルのアニメーションです。他のアニメーションはSpriteStudioのカスタムシェーダー機能でそれぞれ別の効果を与えています。

効果を与えたいパーツを選択しアトリビュートウィンドウから各効果を選択できます。アトリビュートウィンドウにシェーダーの項目が無い場合は、メインメニューの「ファイル」→「プロジェクト設定」→「互換性」→「再生環境の指定」からシェーダーのチェックボックスを入力してください。 続きを読む

カテゴリー: OPTPiX SpriteStudio |

CRI・ミドルウェア との合併にあたって――株式会社ウェブテクノロジ 代表取締役 小高輝真からのご挨拶

ウェブテクノロジは今年の2月、創立30周年を迎えることができました。
長きにわたり我々を支えてくださったお客様、関係者の皆様のおかげと感謝しています。
学生時代、「自社製品」で身を立てることを夢見て起業し、仲間を得、幸運にも恵まれ、その夢を叶えることができました。

そこにとどまることなく、次なる飛躍のために、2018年にCRIグループにジョイン。そしてさらに企画力、開発力、営業力を強化するため、ウェブテクノロジは2021年10月1日より、CRI・ミドルウェアと統合し、OPTPiX(オプトピクス)シリーズを推進する事業部門として、リスタートを切ります。

メンバー一同、これからもこの言葉を心に抱きながら、チャレンジし続けます。

『クリエイターを笑顔に』

株式会社ウェブテクノロジ 代表取締役 小高輝真

カテゴリー: ウェブテクノロジ |

画像容量を小さくする方法 番外編:軽いページで大きい画像を見せる方法

ウェブ担当の嶋です。

シリーズ「画像容量を小さくする方法」、第3回までは画像の基礎知識、画像サイズ、フォーマットなどの話を進めてきました。

インターネット経由で画像をキレイに速く表示させるには、という観点で進めてきましたが、時にはECサイトの商品画像や細かい図表など「大きい画像サイズで見せたい」「原寸大で見せたい」ということもあると思います。

単純にページ内に大きい画像を埋め込むだけでは、画像1枚で大きなデータ転送が発生してしまい、ページの表示速度やレスポンスに影響を及ぼします。また、Page Speed InsightGTmetrixなどの表示速度計測サイトでも評価が大きく下がってしまいます。

今回はいくつかのケースを想定し、対応を考えてみたいと思います。

続きを読む

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