概要
このページでは、いわゆる画質(画面解像度)が低く、画像が粗いことによる、見栄えの悪さから行われる差し戻し(修正依頼)について、判断材料と対処法を記載します。
元ページで使用されている画像が粗い場合はその限りではありませんが、基本的に、元ページと同等かそれ以上の画質を利用する必要があります。
例
差し戻し対象: 元ページに使用された画像よりも粗い、またはそれにより見栄えが悪いと判断できるもの
修正: 本来あるべき画質に修正する
対処法
ここでは、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 コメント