2021年4月13日（執筆現在）ではRetinaディスプレイが主流であるためWebサイトに挿入する画像解像度を2倍にする必要があります。
目次
Retinaディスプレイとは何か？
RetinaディスプレイはiPhoneやMacの標準ディスプレイで、画像を通常の2倍のピクセル数で美しく表示することができるディスプレイです。2倍のピクセル数で表示がされる故に通常のピクセル数だとぼやけて表示されてしまいます。
解決策
2つの方法を紹介します。
画像の解像度を2倍にする
画像の解像度を2倍にして、widthとheightを半分のサイズで指定します。
通常のサイズでありつつ、Retinaディスプレイで見た際には2倍のピクセル数で表示されるようになります。
srcsetを指定する
<img src="image/sample.jpg" srcset="image/sample1.jpg 1x,img/sample2.jpg 2x" alt="sample">このように指定することで、通常のディスプレイではsample1.jpg（通常のサイズに指定した画像）、Retinaディスプレイでは
sample2.jpg（2倍のサイズに指定した画像）が表示されます。
メリットとして通常ディスプレイが見た際に、2倍のサイズに指定した画像が読み込まれないので、読み込みが早くなります。