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