ウェブ担当の嶋です。
シリーズ「画像容量を小さくする方法」、第3回までは画像の基礎知識、画像サイズ、フォーマットなどの話を進めてきました。
インターネット経由で画像をキレイに速く表示させるには、という観点で進めてきましたが、時にはECサイトの商品画像や細かい図表など「大きい画像サイズで見せたい」「原寸大で見せたい」ということもあると思います。
単純にページ内に大きい画像を埋め込むだけでは、画像1枚で大きなデータ転送が発生してしまい、ページの表示速度やレスポンスに影響を及ぼします。また、Page Speed InsightやGTmetrixなどの表示速度計測サイトでも評価が大きく下がってしまいます。
今回はいくつかのケースを想定し、対応を考えてみたいと思います。
ウェブ担当の嶋です。
画像容量を小さくする方法、前回は画像サイズについての基礎知識やピクセル密度についてご紹介しました。画像の最適化処理は主にPCで行うことになると思いますが、それを見る環境がスマートフォンの場合はリサイズする場合も気を使わないといけない、といったものでした。
さて、画像のサイズが決まったら今度は画像ファイルとして保存する作業を行います。見た目は同じ画像でも、デジタルの世界ではそのフォーマットはいくつかの種類があります。それぞれの特長、得手不得手などをご紹介していきます。
ウェブ担当の嶋です。
画像容量を小さくする方法、第1回では画像容量をなぜ小さくする必要があるのかについて述べました。回線速度や端末のスペックが進化した現在でも、画像容量は使用用途に合わせて最適化する必要があります。
しかし、「画像を最適化しましょう」と言うことは簡単ですが、具体的にどういう形で最適化すればよいのでしょうか。
今回は画像の最適化作業の最初の段階として「画像サイズ」の調整についてお話いたします。
ウェブ担当の嶋です。
本ブログに「画像容量を小さくする方法」というエントリーの投稿があります。10年も前の記事なのですが、検索経由でページにたどり着く方が結構いらっしゃるようで、今でもアクセスが多い記事になっています。
10年前といえばiPhoneがまだ4S、スマホの回線も3Gが主流だった時代。改めて見てみるとエントリー内にも「816✕612はブログで表示するには大きすぎる」というように今ではちょっと違和感を感じる内容も記載されています。
年を追うごとにスマホのカメラで撮影する画像の容量やネット経由で取得するデータ容量もどんどん大きくなっています。それとともにスマホは5Gの普及が始まりましたし、増設用のmicroSDカードも一昔前のノートPCのHDD並みの容量になりました。
「もう画像容量なんて気にしなくても別にいいんじゃない？」
答えはNoです。
そもそも気にしなくていいなら「画像容量を小さくする方法」というページのアクセス数が伸びるわけがなく……。
画像を何に使うのかにもよりますが、通信速度が高速になったり、端末のスペックが向上した今だからこそ、改めて画像容量を減らすことの重要性が注目されていると言っていいでしょう。単に減らすだけではなく、画像容量をうまく減らす、と言ったほうがいいかもしれません。
以前の記事のアップデートの意味も含め、新しい情報も加えた上で何回かに分けて掲載していきたいと思います。第一回の今回は画像容量に関する基礎知識についてお送りします。
こんにちは。ウェブテクノロジ開発部の山崎です。
まずは下の画像をご覧ください。
「Before」と「After」の写真が3秒ごとに切り替わり表示されていますか？
以下の写真は OPTPiX WebFree のフィルター機能「エンハンストフィルター」の紹介用に、漫画作成ソフト「コミPo!」 のイベントでナビゲーターを担当して頂いている越谷先生のモデルの方にプライベート写真をご提供いただきました。ありがとうございました。
さて、「Before」が提供いただいたオリジナルの写真です。「After」がOPTPiX WebFree のエンハンストフィルターを通した写真です。
明るさやクッキリ具合が変わっているところがご覧いただけると思います。
ソーシャルネットワークの利用が増え、さらにスマートフォンなどで気軽に写真が撮れる状況も相まって、ブログやTwitterなどに写真を投稿する人もどんどん増えているようです。
気軽に公開できるのはよいのですが、撮った写真をそのままでは、ちょっと被写体が小さかったり、
横になって写っていたり、関係の無いところが写っていたり、暗くてよくわからなかったり、・・・あとすこし変えられれば公開できるのに・・・と、あと一歩のところでためらってしまった経験はありませんか？
そんな時に使ってほしいサービスがこちら
無料画像加工サービス「OPTPiX WebFree」
写真の中から必要な所だけを切り抜いたり(トリミング)90度回転させたり、縦横サイズを拡大したり、縮小したり。
そして、どんな写真でもおまかせの変換の「エンハンストフィルター」がオススメです。
料理の写真などを美味しく変換しますし、顔の写真もクッキリとお見せします。
特に、はじめの画像のような料理の写真で威力を発揮します。
「せっかく撮ったのに、ちょっと暗いんだよね」と感じたら、エンハンストフィルターを使ってみてください。
クッキリと明るく！そして美味しそうに写真を加工します。しかも無料でご利用いただけます。
ぜひ、お試しください。
