PAGE TOP ▲

大副業時代を生き残るためのブログ。切り売り労働からの脱却、少しでも収入をアップしたい方へ。

TOP 初心者が迷う画像の保存方法ついて

初心者が迷う画像の保存方法ついて

Webデザインを始めると画像の保存方法に
.jpg(ジェイペグ) .gif(ジフ) .png(ピング)
といった形式があることをご存知でしょうか。

Googleさんで「画像+使い分け」といったキーワードで検索すると
詳しく書いているサイトが結構あります。

難しい内容や技術的な事についてはそちらのサイトにお任せして
実際にどんな時にどの形式を使用するのかを説明(自己流)したいと思います。

昔は.pngがなかったので.jpgと.gifの2種類で使い分けていました。
写真の時は.jpg、文字やイラストは.gifといった感じです。

それぞれの形式ついて

.jpg(ジェイペグ)
グラデーションがなめらかに表示できるので写真などが綺麗に表示できます。
グラフとか線などのくっきりしているものはボヤケてしまうのでオススメしません。

.gif(ジフ)
くっきりした画像に適しているので、タイトルやイラストに向いています。
背景を透明にすることも可能です。
パラパラマンガのようにアニメーションすることもできますので
アイコンにも使われます。New!とかの点滅とか見たことないでしょうか。
グラデーション系は色が辺に表示されるのでオススメしません。

.png(ピング)
イメージとしては.jpgと.gifの中間くらい感です。
グラデーションもキレイに表示され背景も透明にできる点が良いのですが
画像が重たいのが難点です。
グラデーションのかかったロゴを背景を透明にしたいときに使用しています。

画像形式のまとめ

それぞれメリットデメリットがあるので最適なものを選ぶようにして下さい。

また、Photoshopでは画像を保存する時に
形式ごとに劣化具合を確認できるので便利な設計になっています。

写真は.jpg
イラストやアイコンは.gif
ロゴやキレイなアイコンは.png
と覚えておき、色が汚かったりしたときは
調整してみてはいかがでしょうか。

保管庫の関連記事一覧

タグ打ちとコーディングの違いについて。

2017年05月29日
タグとは何か。。。 まずは「タグ」とは何だろう?という所から説明します。タグとはHTMLで使用するもので例えば「こんにちは!」という文字をそのページのタイトルにしたい時 <title

ヒアリング の重要性を理解することでワンランク上がります。

2017年02月05日
ヒアリング の重要性 ヒアリング がWeb制作を行う上で最重要と考えています。段取り八分です。 例えばクライアントに確認する事が100項目あったとします。最初に全て確認しても、作業しながら

ハッキングにあったのでWordPressの運用をできるだけシンプルに考え直す。

2017年02月03日
ハッキング にあったサイトは現在ご覧頂いているこのサイトです。無事解決しているので運用を再開しているのですが、この機会にデザインも一新してみました。技術的な解決方法は色々なサイトで紹介していると思いま

ランサーズで経験を積む。

2017年02月02日
このサイトを見て頂いている方のほとんどは、未経験者や独学で勉強中の方が多いと思います。ただ実践を積み重ねないことには経験を積むことも出来ないが、経験がない人には実践を与えられる機会も少ないのが現実です

Youtubeのサムネイルの代わりに画像を貼り付ける

2016年12月17日
動画サムネイルの代わりにご自身で制作した画像を表示することが出来ます。これは動画の埋め込みタグ(iframe)をjsに流し込み画像をクリックしたら消え、動画を表示するという順序で動きます。 ※埋め込

専門学校やスクールを出ないとWebデザイナーなることは出来ないのか

2016年02月06日
この質問はWEBデザイナーを目指している方からだけではなくクライアントからも「やっぱりそういった学校卒業されたのですか?」という質問をよく受けます。 私の場合は独学でした 私のお話をさせて