ブログに挿入した画像の劣化について

Simplicityの特徴 › フォーラム › Simplicityについての質問 › ブログに挿入した画像の劣化について

  • このトピックには2件の返信、2人の参加者があり、最後にアバター画像わいひらにより10年前に更新されました。
2件の返信スレッドを表示中
  • 投稿者
    投稿
    • #45047
      パターソン
      ゲスト

      こんにちは。
      以前からSimplicity2を使用させていただいております。
      この度は、画像の挿入についてトピックで質問させていただきたいと思います。
      質問させていただきたいことは2つございます。

      まず1つ目は、挿入した画像の劣化についてです。
      私は最近4K撮影できるデジタルカメラを購入したので、そのカメラで撮影した写真をブログに載せることがあります。
      4K画像だと1枚で5~10MBにもなってしまう画像が多いため、Caesiumというフリーソフトで画像を圧縮してWorfPressにアップロードしております。
      その圧縮した画像をブログに投稿すると、なぜか画質が大劣化してしまうのです。
      まるでモザイクでもかけたかのようです。
      勿論、圧縮をかけた元画像はそこまで酷くありません。
      WordPressでは、画像を90%まで勝手に圧縮して投稿されるということが調べて分かりましたが、明らかに10%以上劣化しております。
      テーマ自体で何か設定が成されているのでしょうか?

      2つ目は、挿入した画像をクリックした際の画像表示についての質問です。
      挿入した画像をクリックすると、画像単体で表示することができるものと、クリック自体できないものがあります。
      できれば、挿入した画像は全てクリックすると画像が単体で表示されるようにしたいのですが、これは一体何が原因なのでしょうか?
      ファイルの種類やサイズが原因なのでしょうか?

      どうすれば改善されるかご教示願います。

    • #45050
      hidekichi
      ゲスト

      > テーマ自体で何か設定が成されているのでしょうか?

      テーマ自体で何かしているとすれば、おそらくサムネイルのサイズを指定しているぐらいかと思います。圧縮率やその方法等はwordpressまかせで、wordpressが作成した画像(サムネイル)を表示しているだけかと思います。

      本来ブログに貼るような画像はjpegで劣化バリバリでも良いのです。もちろんその中でもより美しくある方が良いわけですが、キレイなものをそのままブログに貼るとページの読み込み速度も下がりますしあまり良い部分がありません。
      なので、より高画質な画像は外部の専用サイトなどにアップロードしておき、ブログの画像はあくまでも単純な表示用として置いておくほうがサーバーの負荷軽減にもつながりますし、また容量不足の解消にもなります。
      画像を公開できるようなサイトではたいていAPIというような仕組みがあったりしまして、その画像のIDなり何かしらを相手サーバーに送るとその情報を返してくれると言うようなものですが、それらを利用してより高画質なものを見たい人にだけ表示するような仕組みを作られると良いのではなかろうかと思います。

      またwordpressでは圧縮率を設定する方法が色々とありますので(プラグインとか何かしらのアクションを自前で書くとか)、それらを利用してよりキレイでファイルサイズの小さいもの(画像を最適化したもの)を掲載されると良いと思います。

      低画質(なるべく最適化された中で美しいもの)の画像をブログに貼り、高画質なものは別の方法で表示させると言う感じです。

      > 挿入した画像をクリックすると、画像単体で表示することが
      > できるものと、クリック自体できないものがあります。

      おそらくこれは挿入時に画像に対してリンクを貼っていないからではなかろうかと思います。

      画像挿入時、中央とか左右を選べる下に「リンク先」と言うのがあります。ここに何も設定がされていないと画像の周りにaタグが挿入されません。つまり、

      ■リンクがある場合

      <a href="何かしらのリンク">
        <img src="挿入した画像のパス">
      </a>

      ■リンクがない場合
      <img src="挿入した画像のパス">

      このような違いがあったりします。例えば何かしらをクリックしてモーダル(その画像だけ別)で表示するような機能がある場合、このaタグにいわゆる印になるクラス等が入り、そのクラスが入っている要素にだけその機能が適用されると言う仕組みです。

      aタグがない場合は、単純に画像が入っているだけで、ものによってはこの画像自体にクラスを入れて機能させるものもありますが、その場合それらを囲む親要素にaタグがあったりすると別途処理を書かないといけなかったりするため、多くの場合はaタグに印のクラスが入ります。もしくはそのaタグをも内包するように新たにブロックで囲んだりするものもあります。

      ここらは方法が色々あるので必ずこうだとは言い切れませんがこういった理由から、画像をクリックした所で何も起こらないのはそれ用の処理がしていないからと言うのが理由で、その原因は挿入時にリンクが入っていないからだろうと思います。

      実際のページを見ていないので他の原因も考えられますが、よくあるのはこんな感じです。

    • #45115
      アバター画像わいひら
      キーマスター

      テーマ自体で何か設定が成されているのでしょうか?

      テーマ側で、画像の質を変更するようなコードは書いていないと思います。(画像の大きさはそのままに縦横幅を変更するようなことはしていますが)
      おそらく書かれているのは、Wordpressが行っている処理だと思います。
      それをどうにかするには、hidekichiさんも書かれているように、画像処理を変更するコードをカスタマイズして追加するか、プラグインを使用するしかないかもしれません。

2件の返信スレッドを表示中
  • フォーラム「Simplicityについての質問」には新規投稿および返信を追加できません。
スポンサーリンク
アドセンス(大)
アドセンス(大)