アイコンの蜜蜂のファイル形式がjpegだったと気付いてpngに置き換えることにした 結城永人 -2016年9月29日 一般的にイラストや小さな画像はjpegよりもpngのファイル形式の方がが劣化が少ないからアイコンには向いていた。 pngファイルのアイコンがjpegファイルのものよりも嬉しい 僕が蜜蜂の絵を作成して自分のために使うようになったのは数年前からだけれども画像のファイル形式をまだ大して気にかけてなかったんだ。気付くとまさかのjpegだったので、思い立って直ぐにpngで保存し直してアップロードしてみたら幾分か画質が良くなった感じがする。 Tumblrのアバターもファイル形式がjpegからpngに置き換えられるや綺麗さが増しながら発色も上がったのではないかと嬉しさが込み上げている。 そしてブログのヘッダーの背景の公園の森の写真と共にアイコンの蜜蜂を戻すことにした。 PNGがアイコンに適する理由 PNG形式は、アイコン画像として非常に多く利用されています。その理由を、JPEG形式との比較を交えながら詳しく解説します。 PNGがアイコンに適している理由 透過処理:PNGは画像の一部を透明にする「透過処理」が可能です。これにより、アイコンを他の画像や背景の上に重ねても違和感なく表示できます。例えば、ウェブサイトのメニューバーに配置するアイコンは、背景が透過されていることで、まるでメニューバーの一部に溶け込むように表示されます。 高品質な画像:PNGは可逆圧縮であり、画像の圧縮・解凍を繰り返しても画質の劣化がほとんど起こりません。そのため、細かい線やグラデーションなど、高品質な画像を保持する必要があるアイコンに最適です。 色数の多さ:JPEGは圧縮率を上げるために色数を減らすため、グラデーションや細かい色の変化がわかりにくくなることがあります。一方、PNGは色数の制限が少なく、より滑らかなグラデーションや鮮やかな色を表現できます。 Webでの扱いやすさ:PNGはWebブラウザでの表示に最適化されており、多くのブラウザでスムーズに表示されます。また、PNG-8という形式では、GIF形式のようにアニメーションを作成することも可能です。 JPEGとの比較 特徴 PNG JPEG 透過処理 可能 不可 画質 高品質 圧縮率が高いほど画質が低下 色数 豊富 圧縮率が高いほど色数が減る ファイルサイズ 比較的大きい 比較的小さい 用途 アイコン、ロゴ、イラストなど 写真、グラフィックデザインなど PNGを選ぶべきケース アイコン、ロゴ、イラストなど、高品質な画像が必要な場合 画像の一部を透明にしたい場合 Webサイトで使用する場合 JPEGを選ぶべきケース 写真など、多くの色を含んだ画像で、ファイルサイズを小さくしたい場合 画質の劣化をある程度許容できる場合 どちらを選ぶか迷った時は Webサイトのアイコン:PNG 印刷物用の画像:JPEG (高画質が必要な場合はPNG) その他 PNGには、PNG-8とPNG-24という2つの種類があります。PNG-8は色数が256色に制限されているため、ファイルサイズが小さく、GIF形式の代替として使用できます。PNG-24は色数に制限がないため、より高品質な画像を作成できます。 最近では、WebPという新しい画像形式も登場しており、PNGよりもさらに高圧縮率で高画質を実現できます。 ご自身の用途に合わせて、最適な画像形式を選択してください。 まとめ PNGは、透過処理が可能で、高品質な画像を保持できるため、アイコン画像として非常に適しています。特に、Webサイトで使用するアイコンは、PNG形式が最も推奨されます。ただし、ファイルサイズがJPEGよりも大きくなる傾向があるため、ファイルサイズが非常に重要な場合は、JPEG形式との使い分けを検討する必要があります。 ブログ自体の魅力を上げられるとアクセスアップに繋がってくれそうだ アクセスが伸び切れないし、訪問者の直帰率や滞在時間も良くならないので、先日、「記事が何よりも目立つようにヘッダーも添え物でしかないふうに」といったばかりだけれどもブログ自体の魅力こそ表すべきなのかも知れなかった。 ホームページから来る人よりもGoogle検索から来る人が多くて僕が何者かも良く知らないわけだから記事の前に少しでもブログのデザインを通してイメージを持って貰うことが大切だと感じ出して来た。 懐かしいといえば懐かしくて半年以上はやらずにいたけど、しかし誰も来てなかった頃のデザインで改めてブログのアクセスがどうなるかも楽しみだ。自分では本当に気に入っているから是非とも期待したいと思うし、アイコンの蜜蜂の画質が僅かにでも上がったかぎり、もはや試さずにはいられなくなった。 関連ページArcticonsという綺麗で便利なアイコンパック|AndroidGoogleの誕生祝いでプロフィールアイコンに風船と紙吹雪が飛んで来た Flickrのアイコンとヘッダー画像の設定方法サイトのファビコンとウェブクリップアイコンの汎用的な設定とBloggerでの導入手順Tumblrのロゴやアイコンの利用規約の確認 コメント 新しい投稿 前の投稿
コメント