ファイル名の拡張子を.pngから.jpgに書き換えたら変換される？

変換されません。拡張子はただの名札で、中身は元の形式のままです。形式を変えるには、画像編集ソフトや変換サイトで「別の形式として保存」する必要があります。

iPhoneで撮った写真（HEIC）がサイトで表示できない

HEICはApple端末用の形式で、ブラウザでは表示できません。JPGかWebPに変換してから使います。iPhoneの設定で「互換性優先」にすると、最初からJPGで保存されます。

写真・イラスト・スクショはWebPでほぼ正解です。ただしロゴやアイコンのように拡大しても劣化してほしくないものはSVG、印刷用や編集途中の保存は元の形式が向いています。

画像を保存するとき「JPGとPNG、どっちだろう？」と手が止まる——Webで使う画像形式の使い分けは、実は1枚の表で決まります。まず答えを出して、そのあと理由を説明します。

迷ったら「写真も図もWebP、ロゴだけSVG」。これだけでほぼ正解です。

JPG（JPEG）は、写真のような色数の多い画像を「人の目にはわからない程度に情報を間引いて」小さくする形式です。デジカメ・スマホの標準で、写真ならファイルサイズと画質のバランスが優秀です。

弱点は2つ。背景の透過ができないことと、間引きの副作用で文字やイラストの輪郭がにじむこと。スクショやロゴにJPGを使うと、もやっとした画質になります。

PNGは情報を間引かずに保存する形式です。文字・線・ベタ塗りがくっきり残るので、スクリーンショットとイラストの定番。背景を透過できるのも大きな強みで、切り抜きキャラやロゴの配置に使われてきました。

弱点は、写真に使うとファイルが重くなること。風景写真をPNGで保存すると、JPGの何倍ものサイズになることがあります。

WebP（ウェッピー）は、Webのために作られた新しめの形式です。JPGの得意分野（写真）でもPNGの得意分野（透過・くっきり）でも、だいたい2〜3割軽くなります。現在の主要ブラウザはすべて対応しており、迷ったらこれでOKという立ち位置になりました。

弱点はほぼありませんが、古い画像編集ソフトだと開けないことがあるくらいです。

ここまでの3つが「点の集まり」なのに対し、SVGは「線や図形の描き方の指示書」でできています。だからどれだけ拡大してもギザギザにならず、ファイルもごく小さい。ロゴ・アイコン・単純な図に最適です。

逆に、写真のような複雑な画像はSVGにできません。イラストでも、水彩画のような塗りの複雑なものは苦手です。

GIFはパラパラマンガのように動く画像を作れる形式ですが、色数が256色までで画質が粗く、ファイルはとても重い。いま「動くもの」を載せるなら、動画（MP4）やアニメーションWebPのほうが軽くてきれいです。

形式を正しく選んでも、スマホで撮った写真は幅4000pxもあって、そのままでは重すぎます。リサイズ（幅1200〜1600px程度）→圧縮のひと手間で、ページの表示速度が見ちがえます。

画像はページの容量の大半を占める「重さの主犯」です。形式を選べるようになると、あなたのサイトは目に見えて速くなります。