その1Web制作こんにちは。ホームページ制作に関わっているとよく目にする拡張子。学生だったころ、「何が違うんだ?透明か不透明...?」とぼんやりした認識で作っていたことを思い出します。本日はそんなホームページの制作やデザインを始めたばかりの方に向けて、よく見る画像の保存形式とその特性を簡単にまとめてみました。ホームページ制作関連の仕事でよく目にするものは以下の3つになると思います。・jpg・png・gif(tiffやbmpなどもありますが、今回は取り扱いません。・jpg→圧縮率の調節ができる・png→背景の透過ができる・gif→アニメーションが作れるとなります。メリットがあるならば当然デメリットになる部分もあります。以下にもう少し詳しく説明していきましょう。これは一番目にする機会が多いのではないかと思います。写真もjpg、イラストもjpg。グラデーションにも強く、写真でもサイズ(=容量)を小さく抑えられます。その中でも特に便利なのが、自分で画像のサイズを調節できることだと思います。そのかわり、サイズが小さくなる(圧縮率が大きい)=画像が荒くなる、ということは覚えておかなければなりません。このような事が起こるかというと、このjpgという形式は保存するときに情報を削っているからなんです。圧縮しなければ、画像として必要のない情報を削るだけでいいのですが、あまりにも無理な圧縮をかけようとすると画像として必要な部分からも削ろうとします。その結果、滑らかな表現は失われ、ふちがギザギザとした、ざらっとした画像が出来上がります。jpgは保存をする度に圧縮をかけるため、再編集に向かないという点も覚えておかなければいけません。一度や二度ならばあまり気にすることはありませんが、何度も保存を繰りかえすとなると、最終的にできあっがった画像を見て「あれ...?この写真こんなに荒かったかな?」となる現象が起こりえます。jpgには頻度は少ないですが.jpegというものも出てきます。何が違うかというと特に大きな違いはなく、以前あった拡張子の3文字制限がなくなったから、というのが理由のようです。新世代のjpgですね。先ほども書いたように、そこまで頻繁には見かけませんので、ホームページ内でどちらかに統一ができていれば良いようです。jpgのメリット:サイズを小さく抑えられる、圧縮率を指定できるデメリット:保存の度に圧縮される、圧縮されると元に戻せない続いて.png。こちらは自由度の高い画像の作成が可能です。画素数に制限がないため、jpgと同じくグラデーションに強く、完全な透過から半透明まで、多様な画像が作れます。人物写真を切り抜いて色々な背景に合成したいというときや、キャラクター画像を作っていろんなところに置きたい、というときにはpngで保存しておけば大丈夫です。こちらはjpgと比べるとサイズがそれなりに大きくなります。写真は、劣化がない代償として、びっくりするようなサイズになったりします。これは上記のjpgの項でも書いた、保存の際に行う圧縮の仕方が違うためです。jpgがいらない情報をどんどん削ってしまうのに対し、このpngはいらない情報もしっかりと持っています。そのため、何度保存を繰り返しても画像が荒れず、圧縮しても元に戻るという特徴もありますが、そのぶんのサイズはどうしても大きくなるという事です。背景画像にはまだ不向きかもしませんが、ボタンやちょっとしたバナーなどではそんなに気にする程のサイズにはなりません。それはpngは元々web用に作られた形式だからだそうですよ。pngのメリット:透明に加え半透明もできる、圧縮しても戻せるデメリット:サイズが大きい最後に、.gif。最高画素数256色、透過、アニメーションが可能。アニメが作れるのが最大の特徴ですが、画素数に制限があるため、複雑な表現やグラデーションは苦手です。そのため、写真はもちろん、こまかなイラストも苦手だったりします。画素数の少ない簡単なものならサイズを小さく保存できるので、企業ロゴやベタのバナーなどはgifを使用する頻度が多いです。メリットがないかな...?と感じる方もいるかと思いますが、意外な利点があります。今ご覧になっているこの画面のキャプチャをとってみてください。それをjpg&gifと2種類保存してみると......!!gifはシャープな線描写に強いんです。文章と簡単な表程度の画面をそのままキャプチャして使いたい時などはgifで保存をすると良いと思います。gifのメリット:アニメーションがつくれる、シャープな線が出るデメリット:画素数の制限がある以上、今回はよく見る画像の保存形式とその特性についてのお話でした。次回はちょっと変わった画像の保存形式についてお話ししようと思います。まで一気通貫した完全オーダーメイドのWebコンサルティング。お客様のビジネスゴールに向けた戦略的コンサルティングを行います。ホームページ制作キレイなだけじゃない競合分析・サイト設計から更新・運用までトータルサポート。Web集客のプロが在籍しているアクシスだからこそ実現するデータに基づき最適化されたHPを制作します。あなたのサイトを丸裸にWebサイトの現状を正しく把握し、目指すべき姿とのギャップを知る。“2軸思考”であなたのWebサイトを丸裸にし、Webサイトで今何が起きているかを正しく把握します。最新情報をお届けメールアドレスを登録していただくと、おすすめ情報やアクシスブログの更新情報をお届けいたします。058-267-1430URL:https://www.axis-corp.com/お問い合わせはこちら私達は、お客様のインターネットからの売上・利益を最大化させるネット技術のプロフェッショナル集団です。WEBコンサルティング、集客、解析、ホームページ制作などさまざまなサービスを用いて、お客様にとって最適な状態を導き出します。すべてのお客様に、一流の結果をご提供いたします。CORPORATION。