画像容量」タグアーカイブ

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

ウェブ担当の嶋です。

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

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

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

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

続きを読む

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

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

ウェブ担当の嶋です。

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

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

続きを読む

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

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

ウェブ担当の嶋です。

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

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

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

続きを読む

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

画像容量を小さくする方法:第1回 画像容量に関する基礎知識

ウェブ担当の嶋です。

本ブログに「画像容量を小さくする方法」というエントリーの投稿があります。10年も前の記事なのですが、検索経由でページにたどり着く方が結構いらっしゃるようで、今でもアクセスが多い記事になっています。

10年前といえばiPhoneがまだ4S、スマホの回線も3Gが主流だった時代。改めて見てみるとエントリー内にも「816✕612はブログで表示するには大きすぎる」というように今ではちょっと違和感を感じる内容も記載されています。

年を追うごとにスマホのカメラで撮影する画像の容量やネット経由で取得するデータ容量もどんどん大きくなっています。それとともにスマホは5Gの普及が始まりましたし、増設用のmicroSDカードも一昔前のノートPCのHDD並みの容量になりました。

「もう画像容量なんて気にしなくても別にいいんじゃない?」

答えはNoです。
そもそも気にしなくていいなら「画像容量を小さくする方法」というページのアクセス数が伸びるわけがなく……。

画像を何に使うのかにもよりますが、通信速度が高速になったり、端末のスペックが向上した今だからこそ、改めて画像容量を減らすことの重要性が注目されていると言っていいでしょう。単に減らすだけではなく、画像容量をうまく減らす、と言ったほうがいいかもしれません。

以前の記事のアップデートの意味も含め、新しい情報も加えた上で何回かに分けて掲載していきたいと思います。第一回の今回は画像容量に関する基礎知識についてお送りします。

続きを読む

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

キャプチャ画面はJPEGではなくインデックスPNGで

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

仕事でもプライベートでも、
いつもお世話になっているGoogleさんにお伝えしたいことがありまして、
この場を借りることにしました。

まずは以下のキャプチャ画面を見ていただきたいのですが、
Googleさんの検索サイトで「ウェブテクノロジ」と入力したあとで、
検索結果に表れる虫眼鏡のアイコンをクリックすると、
対象サイトのキャプチャ画面(サムネイル画像)が表示されます。

Googleキャプチャ画面

このキャプチャ画面の画像ですが・・・ちょっと荒すぎませんか? (どう思われますか?みなさん)

わたしはJPEGのモスキートノイズが・・・気になって仕方がないのです(職業病??)。

JPEG画像の圧縮率を高くすると、どうしてもこうなる傾向があるのはわかりますが、
特に「キャプチャ画面の場合はJPEG画像ではなくインデックスPNGを使ってください!」とお伝えしたいのです。

特に、弊社の製品に組み込まれている減色エンジンをぜひご検討いただきたい!と思うのです。

Google(の中のひと)さま、もしこのブログをご覧になりましたら、
弊社のツール・・・「OPTPiX imestaシリーズ」をぜひ一度お試しください。

ちなみに、弊社のWebページを「OPTPiX imesta」を使ってインデックスPNGに変換すると・・・

キャプチャ画像のPNGとJPEGの比較画像

同じ画像容量でも、インデックスPNGとJPEGでこれだけ違います。
左がインデックスPNG、右がJPEGのキャプチャ画像になります。

 

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