ケーネット新潟のホームページ制作会社。スマホ対応、ネットショップ作成、SEO対策まで集客と成果が出るWeb戦略を提案。パンフレットウェブ画像の形式を使い分ける2017/04/27ご無沙汰ぶりです。何事もなかったかのように更新します。ウェブに掲載されている画像たち。見る側にはあんまり馴染のないお話かもしれませんが、同じように見えていても実は形式が違ったりしています。私たちはその使用用途や画像の内容において、適切な形式を選んで書き出ししています。今ウェブ上で主に使用されている画像形式は大きく分けて3つです。透明情報:なしアニメーション:なしデジカメなどで撮影した写真はこの形式が一般的です。JPG画像には【画質】が存在していて、この画質を抑えることで容量を削ることができます。具体的には以下のように画質が下がりすぎるとノイズが付加されることで汚く・荒く見えてしまうという欠点もあります。大体80以上あればキレイに見えますが、使われている色によっても容量が変わります。ちなみにもっとも劣化しやすい色は赤色です。色の境目がそこまではっきりしていない、写真のような色数の多い画像に向いている形式です。左から無圧縮・画質80・画質40。80はさほど見た目に差がありませんが、40になるとはっきりノイズが見えます。PNG(拡張子.png)今ウェブでJPGの次に使われているのがこのPNGではないでしょうか。PNGは、同じ拡張子でも更に3段階に形式が分かれています。透明情報:あり(255段階)アニメーション:なし色数256色+透明度255段階によって構成されています。色数が少ないので、グラデーションや写真などの画像を作るときは色の境目が見えてしまうという欠点がありますが、(→クリックしてみてください)透明度の表現が可能なため、比較的容量を絞って透明度情報を持った画像を表現できます。透明情報:なしアニメーション:なし透明化情報はありませんが、劣化無しで1670万色を再現できる形式。JPGのように圧縮が存在しないので、色数が多ければ多いほど重たくなってしまう形式です。大きな写真には不向きかもしれません。透明情報:あり(255段階)アニメーション:なし1670万色を再現できて、更に透明度の概念もある形式。劣化がないので鮮やか且つ微細な透明度の表現が可能です。PNG24に更に透明度情報が加わるので、PNG24よりも重たくなります。大きな写真には不向きですが、グラデーションのあるアイコン等、透明度情報が必要で、且つ色数は抑えたくない場面で役立ちます。(→クリックしてみてください。透明化情報を持っています。透明情報:あり(有or無の2段階)アニメーション:ありPNG8の登場により、今はあまり見かけなくなった形式です。色数256色+透明化情報2段階(透明or不透明)。色数が少ないことと、透明化情報は、透明or不透明の2種類だけなので画像のふちが透明化している場合、ドットのギザギザが見えてしまう欠点があります。そのかわり、アニメーション情報を持つことが可能であり、且つ軽く表示が早いという利点があります。(画像は透明化情報を持ったgif形式の画像を、分かりやすくグレーの背景色へ乗せたもの)まとめ同じ表現でも、使う画像の形式によって軽いページにも重たいページにもなります。各画像形式によって得意なこと、不得意なことが異なりますので、使いたい画像によって形式を選ぶことが重要です。余談ですが今回説明しなかった新しい形式としてアニメーションPNG(APNG)というものも既に登場しています。FirefoxとSafariでしか表示しませんが、LINEのアニメーションスタンプなんかはこれらの形式で作られています。新年明けましておめでとうございます2019/12/122019年冬期休暇について2019/8/1ケーネットは、「ケーネット株式会社」と法人化になりました。私たちはお客様の事業の成功につながるホームページ制作・デザインをご提案いたします。ホームページを単なる宣伝物と終わらせないために...。見積り・ご相談は無料です。ホームページ制作実績ネットショップ開業実績チラシ・パンフレット他制作実績ケーネットとは?よくある質問スタッフブログ会社概要お知らせお問い合わせ。