画像の背景色を透明にする簡単な方法を紹介します！

webデザイン作業を行っていると、イラストや文字を画像として配置することが多々あると思います。

その際、画像の背景を透明にしたいのに白くなってしまうことはありませんか？

それは画像のファイル形式に問題があります。実はファイル形式によって画像の背景色が異なるのです。

今回は画像の背景色を透明にする方法をみなさんに紹介したいと思います。

背景が透明なファイル形式を選択する

画像のファイル形式にはいくつか種類があり、JPEG PNG SVGのファイル形式をweb制作でよく使用します。

ファイル形式によって背景色が異なり、JPEGは背景が白色になります。そして背景が透明になるファイル形式はPNGです。

そのため背景色を透明にしたい画像はPNG形式で保存すれば良いのです。

しかしPNG形式は画像の容量が大きくなるので、多くの画像をPNG形式に保存することはおすすめできません。

というのも、容量の大きい画像を多く使用するとサイト全体の容量が増えてしまいます。

サイト全体の容量が増えてしまうと、サイトのページ読み込みに時間がかかってしまい、ユーザーの離反やサイト評価の低下に繋がります。

ページ読み込み速度はサイト評価にとても大きな影響を及ぼすので、画像の容量は出来るだけ抑えることを心がけてください。

画像の容量を抑えるには、画像圧縮ツールの使用をおすすめします。僕はI love IMGというツールを使用しています。

こちらのツールはアップロードした画像を無料で圧縮してくれます。

このブログ記事に使用している画像もこのツールを使用してから貼り付けております。

PNG形式の画像を使用する際は、このツールで圧縮してから使用ください。

最後に

以上が画像の背景を透明にする方法の紹介でした。画像形式を変更するだけで可能です。

ただしPNG形式は画像容量を多く使用するため、圧縮してから使用してください！