iPhoneで撮った画像をWordPressに使用する際の注意点や失敗・対処法を紹介します。cocoonテーマでサムネイルの表示がおかしかったので調べた結果です。結論を先にいうと、素直にheic→jpeg変換でOKです。
WordPressのcocoonテーマのサムネイルがおかしい？
このブログではcocoonテーマを使って、記事内の最初に貼った画像を自動でアイキャッチとして使用する設定にしています。アイキャッチ画像はそのまま下記のサムネイルにも連動し表示されます。
- インデックスカード
- 新着記事ウィジェット
- 人気記事ウィジェット
- 関連記事ウィジェット
- カルーセルカード
- ページ送りナビ
- ブログカード
こうして箇条書きしてみると、いろいろなところに自動で使用されているのがわかります。テーマ製作者にはいつも感謝です。
また「Regenerate Thumbnails」というプラグインで画像の再生成し、画像の大きさをテーマに合わせ揃えて最適化するようにも設定しています。
このブログを始めてからこの設定で問題なかったのですが、先日書いた記事にiPhoneで撮った縦長の画像を使用したところ、サムネイルが縦長のままに…？
環境はざっくりと、MacBook m1で、WordPressのcocoonテーマを使用し、iPhone12maxで撮った画像をアップロードといった感じ
iPhoneで撮った画像をWordPressで問題なく使う方法
WordPress上でiPhone画像をそのままアップロードしたら、そのまま記事に貼り付けることができたので、少し気にはなったのですが、記事を投稿し公開してみました。ところが…
iPhoneの画像はheicファイル
iPhoneで撮った画像はheicという拡張子のファイルで保存されています。以前なにかしら作業で引っかかり別のファイル形式に変換して使用ことがあるので「iPhoneはheicファイル」と頭の中では意識はしていました。
HEIC ファイルとは？
HEIC ファイルの拡張子は .heic です。2017年にApple社がiPhone とiPad のデフォルト形式として採用して以来、Apple 製品と深く結びついています。HEIC はHigh Efficiency Image Format（高効率画像形式）
heicファイルはそのまま貼れるけど、サムネイルの縦横比がおかしい
投稿した記事を確認すると、なんだか残念な感じに…。縦の画像でもプラグインが自動で調節してくれるはずが、そのままの縦の画像で表示されています。そのせいで全体的にズレが生じ、見た目が残念な感じになってます。
おそらくiPhoneで撮った画像のheicファイルに何かしらの問題が…。
自動変換プラグインがheicファイルに対応してくれない
プラグインの不具合・設定ミスかなと「Regenerate Thumbnails」で画像の再生成すると、再生成できないファイルがひとつ表示され、それがやはり「heic画像」でした。
なんとなくの直感ですが、今回使ったプラグインだけでなく、他の画像系プラグインもheicファイルに対応していなそうな気配をむんむん感じました。
jpegファイルに変換
今後のブログ制作を考慮し、素直にjpeg画像に変換してアップロードし直すことに。
PC内の元画像をダブルクリックでMacプレビューで開き、書き出す→jpegにフォーマット。
変換方法は他にもありそうですが、MacBookではこれが一番最速に感じました。
iPhoneからだと、画像選択→AirDrop→Macプレビューで開く→jpegに書き出すの流れです。
他に簡単にheic画像を処理する方法
他に簡単に変換できないか調べたら、下記の方法がありました。
・WordPressのアプリから画像をアップロード。自動でjpeg変換してくれる
・iMazing Converterという無料アプリ。複数の画像を一括で変換できる
いまのところMacプレビューからの変換で間に合ってるので試してませんが、複数画像を一括変換できるアプリは今後利用させていただく可能性があるので備忘録としても記載しておきました。
まとめ
iPhoneで撮った画像はそのままWordPress上にアップロードできますが、多少の不具合が発生します。今回はサムネイル画像のサイズ変更がプラグインによって自動でされず、サイト全体のレイアウトが崩れてしまってました。ぱっと見で不具合を感じられたので即座に気づき対処できましたが、目に見えない内部の不具合だったらもっと面倒だったと思います。
- heicファイルは素直にjpegファイルに変換する
- 画像系プラグインはheicに対応してなさそう
- WordPressアプリからなら自動変換
このブログが少しでも誰かの役に立ちますように！