# コーディング制作について
# 画像の取り扱い
画像はページの読み込み速度に影響しやすく、取り扱う場合は拡張子に注意しましょう。
基本的に写真は jpg、フラットなグラフィック画像は png、透過が必要な画像も png、小さいアイコンやアニメーションは gif、ベクターデータは svg 形式で扱います。
Chrome などのモダンなブラウザでは webp 形式を使うことができ、更に読み込み速度が向上します。
HTML コーディングで画像のレスポンシブや Retina 対応には picture タグ、srcset 属性を使った 2 つの方法があります。（正確には picture タグと srcset 両方をかけ合わせた方法の 3 つ目があります）
PC,SP で別の画像を使いたい場合（SP ではズームした画像を使うなど）は picture タグ、PC,SP で解像度を変更するのみなら srcset 属性を使う形が好ましいです。
ただ、これだけ最適化する必要が出てくると画像を 1 つ差し替えるだけでもそれなりに手間がかかります。写真を入れ替えるだけである程度自動的に webp 形式に変換されるなどの仕組みを用意することが好ましいです。
WordPress はこの点、関数を使うことである程度自動的に対応することができ、またテーマの作りにもよりますが webp への自動変換もプラグインが行ってくれます。CMS による画像の出力方法を最適化することは運用・保守フェーズでの作業量を減らすことに繋がります。
# 動画の取り扱い
# 軽量化
HandBrake (opens new window)というソフトで動画ファイルを圧縮させます。
参考：>Web サイトで動画再生させる場合に必須！動画の軽量化方法 | 株式会社 LIG (opens new window)
# 配信方法は HLS
動画は基本 HLS 形式で配信させます。hls.js (opens new window)を使えば非対応ブラウザにも対応できます。（hls.js はVideo.js (opens new window)に組み込まれているので別途読み込みは不要）
ffmpeg を使って mp4 形式の動画を m3u8 ファイル、ts ファイルに分割して読み込むことで、一度に読み込むファイル量を抑えることができます。
軽量化した動画ファイルは以下コマンドで分割し、配信用ファイル用として扱います。
ffmpeg -i video.mp4 -c:v copy -c:a copy -f hls -hls_time 6 -hls_playlist_type vod -hls_segment_filename "video%3d.ts" video.m3u8
# Android で Video.js を使う場合の注意点
video タグではなく<video-js>を使う必要があります。