いわゆる画質(画面解像度)が低く、画像が粗いことによる、見栄えの悪さから差し戻される内容です。

 

グロースハックを行う元ページで使用されている画像が粗い場合はその限りではありませんが、

基本的に元ページと同等かそれ以上の画質である必要があります。

 

例1：(元ページに使用された画像よりも粗い、またはそれにより見栄えが悪いと判断できるもの)

 

例2：(本来あるべき画質)

 

対処方法：

Adobe Photoshopにて

画像の制作が完了したら、保存時の画質の設定時にて最適な画質にします。

一般的に"Quality(画質)"が80以上であれば問題無いとされていますが、画像サイズや求められる画質に応じて、設定を行います。

 

テキストやグラフィカル要素のみの場合：.gifまたは.pngを使用

写真を使用する場合：.jpgを使用

 

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

 

Retina対応：

グロースハックする案件によっては、Retina対応を求められることがあります。

また、総じて現在のスマホに対応するようモバイル用の画像については、通常の2倍サイズで使用する必要があることが多いです。

つまり実機で見た際に、画像の粗さが出ないように考慮することです。

 

例：

表示するサイズ：200x200 (px)

制作・保存するサイズ：400x400 (px)

 

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

 

JavaScript

.kzTestの後ろに画像を配置

$(“.kzTest”).after('<div><img src="'https://cdn.kaizenplatform.net/v2/attachments/000/111/222/test.png" width=“200px” height=“200px”></div>');

 

CSS

.kzTest02の背景として画像を配置

.kzTest02 {

background-image:url("https://cdn.kaizenplatform.net/v2/attachments/000/111/222/test.png");

background-size: 200px 200px;

}