こんにちは！
nyaです。
本日はこんなお悩みを解決していきます。
本記事の内容・圧縮＆リサイズができるツールをご紹介
・拡張子の使い分け方
圧縮＆リサイズができる無料ツールをご紹介
I LOVE IMG
画像の圧縮・リサイズには、上記のツールがオススメです。
ダウンロードの必要がなく、ブラウザ上ですぐにできるので簡単です。ブックマークしておくだけで無料で使用できます。
手順１ まずはリサイズ
圧縮をする前にまずは、リサイズを行います。
圧縮をした後にリサイズをしてしまうと、また圧縮をしないといけなくなってしまうので初めにリサイズをしておきます。
《リサイズ方法》
1 「画像のサイズ変更」を選択。
2 「画像を選択」をクリック。(画像をドロップしてきてもOKです。)
3 画像を選択したら、幅を1200pxに設定して「画像のサイズを変更」をクリック。
※必ず「縦横比を維持」にチェックが入っている状態を確認してください。
4 画面が切り替わったら自動でダウンロードしてくれます。
※ダウンロードされない場合は、「サイズ変更された画像をダウンロード」をクリックしてください。
手順２ 画像を圧縮
リサイズができたら、次は圧縮します。
《圧縮方法》
1 「画像の圧縮」を選択。
2 「画像を選択」をクリック。(画像をドロップしてきてもOKです。)
3 画像を選択したら、「画像の圧縮」をクリック。
4 画面が切り替わったら自動でダウンロードしてくれます。
※ダウンロードされない場合は、「サイズ変更された画像をダウンロード」をクリックしてください。
画像の圧縮を忘れてしまうと、通常の何倍も重い状態になってしまうので、サイト表示速度にかなり影響が出てしまいます。必ず行うようにしてくださいね。
拡張子を使い分けてページを最適化しよう
拡張子とはなんぞやと言う方向けに簡単に説明しますね。
拡張子とは、ファイルの末尾についている英字のことで、
・「.jpeg」 - 画像ファイル
・「.png」 - 画像ファイル
・「.mp4」 - 動画ファイル
・「.mp3」 - 音楽ファイル
よく使うのは以上の通りです。コレだけではなく他にもたくさんの拡張子があります。
ファイルの拡張子を見るだけで、そのファイルがどんなファイルなのかを判別することができます。
画像ファイルの拡張子だけでも大きく分けて「JPEG」「PNG」「GIF」の3種類があります。この拡張子を使い分けることで、いかに画像を綺麗に見せるか、容量を軽くするかに関わってきます。
今回は「JPEG」「PNG」のメリット、デメリットを解説していきます。
「JPEG」「PNG」を比較
JPEG
「.jpg」「.jpeg」という拡張子で、画像が写真の場合やグラデーションが多いイラストの場合に用いられます。
メリット
・フルカラーを使用できる(約1670万色)
・写真やグラデーションなど色鮮やかなものを綺麗に表示させる
・高画質のままファイルを圧縮できる
デメリット
・輪郭のはっきりしたイラストなどの画像はぼやける
・背景を透過できない
・何度も編集をする度に画質が劣化する
JPEGは綺麗な状態でPNGより軽くできるので大きいサイズの写真に適しています。
PNG
「.png」は、JPEGと反対にイラストや、文字などが含まれる画像に用いられます。PNGには、「PNG-8」と「PNG-24」があり、色数を制限することで調整しています。
メリット(PNG-24の場合)
・フルカラーを使用できる(約1670万色)
・写真などをJPEG以上に綺麗に表示させる
・加工しても劣化せず綺麗な状態を保つことができる
デメリット
・PNG-24の場合だと容量が大きくなってしまう
・古いブラウザだと表示されない場合がある
JPEGは綺麗な状態でPNGより軽くできるので大きいサイズの写真に適しています。普段使いではJPEGを使用して、イラストやグラフを掲載したいときはPNGを使うといいかもしれませんね。
まとめ
いかがだったでしょうか。
こんな感じで私はいつも画像のリサイズ、圧縮を行っています。
画像の容量が重いだけでせっかくクリックしてくれた読者さんが読むのを諦めてしまう可能性があるんです。
画像にも工夫をしていってくださいね。
[nlink url=”https://nyaaalog.com/blog-6step”]
コメント