Lazyloadを使ってみる【上級編】

投稿 2018年05月29日
9
カスタマイズ
FC2TemplateHTML5ResponsiveSEOLazyloadingLazysizes高速化上級者向け

検討編、初級編、中級編を経て最終の上級編です。
私が制作したテンプレートを利用していることを前提とした記事内容です。

検討編では「Lazyloadingを導入するかしないかの判断」
初級編では「テンプレートに導入済みのLazyloadingを個別記事でも利用する方法」
中級編では「関連記事リストと新着記事リストにも適用する方法」
を説明しました。
今回の上級編では html5 picture要素の使い方とLazyloading用ブログカード及び記事作成手助けブックマークレットの配布 などを記そうと思います。

先回までの流れは以下のリンクから 【必読】

FC2ブログでのLazyload導入の仕方と注意点【検討編】 - カスタマイズ

Lazyloadは自分との闘いです(笑) まず最初に、初心者向け説明記事ということで、なるべく平たく細かく説明できれば良いな、と思います。 「Lazyloadが何か知らない。読み方もわからない (∵`) 」を出発点にして自ら説明のハードルを上げるワタクシ((((笑) ...

Lazyloadを使ってみる【初級編】 - カスタマイズ

画像の遅延読み込み、一般的に Lazyload といわれるものですが、こちらを実際に使ってみようの巻 (´・ω・`) 手順及び説明など全て、私が制作したテンプレート上での作業であることが前提で、他製作者様テンプレートに関する言及は一切ありません。...

Lazyloadを使ってみる【中級編】 - カスタマイズ

FC2ブログで画像遅延読み込み (以下 lazyloadingと称する) を 関連記事リストと新着記事リストにも適用 してみようの巻 (o'ω')ノ...

picture要素を利用したレスポンシブイメージ

レスポンシブイメージ というのは、多様なデバイス・大小様々な画面に置いて掲載する画像(img要素)をどう扱うかという方法論の総称だと思えば良いと思います。

FC2ブログではパソコン(PC)で見る記事とタブレット(TB)あるいはスマートフォン(SP)で見る記事、それぞれの内容を別で設けるといったことはできません。
ユーザーが書いた記事内容はPC, TB, SP 全デバイス共通となります。
そこで掲載される画像ですが、パソコンの画面は大きいので記事横幅いっぱいにしたければ600〜1000px程度の画像が必要となります。もちろんテンプレートのメインコンテンツの指定幅にもよります。
ところがスマホというのはどう頑張っても横400px程度しかありませんので、果たして1000pxもの画像が必要かどうか ですよね。
画像のサイズが大きくなれば比例して容量も大きくなります。
容量が大きくなればページローディングの負荷が大きくなり、結果表示スピードにも影響が出てきます。

ですが記事に関するhtml内容は繰り返しますがPC, TB, SP 全て共通(共有)です。
じゃあパソコンとスマホで掲載する画像を変えちゃおうよ というのがhtml5の新要素 によるレスポンシブイメージに対する一つの取り組みです。

html5新要素 ですよ。
もうhtml4では時勢に付いていけません。いまだにhtml4やxhtmlテンプレートを使っているという方はまずここをよく考えた方が良いですね。

これまでは画像の「掲載サイズ変更」は指定できても、「原寸の違う画像を切替える」ことはできませんでした。
画像というのは例えば横1000pxで100KBの画像を300pxに指定しても原寸の1000pxと容量100KBは変わりません。
つまり単純に表示を小さくしているだけです。
これからご紹介する picture要素 というのはその「原寸」を変更します。
パソコン用, スマホ用で別の画像を用意して切り替えます。
パソコンでは1000px, 100KBの画像を。スマホでは同じ画像の原寸500px, 30KBのものを、というわけです。

<picture>
  <source media="(max-width: 414px)" srcset="スマホ用画像アドレス">
  <source media="(max-width: 900px)" srcset="パソコン用画像アドレス">
  <img src="パソコン用画像アドレス" alt="">
</picture>

上記が基本コードですが、このままではLazyloadingは使えません。
Lazyloadingなし、html5テンプレートの場合は上記のまま利用できます。

大事な部位は <source> というタグと srcset という属性です。
この2つは見慣れないのではないかと思います。
sourceをimgと間違えたり、srcsetをsrcと間違えて記述すると機能しませんので注意。

htmlではなくCSSのスタイルシート内に media という文字列を発見することがあります。
CSSではいわゆる ブレイクポイント といって、画面幅の切り替えを示します。
それをhtml要素内に利用し、CSSのような感覚で画面幅に応じて 適用する画像アドレスの切り替えを行います

<picture>
  <source media="(max-width: 414px)" srcset="" data-srcset="スマホ用画像アドレス">
  <source media="(max-width: 900px)" srcset="" data-srcset="パソコン用画像アドレス">
  <img src="" data-src="パソコン用画像アドレス" alt="" class="lazyload">
</picture>

Lazyloadingを利用する場合には上記の内容を おすすめ します。
あくまでも「おすすめ」であって、あるいは人によってはもう一つsourceを追加したい場合や、別のアプローチを選択したい場合もあるかもしれません(後述)

上記内容はひな形として辞書登録しておくとすぐに呼び出せて便利です。
で、これまでの記事に沿って「Lazyloadingのソースを書くにあたっての個人決定」となる部分が src属性をどうするか ですね。

  • src属性は 書かない
  • src属性の値に dataURI または 極小透過画像(便宜上「スペイサーgif」と称す)を代入

上記をどうするか決めて頂いていると思いますので、今回もその決定に沿った使い方をしてください。

1 を選択した方
picture要素内のsource要素内 srcset 属性とimg要素内 src 属性を 削除 してください。
削除にあたり属性間スペースの有無に注意。
また、既に説明済ですが今回もやはり構文エラーになるという点を念頭に。

2 を選択した方
picture要素内のsource要素内 srcset 属性とimg要素内 src 属性の値に dataURI または スペイサーgif を入れてください。
dataURIのおすすめは

data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==

です。この文字列を入れた状態ではとても辞書登録はできないと思いますので、「dataURLも個別で辞書登録しておいてください」というのはこういうときのためです。
上記ソース内容の場合には 3箇所 入れることにになりますので常に頭に置いてください。

srcset属性でできること

雛形として掲載した内容の説明をしますと以下の通り。

  • パソコン用とスマホ用の2種設定のみ(タブレットはパソコン用と共有)
  • デバイス(またはブラウズ)画面サイズに応じた切り替え

これが FC2ブログ上での個人的推奨内容 です。
「FC2ブログ上での」という点が大事。後述します。

picture要素での画像切替はいくつかの視点に基づきます。以下の通り。

  • 画面サイズによる切り替え
  • 使用デバイスが高解像度ディスプレイ(便宜上 retina(レテイナ)と総称)か否かで切り替え

概ねこの2つ。切り替えについては「pictureでできること」ではなく「srcsetでできること」です。
雛形は前者の「画面サイズ」を目安にする内容です。
後者の「retinaかどうか見分ける」についてですが、これまで何度も記事にしてきたように retinaでは掲載寸の2倍の実寸が無いと画像がぼやける という問題があるわけなんですよね。
なのでretinaでない場合には掲載寸と実寸をほぼ同等にし、retinaだけは倍を想定した実寸画像を用意する、という考え方です。

ところが現在ではもうretinaでないスマートフォンを探すほうが難しいような状況です。
ですからスマホ閲覧の場合に非retinaが適用されることはほとんど無いと考えるとやるだけ無駄な気がしますよね (´・ω・`)
したがって「画面サイズ」を基準とする内容をおすすめしている次第。
参考までに画面解像度で分ける書き方は以下の通りです。

<img src="通常画面用"
     srcset="通常画面用 1x,
             retina画面用 2x"
     alt="">

picture要素でできること

推奨はpicture要素としてまとめていますが、画像の切り替えだけならば前述した通り img要素の srcset属性 だけで可能です。
その場合には必然的に source要素 も不要となります。
picture要素の定義は 画像リソースの読み込み宣言 と捉えれば良いと思います。
「画像」の「リソース」が記されていますよ、という明示ですね。
htmlは装飾のために利用するのではありませんから、ちゃんと定義について知っておく。

定義は上記の通りとして、見た目の面ではpicture要素のdisplay値は inline ですので、文章や他の画像などが横並びになる点もお伝えしておきます。
ということは センタリング を行いたい場合には以下のような書き方になります。

<div style="text-align: center;">
ここにpicture要素
</div>

掲載サイズの調整についてはpicture終了タグの直前にある img要素 に対しstyle属性をあててください。
例)

<picture>
  <source 省略>
  <source 省略>
  <img src="" data-src="パソコン用画像アドレス" alt="" class="lazyload" style="width: 300px;">
</picture>

またpicture要素では同種画像の実寸違いの他、別種画像の指定も可能です。
パソコンではA画像、スマホではB画像、といった具合です。
以下がサンプルです。デバイス変更またはブラウザサイズ変更で画像が変わりますので確認してみましょう。
パソコンでの確認を想定し、サンプルでは画面幅が600px以下になると変更されるように設定してあります。

レスポンシブイメージ

注意
スマホで閲覧されている場合はランドスケープモード(横倒し)でご確認ください。
画面が広い時は黄色背景のフォーク画像、狭い時はハンバーガーの画像が表示されるはずです。

こういったことも可能ですが、原則として同じ画像にしておくべきです。
例えばスクリーンショットで、パソコンでは全体を写したもの、スマホでは部分抽出したものを掲載するなどが使い所かと思います。

FC2ブログでのpicture要素使い方推奨

同種画像のサイズ違いを2つ以上準備する ことになるわけですから、途中で息切れしてしまうことも。
毎回自分で編集ソフトなどを利用していたのでは面倒になって放り出したくなることもあります。
いやこの可能性はかなり高いですよ。私なら嫌です(笑)

そこでFC2ブログの サムネイル同時作成機能 を利用するのはどうでしょう。

上記は私の設定ですが、サムネイルサイズを常に 横640px に指定しています。
この数値はスマホ最小機種の 320pxの倍 です。
ホントは最大機種 414px の倍であるところの 828px が適切なのでしょうが、800pxってアータそれもうサムネイルじゃなくね?みたいな (´・ω・`)
まぁ仕方無いですよね。スマホは高解像度が当たり前になってますのでどこかで折り合いをつけないと…。
というわけで私の折り合いはこの640pxという数値です。

で、横長 の画像のみを想定しています。縦長は度外視。
というのはFC2ブログのこのサムネイル作成機能、縦幅指定のマックスは 999px です。
それを超えたらもうサムネイルは作れません。

サムネイルの機能を利用した場合、原画の拡張子直前に小文字の s をつけるだけです。
アップロード画面から本アドレスをコピー、貼り付けた後にsを加えるだけ。
例)
sample123.jpg --- 原画
sample123s.jpg --- サムネイル
これなら最小限の手間で済みませんか?どうでしょうか (´・ω・`)
ここを上手に利用すれば記事を書く際にもメンタル殺られるほどの大仕事にはなりません。たぶん。

source要素を「パソコン用」「スマホ用」の2種に限定しているのはこのためです。
タブレットの場合はパソコン用に含めても問題ないと思いますし。
ただdataURIを利用する方はソースの見た目がぐっちゃぐちゃになって泣きそうになるかも。まぁそれも慣れですが。
あとはスマホ最大機種は今のところ 414px だと思うのですが、将来的にはわかりません。
ですから余裕を持って 420px とかにしておいても良いかもです。
その場合はサムネイル作成サイズももう少し大きめで。
しかし厄介だよなぁretina画像問題。新拡張子heicの推進はよ。
といってもめっちゃ効果アリってわけでも無いように思いますが。

picture要素のまとめ

FC2ブログ内での使いこなし提案など交え説明しました。
htmlレベルでのレスポンシブイメージというのはかなり画期的ではあるんですよね。
htmlというのはそこに書かれていれば必ずローディングが行われるというのが常識です。その点でCSSとは違う(後述)
でもこのsrcset属性の登場によって、条件に合致していないものは読み込まない というのが可能になりました。
うーん。すごいね (´・ω・`)

できそうだな、と思った方は積極的に利用していくと良いと思います。自分のキャパや牛乳に相談。
だって現在のOGPの推奨は横1200pxじゃないですか。OGP対象でなくても1000とか1200あたりにしていないとパソコンの4Kや5Kについていけない。
でもなんぼなんでもスマホで1200pxも要らんやろ。スピードにも影響するし。
と、そんなときに有効な手法です。
Lazyloading入れてたらあんま関係ないっちゃ関係ないかもしれんけどねぇ (´・ω・`)

Lazyloading用ブックマークレット

以降のブックマークレット2種については dataURI入力の手間を省く ことを目的としています。
目的が合致する場合にのみご利用ください。

以前から配布しているものと全く同じ内容ですが、jQueryのバージョンを上げてあるのと dataURIを代入してあるlazyloading用html になってます。
dataURIは文字列が長く、最初から入ってたほうが便利かと思いますので切り替えをおすすめします。
記事内でLazyloadingを利用していない方は変えないでくださいね。機能しなくなってしまいますので。

通常版(自身のサイト内での利用など)
ブログカード

引用版(第三者のサイトからの引用)
引用ブログカード

Lazyloading記事作成手助けブックマークレット

記事の編集時、画像の記載がある場合に一括でLazyloading用記述に変換します。
こちらは FC2ブログエディターのツールバーを利用した画像の掲載を行っている 方限定です。

Lazy変換

Lazy用ブログカードブックマークレットとの併用不可

上記のLazyloading変換ブックマークレットで作成したブログカード内にある画像も反応し、二重記載になってしまいます。
当該ブックマークレットとブログカードブックマークレットを併用したい方は旧タイプのブログカードブックマークレットの方をご利用ください。

ブログカードのブックマークレットを作成しました - カスタマイズ

SSL化後の悩ましい作業のひとつ。 ブログカード これまで Embedly を使ってきましたが、仕様がかなり独特なんですよね (´・ω・`) 画像や記事概要など、必ずしもOGPに従っているわけではないもので。 かといって はてなブログカード はSSLに対応できてないですし。 私のブログの特定ページでEmbedlyがどうしてもOGP画像を出してくんない(笑) そしてEmbedlyは非常にカスタマイズし辛いんですね。 ほとんどできないと言っ...

border属性は自動で取り除きます。

既に廃止された属性ですので不要と判断し自動削除するようになってます。
末尾のスラッシュも本来は不要ですが、xhtmlの場合には逆に必須ですので、無理に取らずに温存してあります。
といっても配布対象は私のテンプレートを利用されている方が主ですのでxhtmlなわけがないのですが(笑)
汎用的に使えないわけでもないので一応こういった処理にしておきます。

元に戻すためのブックマークレットは作成していません。

元に戻せませんので、記事の最終チェックを済ませてから思い切ってクリックしてくださいね。
心配な方は画像を入れるたびにクリックしても良いかと思います。そこはお好きにどうぞ。
くれぐれもブログカードブックマークレットの組み合わせには注意。

クラス名の重複に注意

元の内容にクラス名が含まれている場合、ブックマークレットクリックによってクラス名重複が起こります。
追加クラスはブックマークレット利用後に行うようにしてください。

画像掲載が多く、全てをエディターツールに頼っている方にとってはかなり作業が楽になるかと思います。
記述の難易度でLazyloadingを敬遠しているのならば是非ご利用ください。

再度スムーススクロールと相性の悪い件について

スムーススクロールと相性が悪い 点について再度触れておこうと思います。

なんとかならんもんか、どうにかできんもんか、と色々探す方も居るのではないでしょうか。
どうにもなりません。
このどうにもならないという結論をお伝えしておかないことには時間を浪費させることになってしまいます。

スムーススクロールは簡単に言うと「出発点から到達点までの距離を計算する」ことが主体となります。
つまり「縦幅」ですよね。
ところがLazyloading画像がある場合、縦幅は未定です。
スクロールしてようやく画像が出てくるわけですからスムーススクロール起動時に正しい計算ができません。

では元画像のwidth, height属性を明示しておくのはどうか。
レスポンシブデザインの場合は画面幅の変更に対処しなければいけませんので、画像の幅はCSSで max-width: 100% が指定されています。
そうしないと記事から画像がはみ出してしまいます。
例えば元画像が width="1000" height="500" だった場合。
記事幅が500pxになった場合、width属性の1000pxを打ち消して横幅は500pxになります。
このときの縦サイズですが、横幅に調整が入った際には height: auto を指定しておかないと元の指定である height="500" が居残って画像は歪んでしまいます。
伸縮が起こっても画像の縦横比を正しく表示するためには上記CSS内容が必須です。

ところがLazyloadingの場合、DOM構築時の対象画像は元の画像ではなく代替となるdataURIあるいはスペイサーgifですよね。
そしてそのサイズは 1×1 です。
width="1000" height="500" が打ち消されて max-width: 100%; height: auto; がかかったらどうなるでしょうか。
正方形 になりますよね。
元画像の参照なのですから、元画像であるdataURI, スペイサーgifが正方形ならば当然正方形での計算になります。
スクロールが行われ、本来の画像が表示される際には正方形ではありませんので、またそこで再計算され横長画像ならば縦が短く、縦長であれば縦が長く変更されるわけです。
こういう仕組みによってスムーススクロールでの到達位置がずれる、と。

これをどうにかしようと思えばきっぱりLazyloadingかスムーススクロールのいずれかをやめるか、リンクをクリックしたら時間を少しずらしてheightの再計算を行うか。
Lazyloadingは負荷を下げるために行うのですから、JSを増やしたのでは本末転倒です。従って現実的ではないという結論。

他にはimgをdivなどで囲い、そのdivで縦横比を決定してしまう。
imgはその中に object-fit: cover でもって入れ込むという方法もあります。
がこれも現実的ではないですよね。だってそんなのいちいちやりたくないでしょう?(笑)

というわけでこの両者は犬猿であるという結論をこれといった対策もなくお伝えしておきます。

htmlのimg要素とCSSのbackgroundプロパティの違い

画像を「表示」するには必ず通信リクエストが発生します。
Lazyloadingというのは画像の通信リクエストを分散させることを目的としています。
それが結果的にページスピードの向上に繋がるというわけですね。

では

<img src="https://xxx.jpg">

と記されたhtmlのimg要素としての画像と

.yyy {
  background-image: url(https://xxx.jpg);
}

との違い。この場合はいずれも通信リクエストが発生しますので大差はありません。
では以下の比較ではどうでしょう。

<img src="https://xxx.jpg">
@media screen and (max-width: 700px) {
  .yyy {
    background-image: url(https://xxx.jpg);
  }
}

CSSの方は 画面が700px以内ならば という条件がついています。
この内容で画面幅が1000pxだった場合、CSSの方は通信リクエストが発生しません。
条件に合致した場合のみリクエストが行われるんですね。
CSSのこの特徴を知っておくとまたいろいろ改善できるかもしれません。
このCSS特性を擬えているのが今回ご紹介した picture要素 による画像掲載です。
ただし「この画面サイズでは画像なし」という条件分岐はできません。CSSはそれもできます。

FC2ブログには元画像のURLを取得する変数はあるのですが、サムネイルのURL「だけ」を取得する変数がありません。
300×200 と 72×72 のサムネイルがあるにはありますが、いずれもimg要素 の出来上がりで返って来てしまうんですね。
この要素への属性追加や操作などはできませんのでLazyloadingも使えません。そしてalt属性がついていませんので構文エラーです。
このサムネイル2種を要素で出力するのではなくURLのみ返してくれるともっと良い結果が出せるのですが。
あと72四方は はっきり言って使えない。スマホ版のトップはこの72pxサムネがほとんどですが、ぼっけぼけで不明瞭なので最低でも150pxぐらいに変更したほうが良いと思います(笑)
現にはてなブログはサムネイルサイズの見直しがありましたよ?

記事一覧ページおよびトップページの一覧形式で、表示されているサムネイルの画像サイズを大きくしました - はてなブログ開発ブログ

はてなブログでは、記事一覧ページやトップページの一覧形式で、記事ごとにタイトルや本文概要とあわせてプレビュー表示されているサムネイルの画像サイズを500ピクセル四方にしました。

というわけで長くなりましたが、Lazyloadingに関する記事は最終となります。
あとはFC2ブログでのページスピードに関する考察を後日まとめようかな、と。
最後までお読み頂いた方、お疲れ様でした (o'ω')ノ

追記 2018.7.10

スムーススクロール(ページ内スクロール)とlazyloadingの共存を目指す方は以下の記事をお読みください。

Lazyloadingでページ内スクロールの到達位置がずれる件を解消する方法 - カスタマイズ

正直あんまりおすすめではない (´・ω・`) すすめない理由は 要素が増える めんどくさい 記事内でstyle属性あるいはstyle要素を必ず使う必要がある pタグ内の画像はどうする(セマンティクス面) こんなところでしょうか。...

YOU MAY ALSO LIKE
もっと見る
vanillaice (Akira)
vanillaice (Akira)

9 COMMENTS

There are no comments yet.

ロビンソン  

お世話になります。
この記事のpicture要素を記事のトップ画像に使いたくて試してみました。

<div class="exImage"><div class="exImage-item" style="text-align: center;"><picture><source media="(max-width: 414px)" srcset="" data-srcset="https://blog-imgs-103.fc2.com/f/i/l/filipinadating/sp-"記事番号".jpg"><source media="(max-width: 900px)" srcset="" data-srcset="https://blog-imgs-103.fc2.com/f/i/l/filipinadating/pc-"記事番号".jpg"><img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="https://blog-imgs-103.fc2.com/f/i/l/filipinadating/pc-"記事番号".jpg" alt="" class="lazyload"></picture></div></div>

上記の様に書いて、PC用は960x540、スマホ用は480x270の画像を用意しました。
まだ2件しか試していませんが、記事番号2のスマホでの表示が更新前の480x360の画像が表示されます。
https://filipinadating.blog.fc2.com/blog-entry-2.html

1番の記事には反映されているのですが、何か間違っている所があれば教えていただけないでしょうか。
https://filipinadating.blog.fc2.com/blog-entry-1.html

【追記】
すいません、個別記事ではPC、スマホ共に正常に表示されますが、スマホで汎用ページを表示した時に2番だけが古い画像ファイルが表示されています。
https://filipinadating.blog.fc2.com/page-51.html

この部分です。
https://blog-imgs-103.fc2.com/f/i/l/filipinadating/2018_06_25_IMG_1976-1.png

テンプレートはClassicaです、よろしくお願いします。

【追記2】
今気が付きましたが、上記URLの汎用ページですが、私のPCからはChromeのみ正常でFirefoxとEdgeでは表示が崩れています。

2018/06/25 (Mon) 19:15
vanillaice (Akira)

Akira  

To ロビンソンさん

こんにちは。

えっと、まずご質問内容を額面通りに受け取って良いのか困惑しているのですが、質問に質問で返すことをお許しください。
(まだ内容など検証前で質問内容だけ読んで書いてます)

1. sp-"記事番号".jpg〜

これはロビンソンさんが記事番号をファイル名称にしているという意味でしょうか。
それとも他に何か重要な意味がありますでしょうか。
画像ファイルは記事番号と連動しているわけではないので何か意図があるのかしら。

2. 記事番号2のスマホでの表示が更新前の480x360の画像が表示されます〜

「更新前」というのは?
PCが横960、スマホが横480の設定であればスマホで480の画像が出ていれば正しいと思うのですが。
「更新前」というのはpicture要素を使う前(img要素で書いていた時)の内容という意味ですか?
それとも画面の拡大・縮小による(あるいはデバイス変更による)「ブレイクポイントの更新」という意味かしら。

3. 2番だけが古い画像ファイルが表示されています〜

画像ファイルが古いか新しいかは私ではわかりません。
ロビンソンさんが言う「古いファイル」の画像URLと「新しいファイル」の画像URLをそれぞれお伝えください。
どんな状態が「正しい」と思える形なのかはロビンソンさんにしかわかりません。もしかしてキャッシュのことでしょうか?

4. 汎用ページを表示した時に〜

「汎用ページ」というのはどのページ種のことでしょうか。
汎用 = 広く使われる
という意味だとして「汎用ページ送り」なら複数種ページで利用されるので理解できるとして、汎用ページというのはどれのことだろう (´・ω・`)
提示URLは個別記事2件だと思うのでそのいずれかのページのことですか?

一旦投稿します。

2018/06/26 (Tue) 11:02
vanillaice (Akira)

Akira  

To ロビンソンさん

entry-2の記事について

拝見しましたがPCでは960、スマホでは480にちゃんと切り替わっています。
やはり「更新前」の意味がよくわかりません。
今ふと思いましたが、もしかしてスマホでの画像URLの確認を長押しでされましたでしょうか?
スマホでの長押し保存はimg要素のsrc属性を頼りにしていますので、srcにpc用を設定している場合にはその画像が保存されることになります。
picture要素内のimg要素はpicture要素未実装ブラウザ(古いIEとか)でも画像が表示されるように設定してあります。
対応ブラウザが遵守するのはsource内のsrcset属性の方なので、ロビンソンさんが問題なければsrc属性はsp用の方にしても構いません。
説明の的が外れてますかね (´・ω・`)
こちらは「更新前」の意味についてお返事待ちにします。

-------
entry-1の記事について

こちらはOKで2の方はダメ、ということだと思うのですが、2の方を「ダメ」とする理由がわからないです。ごめんなさい。
やはりここでも「古い」という意味がわからないです。

-------
汎用ページってもしかしてトップページのことですかね。
で、ロビンソンはWinOSですかね。
表示崩れについては今から確認しますので少しお時間ください。

-------
Winで確認しました。Win10最新, 全ブラウザ最新という環境です。
Chromeを始めFirefox, Edge共に表示崩れは確認できませんでしたので、ご利用のOSとブラウザのバージョン及び更新(OS, ブラウザアップデート)状況をお知らせください。
スクリーンショットもお願いします。

921pxを下回った際にサイドメニューが左寄りになってしまう件だとすれば、サイドメニュー部のアウトラインに対するflexレイアウトの指定が消失しているのが原因です。
でもこのことではないですよね。これはChromeでも同じはずなので。

-------
lazyloadでdataURIを使う理由は「バリデートエラーを避けるため」だけなので、dataURIを使うなら使う、使わないなら使わないとはっきりした方が良いと思います。
picture要素内には2つのsrcset属性と1つのsrc属性がありますので、全てにdataURIを指定するか、全てを削除(srcset="" のように空欄にするのではなく削除)するか統一すると良いですね。
バリデートが気にならない場合には削除しておいた方がメンテナンスは楽だと思います。
(ただしページ内スクロールのズレは大きくなります)

2018/06/26 (Tue) 11:20

ロビンソン  

To Akiraさん

お世話になります。

>記事番号をファイル名称にしているという意味でしょうか。

はい、その通りです。
以前からの習慣で、特別な意味はありません。

変更前の画像URL 640x480
https://blog-imgs-103.fc2.com/f/i/l/filipinadating/enter-1.jpg
https://blog-imgs-103.fc2.com/f/i/l/filipinadating/enter-2.jpg
https://blog-imgs-103.fc2.com/f/i/l/filipinadating/enter-3.jpg
https://blog-imgs-103.fc2.com/f/i/l/filipinadating/enter-4.jpg
https://blog-imgs-103.fc2.com/f/i/l/filipinadating/enter-5.jpg
https://blog-imgs-103.fc2.com/f/i/l/filipinadating/enter-6.jpg
https://blog-imgs-103.fc2.com/f/i/l/filipinadating/enter-7.jpg
https://blog-imgs-103.fc2.com/f/i/l/filipinadating/enter-8.jpg
https://blog-imgs-103.fc2.com/f/i/l/filipinadating/enter-9.jpg
https://blog-imgs-103.fc2.com/f/i/l/filipinadating/enter-10.jpg

変更後の画像URL(PC用) 960x540
https://blog-imgs-103.fc2.com/f/i/l/filipinadating/pc-1.jpg
https://blog-imgs-103.fc2.com/f/i/l/filipinadating/pc-2.jpg
https://blog-imgs-103.fc2.com/f/i/l/filipinadating/pc-3.jpg
https://blog-imgs-103.fc2.com/f/i/l/filipinadating/pc-4.jpg
https://blog-imgs-103.fc2.com/f/i/l/filipinadating/pc-5.jpg
https://blog-imgs-103.fc2.com/f/i/l/filipinadating/pc-6.jpg
https://blog-imgs-103.fc2.com/f/i/l/filipinadating/pc-7.jpg
https://blog-imgs-103.fc2.com/f/i/l/filipinadating/pc-8.jpg
https://blog-imgs-103.fc2.com/f/i/l/filipinadating/pc-9.jpg
https://blog-imgs-103.fc2.com/f/i/l/filipinadating/pc-10.jpg

同(スマホ用) 480x270
https://blog-imgs-103.fc2.com/f/i/l/filipinadating/sp-1.jpg
https://blog-imgs-103.fc2.com/f/i/l/filipinadating/sp-2.jpg
https://blog-imgs-103.fc2.com/f/i/l/filipinadating/sp-3.jpg
https://blog-imgs-103.fc2.com/f/i/l/filipinadating/sp-4.jpg
https://blog-imgs-103.fc2.com/f/i/l/filipinadating/sp-5.jpg
https://blog-imgs-103.fc2.com/f/i/l/filipinadating/sp-6.jpg
https://blog-imgs-103.fc2.com/f/i/l/filipinadating/sp-7.jpg
https://blog-imgs-103.fc2.com/f/i/l/filipinadating/sp-8.jpg
https://blog-imgs-103.fc2.com/f/i/l/filipinadating/sp-9.jpg
https://blog-imgs-103.fc2.com/f/i/l/filipinadating/sp-10.jpg

>「汎用ページ」というのはどのページ種のことでしょうか。

トップページ下部のページ送りで移動して、個別記事に移動する前のページです。
私のブログでは5件ずつ表示されます。
正式な名称がわからなくて、テンプレートにある汎用ページ送りを見て、勝手にそう呼んでいました。

2018/06/26 (Tue) 14:00

ロビンソン  

たった今確認すると、スマホでもPCの各ブラウザでも正常に表示されていました。
理由は分かりませんが、昨日の作業後には表示崩れあってGTmetrixのプレビューも崩れていました。
なので、表示崩れした状態のスクリーンショットはお見せできません。

昨日送ったiPhoneのスクリーンショットではentry-2の画像が変更前のままでした。

どちらにしても、自分でもきちんと把握できていない事を質問してご迷惑をお掛けしました。

>picture要素内には2つのsrcset属性と1つのsrc属性がありますので、全てにdataURIを指定するか、全てを削除(srcset="" のように空欄にするのではなく削除)するか統一すると良いですね。

これは私の理解不足で、記事を読んでsrc属性がsrc=""の中だけでsrcset=""には文字列を入れないと思っていました。
今からsrcset=""の中にも入れて更新します。

テンパっておかしな質問をして、お手数をおかけします。

2018/06/26 (Tue) 14:21
vanillaice (Akira)

Akira  

To ロビンソンさん(終了のご報告)

ファイル名の方は私の深読みでしたか(笑)

変更前 というのがなんの変更なのかまだわかっていませんが(たぶんブレイクポイント変更でデフォルトを「pc」と捉えた場合のことじゃないかと判断します)、いずれにしろ解決済ということでよろしいでしょうか。
もしかしたらロビンソンさんの作業中に一時的なFC2の不具合があったのかもしれないですね。
あるいはブラウザの一時的不具合とか。
ブラウザのレンダリング異常はhtmlを触っているとわりと出くわしますのでブラウザの再起動あるいはOSの再起動で直ることもありますよ。

あとはpicture要素が正しく機能しているかどうか確認したい時はpcとspで全く別の画像を指定してみると良いと思います。
さすれば一目瞭然で区別できる (o'ω')
あくまでも投稿テストとして。

2018/06/26 (Tue) 17:02

ロビンソン  

To Akiraさん

>変更前 というのがなんの変更なのか
>「更新前」というのはpicture要素を使う前(img要素で書いていた時)の内容という意味ですか?

そうです、明確に返答していませんで失礼しました。

>作業中に一時的なFC2の不具合があったのかもしれないですね。

そう思うしか無いくらい、昨日と今日では全く違っています。

お手数おかけしました。今後ともよろしくお願いします。


2018/06/26 (Tue) 17:35

ロビンソン  

お世話になります。
先日はpicture要素の件でお騒がせしました(笑)
あれから問題なく表示されて、4:3から16:9に縦横比を変えたことで、スマホではトップ画像の高さの値が小さくなり、見やすくなりました。

それから過去記事を参考にさせていただいて本文の頭に<img src="画像URL" alt="" style="display: none;">を追加することでIFTTTでのRSSとTwitterの"EntryImageUrl"画像付きでの連携やランキングサイトでの「新着記事画像」も表示されるようになりました。

いつも参考になる記事をありがとうございます。

P.S. サムネイルのリクエストに一票入れさせていただきました。

2018/07/04 (Wed) 21:55
vanillaice (Akira)

Akira  

To ロビンソンさん

ロビンソンさん、こんにちは (o'ω')ノ
ご投票ありがとうございます。実現すると良いなぁ ( ̄∀ ̄;)

display: none は読み込み自体は行われるのであんまり良くはないんですけどね。
でもアイキャッチ画像設定の性質を考えたらここは致し方ないですね (´・ω・`)

こちらこそいつもありがとうございます

2018/07/05 (Thu) 16:17