サイト制作で起きた問題と解決策（HTML/CSS）

サイト制作で起きた問題とその解決策の備忘録のまとめ
（HTML／CSS初心者）

記事の内容

ファビコンが設定されない

ルートディレクトリにファビコン画像を置いた場合、自動的にファビコン設定されるが、一応headタグ内に以下のコードを記述したが、うまく動作しなかった。

  <link rel="icon" href="/favicon.ico">
  <link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="180x180">

解決策
ルートディレクトリにファビコン画像を置いた場合は、コードを表記しない方がうまくいった。
自動設定、自動参照に任せてしまったほうが良いと言う結果。

SVGデータをインライン記述ではなくimgで読み込んだ時、ブラウザによって表示されたりされなかったりする。

解決策
SVG内のコードの部分の「img」を「image」に書き換える。
下記を参照。

【SVGファイル内】
（修正前）xlink：href = "data：img/png;
（修正後）xlink：href = "data：image/png;

illustretorでのSVG書き出しでこうなることがあるそう。

Google推奨のjpg2はsafariのみで対応、
WebPはsafari未対応なので、やはりjpgかpngを使うのがベターという個人的結論。

画質を保ちながらどこまで圧縮できるかの検証。

Macの標準アプリ「プレビュー」で「書き出し」→「圧縮」
圧縮は左から4メモリまで下げても通常のアイキャッチや挿入画像は十分使用できるレベルと判断。画像データが軽くなると、サイトの動的な挙動が圧倒的に良くなった。

ちなみにjpg2と同レベルの圧縮率での画質のちがいは、jpgの方がjpg2に比べて境界やディテールがはっきり目にでた。