トップページヘッダー画像（モバイル）の画質が正しく表示されない問題

[inos]

Fancie NOTE を利用しております。

「トップページヘッダー画像」の「モバイルテーマ用トップページヘッダー設定」で「ヘッダー画像の静止画表示」で使用しています。

アップロードしている画像はFull HD以上もしくは4K解像度で画質は十分優れています。ただしファイルは複数枚アップロードしてありアクセスするたびに異なる画像が表示されるようにしてあります。

以上の条件の元、Apple iPhone 6sからアクセスをすると、最初に表示される画像の画質がやたら低解像度になります。4Kファイルなのに480×360みたいなぼやーっとした画質。画面をピンチインで拡大すると俄に高解像度表示に切り替わりその後ピンチアウトして元のサイズに戻すと今度は高解像度のまま正しく表示されています。ただしページをリロードして別の画像がロードされるとまた低画質表示似なります。

どうやらページの初回読み込み時のファイル表示の解像度が適切ではないようなのですがどこか手を加える場所はあるでしょうか？

ちなみにFull HDディスプレイを持つAndroid端末からアクセスしてみたところそちらは始めから高解像度で表示されました。恐らくiPhone 6,6s,7,8あたりで使われているディスプレイ解像度への最適化が上手く出来ていないような気がするのですが。

[DigiPress サポート]

全幅が400ピクセル幅前後程度のエリアに対して、モバイルテーマのヘッダー画像があまりに巨大過ぎます。
PCテーマ(ウェブサイト用)のヘッダー画像素材としても不必要に解像度が大きすぎます。

http://ino.lomo.jp/blog/wp-content/uploads/digipress/fancie-note-business/header/mobile/DSC08078.jpg
※600万画素以上(3240 x 2160px)

軽量化が重要とされるモバイル環境において、上記画像はふさわしくありません。
表示幅の2倍程度の幅の画像で十分です。

[inos]

DigiPress サポート様

ご返答有り難うございます。
PCサイト用は4kディスプレイの縦解像度にドットバイドットで表示させるため3240 x 2160pxでアップが必須でしたが、確かにモバイル用には大きすぎました。

解像度を落としたファイルをアップロードし直したところ問題解決しました。

ありがとうございました。

[投稿者]

投稿