How to optimize images for Better Web Design

How to optimize images for Better Web Design

Webで使う画像について

91e7aee9769836f448a9f1ce91255749?s=128

Masateru YOSHIMURA

October 30, 2020
Tweet

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 QIPUPKQH େจࣈ શ֯จࣈ ೔ຊޠ εϖʔε
  9. ը૾ϑΝΠϧΛ؆қతʹ8FCʹஔ͘ํ๏ ௨ৗ͸ɺ8FCαʔόΛϨϯλϧͯ͠ɺͦ͜ʹը૾ΛΞοϓϩʔυ͢Δ͕ ͦΕ͕Ͱ͖ͳ͍৔߹΍ɺ$PEF1FOͳͲͰ؆қతʹը૾Λ࢖͍͍ͨͱ͖͸ ʮ&BTZ6QMPBEFSʯͷΑ͏ͳαʔϏεΛར༻͢Δɻ IUUQTGSFFVQMPBEFSY[ZQX Ξοϓϩʔυ͢ΔલʹαΠζมߋΛ͓ͯ͜͠͏ɻϑΝΠϧ໊͸ࣗಈతʹม׵͞ΕΔͨΊɺઌͷΑ͏ͳϧʔϧ΋ؾʹ͠ͳ͍͍ͯ͘ɻ

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