How to optimize images for Better Web Design

Transcript

1. 8FCͰ࢖͏ը૾

2. 8FCαΠτͰը૾Λ࢖͏ཧ༝ ᶃ ݟͨ໨͕՚΍͔ʹͳΔ
   ᶄ ಺༰͕Θ͔Γ΍͘͢ͳΔ ͭ·Γɺ఻͍͑ͨ͜ͱ͕఻ΘΓ΍͘͢ͳΔɻ

3. 8FCͰը૾Λ࢖͏ͱ͖ͷ஫ҙ఺ ᶃ σʔλྔ͸Ͱ͖ΔݶΓখ͘͞ʢ͍ܰʣ
   
   ˠ
   େ͖͍ͱද͕ࣔ஗͘ͳΔʢॏ͘ͳΔʣɺ
   ɹ
   
   ར༻ऀʹ௨৴ෛՙΛ͔͚ͯ͠·͏ʢύέࢮʣ
   ᶄ ྑ͍ը࣭Ͱදࣔ͢Δ
   
   ˠ
   σʔλྔͱͷόϥϯεΛΈͳ͕Β
   ɹ
   
   ༻్ʹԠͯ͡࠷దԽ͢Δඞཁ͕͋Δ

4. ಡΈํ ֦ுࢠ ը࣭ ಁա ༻్ +1&( δΣΠϖά KQH ྼԽ͢Δ ಁաͰ͖ͳ͍

   ࣸਅ 1/( ϐϯά .png ྼԽ͠ͳ͍ ಁաͰ͖Δ ϩΰɺਤͳͲ
   ৭਺͕গͳ͍΋ͷ 8FCͰ࢖͏ը૾ͷछྨ ͦͷ΄͔8FC1΍47(ɺ(*'ͳͲͷܗ͕ࣜ͋Δ͕ɺ͜ͷतۀͰ͸ѻΘͳ͍ɻ
   ͜ͷतۀͰ͸+1&(ͷѻ͍Λৄ͘͠આ໌͢Δɻ
   কདྷతʹ͸8FC1͕ελϯμʔυͳܗࣜʹͳΔͱݴΘΕ͍ͯΔɻ ࣸਅΛ1/(ܗࣜʹ͢Δͱ
   σʔλྔ͕େ͖͘ͳΔέʔε͕ଟ͍ͨΊ
   ࣸਅΛ1/(ܗࣜʹ͠ͳ͍͜ͱʂ

5. ը૾αΠζͷ࠷దԽ ෯
    QY
   ߴ͞
    QY
   σʔλྔ
   .# ෯
    QY
   ߴ͞
   QY
   
   σʔλྔ
   ,# ύιίϯ΍εϚϗͷϞχλͰ͸
   ͜ͷαΠζͰे෼͖Ε͍ʹݟ͑ΔͷͰ
   খ͔ͯ͘͞͠Βར༻͢Δ

   J1IPOFͰࡱӨͨ͠ΦϦδφϧͷαΠζ ͜ͷ৔߹
   σʔλྔ͸
   ʹ ϊʔτ1$ͷը໘෯͸ QYલޙ ॖখ͢Ε͹

6. ը૾αΠζมߋͷํ๏ 8JOEPXT΋.BD΋ඪ४ΞϓϦͰͰ͖Δɻ
   ΍Γํ͸ɺ8FC্ʹ঺հهࣄ͕ͨ͘͞Μ͋ΔͷͰɺ
   ࣗ෼Ͱௐ΂ͯ΍ͬͯΈΑ͏ɻ
   ࠓճ͸εϚϗͰࡱӨͨ͠ը૾Λ
   $BOWBͱ͍͏αʔϏεΛར༻ͯ͠
   ύιίϯʢ.BDʣͰ࢖͑ΔΑ͏ʹ͢Δɻ
   

7. ը૾ϑΝΠϧΛ؆қతʹ8FCʹஔ͘ํ๏ ௨ৗ͸ɺ8FCαʔόΛϨϯλϧͯ͠ɺͦ͜ʹը૾ΛΞοϓϩʔυ͢Δ͕
   ͦΕ͕Ͱ͖ͳ͍৔߹΍ɺ$PEF1FOͳͲͰ؆қతʹը૾Λ࢖͍͍ͨͱ͖͸
   ʮ&BTZ
   6QMPBEFSʯͷΑ͏ͳαʔϏεΛར༻͢Δɻ IUUQTVQMPBEFSY[ZQX

8. ʁͳ͜ͱ͸(PPHMFݕࡧͰ
   ͍͍ͩͨղܾͰ͖Δ
   8FC༻ͷը૾ʹ͍ͭͯ͸ɺ8FC্ʹେྔͷ৘ใ͕͋Γ·͢ɻ
   (PPHMFͰݕࡧ͠ɺ౴͑Λࣗ෼Ͱݟ͚ͭग़ͤΔΑ͏ʹ͠·͠ΐ͏ɻ
   ࣗ෼ͰղܾͰ͖ΔΑ͏ʹͳΔͱɺࣗश͕ḿΓϝΩϝΩͱ্ୡ͠·͢ɻ