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্ʹ঺հهࣄ͕ͨ͘͞Μ͋ΔͷͰɺ
   ࣗ෼Ͱௐ΂ͯ΍ͬͯΈΑ͏ɻ
   ʮॖখઐ༻ʯͳͲͷΞϓϦΛΠϯετʔϧ͢Ε͹
   ΋ͬͱ؆୯ʹͰ͖ΔͷͰɺ͜Ε΋ௐ΂ͯ΍ͬͯΈΑ͏ɻ

7. ը࣭Λͦͷ··ʹσʔλྔΛܰ͘͢Δ ը૾ͷେ͖͞΍ը࣭͸ͦͷ··ʹσʔλྔΛμΠΤοτͰ͖Δ
   ΞϓϦ΍8FCαʔϏεΛར༻͢Δɻ 7PSBMFOU
   "OUFMPQF
   ʢ8JOEPXTΞϓϦʣ IUUQTCPMESJHIUDPKQQSPEVDUTBOUFMPQF 5JOZ1OHʢϒϥ΢β͔Βར༻ʣ IUUQTUJOZQOHDPN ˞ৗʹ࢖༻͢Δඞཁ͸ͳ͘ɺ੍࡞ͷ࢓্͛࣌ʹར༻͢Ε͹0,

8. ϑΝΠϧ໊ͷϧʔϧ w ൒֯ӳ਺จࣈΛ࢖͏
   w খจࣈͷ
   B
   ˠ
   [
   Λ࢖͏
   w ਺ࣈͷ
   
   ˠ
   
   ΋࢖͑Δ
   w ϋΠϑϯ
   
   ΋࢖͑Δ
   w

   ΞϯμʔείΞ
   @
   ΋࢖͑Δ ͦͷଞ͸࢖͑ͳ͍ͷͰ஫ҙʂ ˕MPHPQOH
   QIPUPKQH
   BCPVUIFBEFSKQH ʷ1IPUP+1(
   ̥̝̤̩̤KQH
   ࣸਅKQH
   QIPUP
   KQH େจࣈ
   શ֯จࣈ
   ೔ຊޠ
   εϖʔε

9. ը૾ϑΝΠϧΛ؆қతʹ8FCʹஔ͘ํ๏ ௨ৗ͸ɺ8FCαʔόΛϨϯλϧͯ͠ɺͦ͜ʹը૾ΛΞοϓϩʔυ͢Δ͕
   ͦΕ͕Ͱ͖ͳ͍৔߹΍ɺ$PEF1FOͳͲͰ؆қతʹը૾Λ࢖͍͍ͨͱ͖͸
   ʮ&BTZ
   6QMPBEFSʯͷΑ͏ͳαʔϏεΛར༻͢Δɻ IUUQTGSFFVQMPBEFSY[ZQX Ξοϓϩʔυ͢ΔલʹαΠζมߋΛ͓ͯ͜͠͏ɻϑΝΠϧ໊͸ࣗಈతʹม׵͞ΕΔͨΊɺઌͷΑ͏ͳϧʔϧ΋ؾʹ͠ͳ͍͍ͯ͘ɻ

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