効率よくretina対応する画像サイズ

PR 2017/9/27

このトピックには4件の返信、2人の参加者があり、最後ににより10ヶ月、 4週前に更新されました。

4件の返信スレッドを表示中

投稿者

投稿
- 2017年9月27日 7:59 PM #56118 返信
  
  do
  ゲスト
  
  こんにちは。
  simplicityで作ったサイトのリニューアルをしようと思って、たくさんの画像を張り替えています。
  質問は、スマホでも綺麗に見える画像を効率よく作るには、どのような画像サイズで作っていくのが良いかという事です。
  
  PCとスマホで、それぞれ横320PXの画像を表示させたいと思っています。
  例えば、PCで横320pxで作ると、スマホではぼやけてしまいます。
  PCで640pxの画像を使えば、ある程度スマホでも綺麗にうつるのですが、サイトの構造上640pxだと大きすぎるので、やはりPCでも320pxを使いたいです。
  このような場合、どんな設定で画像をアップロードしていけばいいのか悩んでいます。
  
  srcset　を使って細かく設定いくしかないのでしょうか？
  
  理想は、PCとスマホ、両方640pxのものを320pxで表示するような設定にすることです。retinaに対応していないものは、ただの320pxの画像、最近の3倍のものはどうしたらいいかと悩んでいます。
  
  もしサポート外の質問であったらすみません、何かヒントになるようなことだけでも教えて頂けたら嬉しいです。
  よろしくお願いいたします。
- 2017年9月27日 8:40 PM #56120 返信
  かうたっく
  ゲスト
  メディアクエリを使ってみてはどうですか？
```
@media (-webkit-min-device-pixel-ratio: 2){
    ...
}
```
  参考：Media Queriesの指定について｜Qiita
  
  上記サイトは色んなメディアクエリを紹介しているので参考になりそうだと思ったんですが、一度試してみてくださいね
- 2017年9月27日 8:54 PM #56121 返信
  
  かうたっく
  ゲスト
  
  WordPress側が小さい画像を選択して表示してそうなので、違うかもしれませんね。。
  
  サーバースッキリ！WordPressで画像の自動生成をやめる｜賢威カスタマイズ研究所
  
  など色々とテストサイトで試してみるのも良いかもしれません？
- 2017年9月28日 5:37 PM #56138 返信
  
  do
  ゲスト
  
  かうたっくさん、ありがとうございます！
  教えて頂いた記事も読みながら色々試してみたところ、srcsetをする方法をとることにしました。
  
  大量の差し替えになってしまいますが、頑張りたいと思います。
  
  どうもありがとうございました！
- 2017年9月28日 6:15 PM #56141 返信
  
  わいひら
  キーマスター
  
  実際に使って試したことはないのですが、以下のようなプラグインを利用すると、手っ取り早くできるのかもしれません。
  Retinaディスプレイ対応の画像を自動生成してくれるWordPressプラグイン「WP Retina 2x」 | TechMemo
投稿者

投稿