フォローする

画質の劣化による差し戻しについて

 

概要

このページでは、いわゆる画質(画面解像度)が低く、画像が粗いことによる、見栄えの悪さから行われる差し戻し(修正依頼)について、判断材料と対処法を記載します。

元ページで使用されている画像が粗い場合はその限りではありませんが、基本的に、元ページと同等かそれ以上の画質を利用する必要があります。

 

差し戻し対象: 元ページに使用された画像よりも粗い、またはそれにより見栄えが悪いと判断できるもの

 

修正: 本来あるべき画質に修正する

 

 

対処法

ここでは、Adobe Photoshopにおける対応方法を記載します。

画像の制作が完了したら、保存時の画質の設定時にて最適な画質にします。
一般的に"Quality(画質)"が80以上であれば問題無いとされていますが、画像サイズや求められる画質に応じて、設定を行います。

 

推奨される保存形式

テキストやグラフィカル要素のみの場合:.gifまたは.pngを使用
写真を使用する場合:.jpgを使用

場合によっては、写真でも劣化の無いよう.pngが使用されることもありますので、状況に応じて使い分けてください。

 

Retina対応

案件によっては、Retina対応を求められることがあります。
また、総じて現在のスマホに対応するようモバイル用の画像については、通常の2倍サイズで使用する必要があることが多いです。
実機で見た際に、画像の粗さが出ないように考慮した対応となります。

 

表示するサイズが 200x200 (px) の場合 → 制作・保存するサイズは 400x400 (px)

画像の制作後、コーディングで実装する際は、手動でimgまたはbackground-sizeなどに対して表示するサイズを指定します。

 

  • JavaScriptで画像を追加し、画像サイズを指定する例
//JavaScript
//.kzTest
の後ろに画像を配置
$(".kzTest").after('<div><img src="https://cdn.kaizenplatform.net/v2/attachments/000/111/222/test.png" width="200px" height="200px"></div>');

 

  • CSSで、画像を要素の背景として指定する例
/* CSS */
/* .kzTest02
の背景として画像を配置 */

.kzTest02 {
background-image:url("https://cdn.kaizenplatform.net/v2/attachments/000/111/222/test.png");
background-size: 200px 200px;
}

 

この記事は役に立ちましたか?
0人中0人がこの記事が役に立ったと言っています
他にご質問がございましたら、リクエストを送信してください

0 コメント

記事コメントは受け付けていません。