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

ウェブ担当の嶋です。

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

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

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

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

続きを読む

カテゴリー: OPTPiX Labs | タグ: , , , , , | 2023/03/08 更新

SpriteStudioで1枚のイラストを動かすテクニック 第2弾 ろまゆくえさん編

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

今回は作家のろまゆくえさん(twitter)のイラスト作品をお借りしてSpriteStudioで制作したアニメーションのメイキングを解説します。 静止画のイラストをアニメーション化することで、新しい一面や世界観の広がりを表現することができます。 皆さまのご制作の参考になれば嬉しいです。

TITLE「月夜に舞う戦士」

Pixiv:https://www.pixiv.net/artworks/76827353

こちらのダイナミックで美麗なイラストをこのようにアニメーション化しました!(PCでモニタからはみ出してしまう方は動画の右下のフルスクリーンボタンを押してご覧ください)

続きを読む

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

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

ウェブ担当の嶋です。

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

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

続きを読む

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

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

ウェブ担当の嶋です。

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

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

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

続きを読む

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

SpriteStudioで1枚のイラストを動かすテクニック 第1弾いしいさん編

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

今回は作家のいしいさん(twitter)のイラスト作品をお借りしてSpriteStudioで制作したアニメーションのメイキングを解説します。 静止画のイラストをアニメーション化することで、新しい一面や世界観の広がりを表現することができます。 皆さまのご制作の参考になれば嬉しいです。

TITLE「そっちがその気なら」

こちらのイラストをこのようにアニメーション化しました!

続きを読む

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