Web制作において一番使われると言っても過言ではないimgタグ。でも気を抜くとすぐに見た目が崩れたり、表示が遅くなったりして困りますよね・・・
しかも表示が遅いとそれだけでクライアントに指摘されて印象Down・・・

そんなimgタグを完全攻略します！この本を読めば、
・画像を高速で読み込む
・思った通りのサイズで表示する
・どんな画面幅でも完璧にレスポンシブ対応

などimgタグを思い通りに操れます！
imgタグのせいで失った時間を取り戻し、コーディングをスムーズにして案件効率を爆速化！そして他のコーダーと差別化して単価UPも狙いましょう！

また、imgタグに関連した実用的テクニックについても解説！

・imgタグのサイズの決まり方
・imgタグとbackground-imageの完璧な使い分け
・デバイスに合わせて適切に画像を出し分ける方法
・サイトの読み込み速度を実質10倍以上にする方法
・サイズを1/10にする画像圧縮テクニック

と、フリーランス8年間で培ったテクニックを大公開します！

【完全攻略】imgタグ解体新書【LP案件単価UP】

基本編

imgタグの概要と正しい指定方法

src属性：基本中の基本

alt属性：アクセシビリティとSEO向上

width、height属性：パフォーマンス、UI/UX向上

loading属性：lazy loadingによる読み込み速度改善

decoding属性：画像処理を並列化しページの読み込みを高速に、と言われているが・・・

実用編

imgタグのサイズの決まり方と、おすすめのデフォルトCSS

imgタグとbackground-imageの完璧な使い分け

デバイスに合わせて適切に画像を出し分ける方法

たったの一行でサイトの読み込み速度を実質10倍以上にする

サイズを1/10にする画像圧縮テクニック

html

webp

hideki_climax