【Smart Slider 3】スライダー設定⑥ 最適化 (Optimize)【WordPress】

Smart Sliderの『セッティング：最適化』について解説しています。Pro版の機能も含めて解説しているので、すでにPro版ユーザーの方、または、これからPro版を使い始める方にとって有益になるよう構成しています。

また、無料版ユーザーの方にとっても基本操作の理解が深まるように記述しており、合わせて『Pro版アップグレードで可能になること』のイメージも明確になると思います。

本記事は、パソコンの画面から見ていただくことを推奨します。

スライダー設定 (最適化)
読み込み
Slide Background Images
Layer Images
その他
まとめ

スライダー設定 (最適化)

スライダー設定の『最適化』について解説していきます。
ここでは、スライダーの読込みが、重くならないように、表示スピード向上の為の設定を行っていきます。

必ず設定しなければいけない訳ではありません。大きな画像を多めに使用していたり、複雑なレイヤーアニメーションを設定しているなどで、読込みが重くなるような場合は、ここで最適化を検討してみると良いでしょう。

読み込み

『Loading Type』から読込み方法を選択します。
　・Instant：スライダーは遅延なく即座に読み込まれる
　・After page loaded：ページの読み込み後にスライダーが読み込まれる
　・After delay：スライダーの読み込み遅延時間を設定できる

『表示時に再生する』がオンの場合、以下の条件になったらスライダーが再生します。
『At』でパーセンテージを指定

・指定した%のスライダーが表示されたら
・指定した%、スライダーがブラウザ画面を覆ったら

Slide Background Images

『Loading Mode』は、背景画像の読込みをどのように遅延させるかを指定できます。

・通常：背景画像は遅延なく読み込まれる
・遅らせて読み込む：背景画像はサイトの他の要素が全て読み込まれた後に表示される
・とても遅らせて読み込む：隣のスライドの背景画像のみ読み込む。読み込む数を指定。

『Convert To WebP』をオンにすると、背景画像をpng やjpg などよりも高圧縮で軽量なWebPに変換して表示してくれます。
『品質』では、変換後の画質のレベルを%で指定できます。低くし過ぎると画像が荒くなるので注意して下さい。

『Resize』をオンにすると、スライド背景画像から、より小さなサイズの画像を作成してくれます。サイズも「Default」「Medium」「Small」で指定することが出来ます。

基本、Width(横幅)のみ設定してみて、スライダーの高さと、リサイズした画像の高さが合わない時だけ、Hight(高さ)も設定するので良いかと思います。

・Default：画像のデフォルトのリサイズ数値を設定
・Medium：タブレット端末向けに中サイズのリサイズ数値を設定
・Small：モバイル端末向けに小サイズのリサイズ数値を設定

『Retina』をオンにしておくと、レティナディスプレイ表示の際は、高解像度の表示に耐えるため、1サイズ大きいリサイズ画像を選択してくれます。

『Resize Thumbnail』をオンにすると、スライダーのコントトロール系(Bulletボタン、矢印ボタン、サムネイルボタン等)に使用される画像向けに、背景画像をリサイズ出来ます。

『Thumbnail Quality』では、変換後の画質のレベルを%で指定できます。

『Width』『Hight』は、スライドで使用する画像の縦横比に合わせて、リサイズした数値を設定しておくと良いでしょう。

Layer Images

『Layer Images』で『Convert To WebP』をオンにすると、スライド上に配置されたすべてのレイヤー画像がWebP形式に変換されます。
『品質』で、変換後の画質のレベルを%で指定できます。

『Resize』をオンにすると、元画像から、より小さなサイズの画像を作成してくれます。横幅サイズも「Default」「Medium」「Small」で指定することが出来ます。

『Retina』をオンにすると、レティナディスプレイ表示の際は、高解像度の表示に耐えるため、1サイズ大きいリサイズ画像を選択して表示します。

『Base64 Embed』をオンにすると、レイヤー上に配置される比較的小さな画像の情報を、テキスト形式に変換してページソースに埋め込むことで、画像の読込み時間を短縮させます。

『Max File Size』では、Base64エンコードで読み込まれる最大ファイルサイズを指定します。