超・初心者のAdobe Cloudデザイン制作

私はメールのやり取りなどしている時に、ファイルが大きすぎて添付出来なかった経験が多々あります。

 

どうしても大きいファイルを送る場合の方法もありますが、ここではファイル容量と画像圧縮の必要性について考えてみましょう。

このサイトを例にとって画像のファイル容量について話します。

このページのサムネイルの使用している画像は、AdobeStockで月々１０点まで自由に使用できる著作権フリーの画像です。

 

ちなみに月々の支払額は3480円ですので、一枚あたり348円になります。

もっと安くで安全な著作権フリー画像を使いたい人は、ACがお勧めです。

 

画像イメージを探す時には Adobe Stockにアクセスして、キーワードを入れて検索します。

今日は画像の圧縮についての記事なので「圧縮」と入れてみました。

 

 

図は画面キャプチャしたものです。

このキャプチャした画像も案外ファイル容量が大きいのです。

ファイル容量は軽いほどページの読み込み速度が早くなりますが、諸説ある中でも400KB（キロバイト）以下が良いとも言われています。

その10倍以上もの容量がこのキャプチャした画像なんです。

 

 

フォトショップで開き、上部のメニューバーから「イメージ→画像解像度」をキャプチャしてみました。

赤枠の数値が画像サイズ、4.23M=4230KBとありますので、軽量化した画像の目標の10倍以上あることがわかります。

確かに２７インチや３０インチの画面で見たらある程度の解像度はあったほうが綺麗なんですが、写真展や写真のギャラリーサイトを見るわけではないので、このサイトのような文字情報の方が多い、いわゆる一般的なサイトでは１枚の画像が4MB＝4000KBもいらないと思います。

パソコンのスペックもかなり個人差があり、また通信環境も個人差がかなりあります。

スマホの3Gで見ている人見れば、5年前の古いスマホで見ている人もいるかも知れません。

 

では実際に同じ画像を圧縮して画質が著しく劣化するかどうか実験してみましょう。

この図は4230KBあった画像を一気に174KBまで圧縮してみました。

それが次に出てくる2つの画像です。

 

 

 

2つの画像は上が4230KBで、下が174KBですが、見た目にはさほど劣化が気になりませんが、実際は２４分の1のデーター量となっており、超軽量化しています。

サイト上で見てみると、「クリエイティブ・・・」という中央の白文字が若干滲んでいますので、気になる場合は、圧縮率を少し高くするなど工夫が必要です。

しかし画像のみをイメージとして載せる場合は、多少文字が滲んでいても気にならないという判断もありですね！？

軽量化する第二の理由は、ホームページはサーバーというデーターの保管庫に画像やその他のHP構成要素となるデーターを保存しておりますが、レンタルしているサーバーにも上限があり、金額に比例して保存容量が決められています。

つまりランニングコストとデーター圧縮は密接に関係しています。

圧縮するほど沢山のデーターを安くで保管できるというわけです。

読み込みの速度の問題だけでは無くて、サーバーへの容量も負担が増えていきますので、キャプチャした画像も、Adobe Stockで購入しダウンロードした画像もサイトに載せたり、メールで送る際にも出来るだけ軽い方が良いという結論になります。

 

参考までにこのページで使用しているアイキャッチ画像も、サンプルとして圧縮前と圧縮後の比較したものを載せておきます。

次に出てくる卵の画像もダウンロードした状態では、3888pxの2592pxあり1700KBでしたので、フォトショップで数字を入力して、サイズを3888px→1200px程度に縮小しつつ、画質も40%まで圧縮しています。

結果的にフォトショップの数字を入れた状態の2700KB→68KBまで圧縮しています。

実に３９分の１の容量に圧縮してあります。

2つの画像のうち数字の入っていない卵の画像はAdobeStockからダウンロードしただけの画像ですので、圧縮は0で元画像は1700です。

数字を入力しただけで2700KBになってしまっています。

それでは上段と下段の画像を比較して見て下さい。

上段と下段の画質に著しい劣化がありますか？

 

 

 

 

フォトショップで数字を後付けで入れましたので、PSDファイル形式では28000KBあります。

このようにレイヤーを多く重ねたPSDファイルは容量がどんどん大きくなるので、メールなどで送る際に注意が必要です。

冒頭でもお話ししましたが、大容量のメール添付ファイルに制限がかかって送れないことも多々あります。

Gmailでも50000KB=50MB程度だったような気がしますし、他のメールソフトではそれ以下だったりします。

画質の劣化も気にならない程度であれば、サイトにアクセスした時のページの読み込み速度が格段に早くなり、尚且つ画像の圧縮を覚えることでメールに添付したり、ホームページにアップロードしたりした時の負担が軽減されるとしたら画像を圧縮する価値は大きいと言えます。

 

圧縮の方法は様々なアプリもありますが、フォトショップの圧縮はおすすめです。

次の画像の赤枠の箇所が主な調整項目です。

フォトショップで「書き出し→web用に保存」でファイル形式をjeg圧縮は40%前後、ファイルの大きさも必要な大きさまで縮小することをやってみると劇的にファイル容量が軽量化できます。

 

これをやらないでメールで大量のデーターを送ったりするとダウンロードする相手も時間がかかってしまったり、データー容量をたくさん使い切ってしまったり思わぬ迷惑をかけてしまうこともありますので気をつけたいところです。

スマホで見せる程度であれば幅は1000px前後あれば十分でしょう。

今回は3888pxを1200pxに圧縮しました。

 

まとめ

 

いかがでしたか？

画像を圧縮すことは自分のとっても相手にとっても大切なことであると思います。

データを快適にやり取りするためにも必要な技術であると同時に、こうしてサイトを運営したり、閲覧している人のユーザビリティを考慮した時にも大切な方法論ではないでしょうか？

用途に合わせて使い分け、必要なだけ圧縮することで心地よい関係が保てるのではないかと思います。

また、画像だけではなくて動画も圧縮する方法があって、画像と同じようにサーバーへの負担増減、閲覧者にとってのユーザビリティの向上などに大きく影響してきます。

機会がありましたら動画制作や動画編集、そして動画の圧縮方法についても書いてみたいと思います。

皆様にとって何らかの参考になれば幸いです。