サポート » プラグイン » プラグインギャラリー。iPhone上のみ画質が悪いのはなぜ?

  • Huge it image galleryというプラグインを使ってギャラリーを設置しました。

    MacbookやiPad miniでは問題ないのですが、自分のiPhone6でギャラリー内の画像を見ると、ここだけなぜか画質がとても悪くなっています。(iPhone6以外のスマホ携帯、Macbook&iPad mini以外では確認しておりません)

    Huge it image galleryの制作チームにそのことを伝えると、「画像が携帯サイズに圧縮されると画質が悪くなることがある」と回答を頂きました。

    プラグイン自体の不具合ではなく回答の通りだとすると、どのように対応すればiPhone表示の時でも他のデバイス同等の画質で表示させることができますでしょうか?もしくはあきらめるしかないのでしょうか?

    補足⇩

    ・アップする画像のサイズは大体500×500〜900×900/80kb~190kbです。

    ・試しに通常より小さいのと大きいサイズの画像をアップして確認してみましたが、どちらも画質が悪いままです。(300×300&1500×1500で試しました)

    ・HPは人に頼んで制作してもらいました。このプラグインを設置した制作者からは、プラグインの設置&削除・プラグイン内でできる設定以外カスタマイズなどはできないと初めから言われておりましたが一応この事を伝えると、やはりプラグインの調整などはこちらではできないとのこと。

    私はHPを持つのも初めてなうえにWeb制作等の知識が全くない初心者ですが、ギャラリーで細かいアート作品を紹介するといった性質上、画質が悪いのにはとても困っております。

    修正方法(もしくは修正可能かどうか)・対策などあれば、ぜひお知恵を拝借させてください。

    何卒よろしくお願いいたします。

    自分のHPです→ http://tokinails.com/

13件の返信を表示中 - 1 - 13件目 (全13件中)
  • ギャラリーページに一覧表示されている画像をタップして拡大されたひとつひとつの画像は綺麗に見えましたが、一覧表示の画質を問題にされていますか?

    そもそもスマートフォン意外での表示は自分は確認していませんが他デバイスでの「画質がいい」とはどのような違いですか?(iPhone等最近のスマートフォンはPCより画面密度が高かったりし、引き伸ばされて表示されると粗く見えるかもしれませんが……(このギャラリーで挿入されている画像は275×275になってますね。使ったこと無いからわからないけど他のサイズで挿入できたりしないのかな……))

    (ちなみにWordPress4.4ではデバイスに応じて適切な解像度の画像を表示できるResponsive Imagesが導入されます。プラグインとして利用することも出来るのでもしかしたら改善出来るかも?)

    Blog Style galleryならもとの解像度のまま表示されますよね?

    (そもそもLightboxギャラリーを実装したいだけならWordPressデフォルトのギャラリー機能にJetpackのカルーセルやその他lightbox系プラグインを組み合わせた方がいい気もします。このプラグインに拘る必要、理由はありますか?)

    トピック投稿者 tiiki

    (@tiiki)

    gblsm様

    書き込みありがとうございます!
    はい、そうです。Lightboxで拡大した画像の画質も問題ないのですが、一覧表示された画像の画質がぼやけているのが気になります。。

    プラグインの不具合ではないと思いますよ。Hinaloeさんがコメントなさっているように、このプラグインではない方法が良いと思います。

    なお、一覧ページに画質のよい写真をたくさん並べると一般的には読み込みが遅くなるので、ご注意ください。

    トピック投稿者 tiiki

    (@tiiki)

    Hinaloe様

    書き込みありがとうございます!

    Responsive Imagesやデフォルトのギャラリーなど分からないことを調べていたので返答が遅くなり失礼致しました。

    Responsive Imagesという言葉の意味は理解できたのですが、「WordPress 4.4」というのは最新のバージョンなのでしょうか?自分のサイトのダッシュボードで確認したところ、現在のバージョンが「WordPress 4.2.5」になっており「4.3.1に更新」というボタン(?)を見つけました。

    「4.3.1」に一度更新してから「4.4」へ更に更新するのでしょうか?

    また、それをプラグインとして利用する…というのも[ wordpress 4.4 プラグイン]と検索しても英語のサイトばかり出てきて分からずじまいです。。(英語はともかく、知識が無さすぎて意味が全く理解できませんでしたT-T)

    また、HPは一から人に依頼して作成していただき、納品された時に付いていたのがHuge it galleryというプラグインを使ったギャラリーでしたので、デフォルトのギャラリーページというのも今回調べるまで全く知りませんでした。

    検索するとデフォルトのギャラリーページ作成方法を紹介するサイトをいくつか読みましたが、デフォルトそのままでは希望するようなものはできそうもありません。かといって、それを更にカスタマイズしていくとなると全く手に負えそうもないです。。

    HP制作はあるクラウドサービスを利用して依頼したもので、プラグインのカスタマイズはできないと制作者から言われたのを鵜呑みして(それ自体は噓ではないのでしょうが)納品完了としてしまったので、これ以上制作者に修正を頼むことができません。

    スマホ上の画質は諦めるか、新たにギャラリーページ制作を依頼するしかなさそうですね。。

    ただその前にHinaloe様がおっしゃる

    >(ちなみにWordPress4.4ではデバイスに応じて適切な解像度の画像を表示できるResponsive Imagesが導入されます。プラグインとして利用することも出来るのでもしかしたら改善出来るかも?)

    を、試せるなら試してみたいと思ってます。

    質問ばかりで申し訳ないのですが、このプラグイン名と使い方を教えてくださりますと幸いです。何卒よろしくお願いいたします。

    トピック投稿者 tiiki

    (@tiiki)

    gblsm様

    やはりこのプラグインが良くなかったのですね。。
    知識不足な自分のせいですが、こちらで質問しなければ他の方法があるということすら分からないままだったので大変ありがたく思います。

    アドバイス本当にありがとうございました^^

    WordPress4.4は現在開発中の次期バージョンです。ちなみに上で言っているプラグインとは RICG Responsive Images のことですが、どうやらこのギャラリーと合わせて使っても改善は見込めなさそうでした。

    他の手段の検討をお勧めします。

    tiikiさん
    ご回答された皆様

    これって、システム的にはプラグインかもしれませんが
    わたくし的には「CSS」的なお話な気がします。(ワードプレスとか離れてしまうかもしれませんが)

    基本的に、スマートデバイスは密度が高いので
    2~3倍の画像で作成されると良いと思います。

    例えば、500pxに出力された画像(3段組)があるとします。
    これをレスポンシブで考えると
    3段⇒1段となると通常処理が行われます。

    ここで今までですと、そんなににじみ等は気にならなかったかもしれませんが
    iPhone6以降:1,334×750(326ppi)のリテーナディスプレイに変更されています。
    通常PCが解像度72~96ppiなのでやはり3倍くらいの解像度は必要です。
    500pxのものを500pxで表示したとき、72ppiって思ってください。
    (環境によっては96ppiの場合もあります)

    詳しく説明しているサイトがあったのでリンク張っときます。

    http://www.dotproof.jp/2014/09/11/iphone-6-ppi/

    では、わたくしの場合ですが
    クライアントさんからレスポンシブと要望が入った場合
    リテーナディスプレイ対応させるかどうか伺い
    対応だったら

    PC⇒スマートフォンのレスポンシブ
    サイト幅をPC用幅からwidth:100vw;(デバイス幅)に変更します。
    この時に画像に対してwidth:100%;(外側の囲いに対して横幅をフィット)を行います。
    この際、賛否両論ですがわたくし個人的にはheight:auto;を行い高さを自動にし、縦横比を保持させます。

    ここで、解像度のお話に戻ります。
    そうなると、いったいいくつの画像が必要か??
    ⇒表示させたい画像の3倍必要

    つまり500pxで表示させたいなら1500pxの画像が必要になります。
    そこで、わたくしたち設計側ではfunctions.phpでサムネイル画像をスマートフォン用に1500pxで書き出す設定を作ります。
    合わせて、functions.phpにユーザーエージェントの設定を施し
    is_mobile();が使えるようにしておきます。

    もし「is_mobile()」ならば1500pxの画像を読みなさい
    それ以外ならば、500pxの画像を読みなさい

    なんて条件を画像の読み込み設定(PHP)で書いてあげます。

    これを行うことにより
    PCのときは通常処理を行い、モバイルなら1500pxの画像を読むってことが可能となります。

    つまり、設計段階でリテーナ対応でお願いしていない場合は正直難しいでしょう。
    ソース的には大した作業ではないので、もしかしたらお話し合いで済むかもしれません。

    ですので、style.cssなどスタイルの箇所に

    すみません、最後の行意味不明ですね。
    無視してください。

    mura0403さんの言ってることの根源はあってるのですが…デバイスの画面密度はサーバーサイドでは基本的に知りえないので(Retinaのような高密度は今どきPCでも普通にあるし、モバイル端末でも幅広く存在するし)サイズ情報とURLを全部与えてブラウザに判断させよう、というのがレスポンシブイメージです。(CSSのBackgroundもメディアクエリーで以前からそのようなことが可能でした。)

    今どきRetina非対応とか何考えてるんだこの見にくいサイト…とか思うようなことがあるかも知れませんが、場合によってはPCに対しての考慮を忘れてることもありますね…()

    で、本題ですがこのプラグインをちょっと調べてみたところ、プロ版ならサイズを変えることも可能なようですね。

    あるいはget_huge_image関数を上書きすることでサムネイル画像を入れ替えることも出来そうです。

    例:
    元画像をそのまま表示する※通信量が増えかねないので非推奨

    function get_huge_image ( $url, $prefix ) {
      return $url;
    }

    WPに組み込みサイズ、サムネイルを表示

    function get_huge_image ( $url, $prefix ) {
      $id = attachment_url_to_postid ( $url );
      return wp_get_attachment_thumb_url ( $id );
    }

    後者は元より解像度がより低くなるため意味のない話ですが、これを応用することでほかのサイズでの表示も可能ですね。(実装方法はプラガブル関数等で調べてみてください)

    トピック投稿者 tiiki

    (@tiiki)

    mura0430様

    プラグイン自体をいじらなくてもCSSで改善できるのでは?
    という違う角度からのご意見本当にありがとうございます!

    残念ながら無知な私には全て理解できず自信で試すことはできかねますが、HP制作者にこちらの書き込みを考慮してもらうことができるだけでも助かります。

    このプラグイン(Huge it image gallery)を使いだした当初はiPhone6上でも画質の悪さは気にならなかったのですが、HP制作者に他の箇所の修正などをお願いしている間にふと画質の悪さを気付きました。

    制作者にこのことを伝えると「たぶん気のせい。前と変わらない」とお返事いただきました。
    そう言われると私も「絶対!に画質が悪くなった!」と断言できるほど自信もなかったので『そうなのかな〜?』と悶々としつつもそれ以上何も言えなくなりました。

    制作者がどこをどのようにカスタマイズ等で変更しているのかなど私には皆目見当が付きませんので「これが原因では?」などと予想すらできません。ので、信じるしかありません…

    Mura0403様のおっしゃる通りCSSの書き換え(?)で画質が改善されるなら新しくギャラリーページを作る必要もなく助かります。

    トピック投稿者 tiiki

    (@tiiki)

    Hinaloe様

    度々の書き込みにアドバイスありがとうございます!
    お礼が遅くなりましたこと申し訳ありません。

    >WordPress4.4は現在開発中の次期バージョンです。ちなみに上で言っているプラグインとは RICG Responsive Images のことですが、どうやらこのギャラリーと合わせて使っても改善は見込めなさそうでした。

    そうなのですね、了解致しました。
    しかしながら貴重なご意見くださり感謝しております。

    >で、本題ですがこのプラグインをちょっと調べてみたところ、プロ版ならサイズを変えることも可能なようですね。あるいはget_huge_image関数を上書きすることでサムネイル画像を入れ替えることも出来そうです。

    プロ版で解決できるなら購入してみたいです。
    あと関数の上書きなど、試す価値のありそうな方法が他にあると分かっただけでも嬉しいです!

    Hinaloe様がくださったアドバイスを自分で完全に理解して応用することは無理そうですが、修正を依頼する技術者様にこちらの書き込みを一度考慮してもらうよう進言できるのは助かります。

    本当にありがとうございました!^^

13件の返信を表示中 - 1 - 13件目 (全13件中)
  • トピック「プラグインギャラリー。iPhone上のみ画質が悪いのはなぜ?」には新たに返信することはできません。