主にWordpressの覚書
タイトルを検索されそうな文字列にしてみました。
同じような症状が出てる人が探すかもしれないので。
以前画像がボケる、という記事を書きましたが、画像のURLを見て、あれっと思ったので調べてみました。
ドメインの前にドメインがついていました
https://i1.wp.com/・・・・
これはプラグインのJetTPackが画像を別サーバにアップしていたようです。
そのため、おそらく利便性向上のためにいろいろ処理が入っていたようです。
JetTPack設定画面で Serve images from our servers をオフにします。
通常のURLに戻り、末尾の変数もつかなくなりました。
この機能はいろいろ問題あるようです。サーバのデータが削除できないとか、劣化が起こるとか。
こちらが参考になりました
ワードプレスで画像を配置するとデバイスによって画像がボケる現象がありました。
ワードプレスで画像を配置すると以下のようにclassが指定されます。
これはテーマにより異なるのか、site-originとかのplug-inの仕様なのか。
<img class="alignnone size-full wp-image-20031" src="～">
この表示されているページの”ページのソースを表示”で生成されたコードを見ると、このように長いコードになっていました。
※見やすいように適宜改行をいれてます
画像のソースが複数あり、末尾にサイズらしきものが追加されています。
このためなのか、表示画像が小さい画像を拡大したようにボケた状態になってしまっていました。
<img data-attachment-id="20031"
data-permalink="http://example.com/course/art/image"
data-orig-file="https://i1.wp.com/example.com/wp/wp-content/uploads/2018/02/image.png?fit=1200%2C480"
data-orig-size="1200,480"
data-comments-opened="0"
data-image-meta="{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"0"}"
data-image-title="image"
data-image-description=""
data-medium-file="https://i1.wp.com/example.com/wp/wp-content/uploads/2018/02/image.png?fit=300%2C120"
data-large-file="https://i1.wp.com/example.com/wp/wp-content/uploads/2018/02/image.png?fit=800%2C320"
class="alignnone size-full wp-image-20031"
style="width: 1200px!important;"
src="https://i1.wp.com/example.com/wp/wp-content/uploads/2018/02/image.png?resize=1170%2C468" alt="スケジュール" width="1200" height="480"
srcset="https://i1.wp.com/example.com/wp/wp-content/uploads/2018/02/image.png?w=1200 1200w,
https://i1.wp.com/example.com/wp/wp-content/uploads/2018/02/image.png?resize=300%2C120 300w,
https://i1.wp.com/example.com/wp/wp-content/uploads/2018/02/image.png?resize=768%2C307 768w,
https://i1.wp.com/example.com/wp/wp-content/uploads/2018/02/image.png?resize=800%2C320 800w,
https://i1.wp.com/example.com/wp/wp-content/uploads/2018/02/image.png?resize=830%2C332 830w,
https://i1.wp.com/example.com/wp/wp-content/uploads/2018/02/image.png?resize=230%2C92 230w,
https://i1.wp.com/example.com/wp/wp-content/uploads/2018/02/image.png?resize=350%2C140 350w,
https://i1.wp.com/example.com/wp/wp-content/uploads/2018/02/image.png?resize=480%2C192 480w"
sizes="(max-width: 1170px) 100vw, 1170px">
クラスを外すと末尾の変数はついていますが、ソースは一種類になりました。
<img src="https://i0.wp.com/example.com/wp/wp-content/uploads/2018/02/image.png?resize=1160%2C480" alt="○○○○" width="1160" height="480">
ワードプレスフォーラムなどでは同様な現象が見当たらなかったのですが、もしかして同じように悩んでる人のお役に立てばと。
対処療法ですが。
今は調べる気力がないけど、あとで理由を調べねば。