Cocoonで「画像要素で width と height が明示的に指定されていない」とPageSpeed Insightsから怒られたときの対処法

Cocoonを使っているとPageSpeed Insightsで「画像要素で width と height が明示的に指定されていない」の指摘を受けることがあります。
この原因の一つはボックスメニューなど特定のウィジェットを使っている場合。
対処法を以下に記します。

対処法１　CSSで指定する

一つはCSSで指定する方法です。
ここではボックスメニューウィジェットを例にとります。

サイト画面でF12を押します。
ボックスメニューのアイコンを右クリックして検証を押します。
すると、CSSセレクタがわかります。

子テーマのstyle.cssに次の記述をします。

#box_menu-【調べた番号】 .box-menu-icon img{
width:60px;
height:60px;
}

IDセレクタ（#box_menu-【調べた番号】）がないとサイト全てのボックスメニューアイコンに適用されてしまいます。
御注意ください。

環境によっては前項の方法で解決できない場合もあります。
その場合は追加でカスタムHTMLウィジェットを使って直接指定します。
同様にボックスメニューを例として説明します。

「外観」→「ウィジェット」を開き「カスタムHTML」ウィジェットを設置します。
ボックスメニューウィジェットの方は後で削除しますから、その上下どちらかに設置するのがいいでしょう。

サイト画面をChromeで開き、ボックスメニュー上で右クリックして「検証」をクリックします。

当該要素の上で右クリックします。
この場合でしたら、下の記述です。

div class="box-menus no-icon"

「copy」→「copy outer HTML」をクリックします。

先程の「カスタムHTML」にコピペします。

imgタグ全てに次の記述を加えます。

width="（画像サイズ）" height="（画像サイズ）"

注意点として、Retina対応にしている場合は倍の数字を入れてください。
60×60なら120×120となります。
（もちろん画像ファイル本体の解像度も倍である必要あり）

無事に解決できたでしょうか？