事務スタッフの瀬井です。
今回は、前回に引き続き『ホームページ制作時に便利な方法』のお話です。
みなさんは写真やイラストはどんな画像ファイル形式で保存していますか？
ひとことで画像と言っても、データの表示方法やデータを小さくする方法は様々です。
それらを決めるのが「画像ファイル形式」です。
画像ファイルといっても種類は色々あって、それぞれにメリット・デメリットがあるので今回は『画像の出力方法に関して』お話していきたいと思います。
それぞれの画像の得意な形式で出力する
今回は、たくさんある画層ファイルの中からJPG、PNG、GIFの特徴をご説明していきます。
.jpg
写真やグラデーションが得意です。
写真はよほどの事情がない限りjpgにして下さい。
逆にマークや単色の画像は、高画質にしないとノイズが走ります。
.png
マークや単色、文字等が得意です。
境目がくっきりしています。
この形式で写真を書き出すと、すごく容量が重たいです。
あと透過ができます。半透明ができる唯一の形式です。
.gif
pngが出てくるまではロゴや透明はgifが基本でした。
現在ではあまり効率的ではないので通常使いません。
ただし、アニメーションができる唯一の形式（この中では）なので、例外的にアニメーションでは使用することがあります。
比較画像で確認してみよう！
では、実際に比較画像で確認してみましょう。
比較画像：写真
 |
 |
 |
| jpg(4.47kb) 汚い | gif(9.29kb) | png(37.8kb) |
比較画像：ロゴ
 |
 |
 |
| jpg(2.35kb) 汚い | gif(3.41kb) | png(1.31kb) |
※jpgはノイズが分かるようあえて低画質にしています
比較してみると、差は歴然ですね。
用途によっての向き不向きを理解して上手に活用しましょう。
透過しないといけないデザインの場合はどうしたらいい？
jpgを透過しないといけないデザインの場合、通常は.pngファイルじゃないと。。。と思われるかも知れませんが、以下の場合等は、jpgを使用してもなんとかなります！
↑円形に切り抜く場合は 画像本体に border-radius: 50％; のcssを付けることで、丸く加工できます。
border等をつければ縁も円形にそって配置できます。
↑の画像は下にテクスチャがあるので透過にしないといけない…と思いきや
↓下のテクスチャごとjpgにしちゃいます。
かなり頑張って見ると境目がわかりますが、言われないと気づかないレベル！！
画像サイズは「WEB用から保存」で基本100kb以下に抑える。巨大な画像でも500kb以下で！
jpgは写真が得意ですが、通常の「ファイルから保存」で画質MAXで保存したりすると、とんでもない大容量になったりします。
必ずjpgファイルは、「WEBから保存」の「やや高画質」で保存して下さい。
「WEBから保存」って何が違うの？
通常の”ファイルから保存”の場合、解像度やexif情報等、余分な情報を引き連れたまま保存されます。
しかしWEBでそんな情報は必要ないばかりか、適切でない情報を第三者に渡してしまう可能性もあります。
軽量化と機密保持の点からも、必ず「WEBから保存」を行って下さい。
ちなみにショートカットは「Ctrl+Shift+Alt+S」です。 押しにくいですね！！笑
ヒーロー画像や背景画像等、画面いっぱいに拡大する画像は中画質でも大丈夫かもしれません。
眼でよくみて許せるギリギリまで画質を下げましょう！
pngはphotoshopより軽くできる
「WEB用から保存」したpngはそれなりに軽量化されてるんですが、どういう魔法なのか更にそれより軽くできます。大幅に。
 |
 |
| png 6.19kb | ツール使用後 2.99kb |
いかがでしょうか？
かなり拡大して確認しても、違いがわからないほど。。
そんな魔法のツール【tinyng】はこちら ↓↓
https://tinypng.com/
毎回使用するのは大変かもしれませんが、300pxを超えるpngや50kbを超えるpngの大きい画像の場合、透過等の関係でやむを得ず写真をpngにする場合は必ず使ってみられるといいかもしれませんね。
画像の軽量化は、ホームページ表示速度に影響するのはご存知かと思いますが、Googleも評価対象にしています。
1つ1つの画像の削減量は小さいかもしれませんが、塵も積もれば山となり！
是非ご活用ください。
