Upgrade to Pro — share decks privately, control downloads, hide ads and more …

How We Gain "Mobile First" Using WebP with ImageMagick

Issei Naruta
February 18, 2015

How We Gain "Mobile First" Using WebP with ImageMagick

2015/2/18 画像変換Night http://connpass.com/event/11516/

Issei Naruta

February 18, 2015
Tweet

More Decks by Issei Naruta

Other Decks in Technology

Transcript

  1. *NBHF.BHJDL8FC1Ͱ

    ϞόΠϧϑΝʔετͪ͠Ό͏
    !NJSBLVJ *TTFJ/BSVUB

    *OGSBTUSVDUVSF%JW$PPLQBE *OD
    ը૾ม׵/JHIU

    View Slide

  2. ࠓ೔֮͑ͯؼͬͯ
    ΄͍͜͠ͱ

    View Slide

  3. ΢Σοϐʔ

    View Slide

  4. IUUQKBXJLJQFEJBPSHXJLJ8FC1

    View Slide

  5. IUUQUFDIMJGFDPPLQBEDPNFOUSZ

    View Slide

  6. J04"OESPJEΞϓϦͰ͸

    ྉཧࣸਅΛ8FC1Ͱදࣔ

    View Slide

  7. ͳͥ8FC1͔ʁ

    View Slide

  8. +1&(ʹൺ΂ͯϑΝΠϧαΠζ
    ͕খ͘͞ɺը࣭΋ྼԽ͠ʹ͍͘

    View Slide

  9. View Slide

  10. 8FC1ͷܽ఺

    View Slide

  11. ܽ఺
    w ରԠ؀ڥ͕গͳ͍
    w ʮӈΫϦοΫͰը૾ΛอଘʯͰ+1&(͕ཉ͍͠ਓʑ
    w GBDFCPPLͷ8FC1ෆධࣄ݅
    w ωΠςΟϒΞϓϦͳΒ໰୊ͳ͍ͷͰ͸
    w ᠘"OESPJEҎ߱Ͱඪ४ରԠͱࢥ͍͖΍ͦ͏Ͱ΋ͳ͍

    ˠҎ߱ͷΈ༗ޮʹ͍ͯ͠Δ

    View Slide

  12. ʮ࣌୅͸΢ΣοϐʔͰϞόΠϧϑΝʔετ͔ͩΒɻ

    5PGV͸*NBHF.BHJDLͳΜ͔ͩΒ͙͢Ͱ͖ΔͰ͠ΐʯ
    ʮ༨༟ͬ͢Αʯ

    View Slide

  13. 5PGV
    w ΫοΫύουʹ͓͚Δը૾ͷಈతม׵γεςϜ
    w "QBDIFϞδϡʔϧ*NBHF.BHJDL
    w ৄ͘͠͸ʮDPPLQBEUPGVʯͰݕࡧ
    w IUUQXXXTMJEFTIBSFOFUNJSBLVJTT

    View Slide

  14. *NBHF.BHJDLͷ

    8FC1ରԠঢ়گΛௐࠪͯ͠ΈΔ

    View Slide

  15. IUUQEIBUFOBOFKQZPZBXFCQ

    View Slide

  16. ͔Β8FC1ରԠʂ
    ౰࣌5PGV͸

    View Slide

  17. Α͔ͬͨʜָউͳ΍ͭͩʜ
    MJCXFCQϦϯΫͯ͠ϦϏϧυ͢Δ͚ͩͰ
    ͍͍ΜͰ͠ΐ

    View Slide

  18. ॱௐʹݟ͑ͨ8FC1ಋೖ
    ͔͠͠ͻͱ͚ͭͩ໰୊͕͋ͬͨ

    View Slide

  19. *NBHF.BHJDL

    ͷ8FC1पΓ͸ͿͬյΕͯΔ

    View Slide

  20. *NBHF.BHJDLͰͷ8FC1
    w 8FC1΁ม׵͢Δࡍʹ2VBMJUZʢը࣭ʣͷࢦఆ͕Ͱ͖ͳ͍
    w 8FC1ͷ໨ۄͰ͋Δը࣭ίϯτϩʔϧ͕Ͱ͖ͳ͍ɻແҙຯ
    w ม׵ޙ͸ৗʹ2VBMJUZʹͳΔʢθϩͱ͸ʜʣ
    w ϦαΠζɺΫϩοϓपΓͷڍಈ͕όάͬͯΔ
    w $.:,ը૾Λม׵͢Δͱ৭͕͓͔͘͠ͳΔ
    w ϝϞϦϦʔΫ͕͋Δ

    View Slide

  21. ͭ·ΓյΕͯ·͢

    View Slide

  22. $IBOHF-PHΛ
    ௥ͬͯΈΔ

    View Slide

  23. 8FC1ରԠ
    ʢͱओுʣ

    View Slide

  24. ϝϞϦϦʔΫमਖ਼

    View Slide

  25. 2VBMJUZࢦఆʹରԠ
    ʢػೳ௥ՃΈ͍ͨʹݴΘΕͯ΋ʜʣ

    View Slide

  26. ·ͨϝϞϦϦʔΫͷमਖ਼

    View Slide

  27. 8FC1ΛσϑΥϧτT3(#Ͱ

    ग़ྗ͢ΔΑ͏ʹมߋ

    View Slide

  28. +1&( $.:,
    8FC1
    DPOWFSU
    DPOWFSUDPMPSTQBDFT3(#

    View Slide

  29. 8FC1ରԠ͍͚ͨͩͩͬͨ͠ͷʹ

    ͔ͳΓͷόʔδϣϯΞοϓΛ

    ڧ͍ΒΕΔ͜ͱ͕൑໌

    View Slide

  30. ͥΜͥΜָউ͡Όͳ͔ͬͨ

    View Slide

  31. *NBHF.BHJDLͷ

    όʔδϣϯΞοϓා͗͢໰୊

    View Slide

  32. ઈରʹආ͚͍ͨࣄଶ
    w *NBHF.BHJDLͷόʔδϣϯΞοϓʹΑͬͯ

    ग़ྗը૾ͷ৭ຯ͕มΘͬͯ͠·͏͜ͱ
    w ݕূ͸͔ͳΓେม

    View Slide

  33. ࡶʹ࣭໰ͯ͠ΈΔ
    IUUQTUXJUUFSDPNNJSBLVJTUBUVT

    View Slide

  34. IUUQTUXJUUFSDPNZPZBTUBUVT

    View Slide

  35. ਆΑʜ
    ʢԿͰͦΜͳʹৄ͍͠ͷʜʣ

    View Slide

  36. ͭ·Γ
    8FC1ରԠʢসʣ
    ౰࣌ར༻͍ͯͨ͠όʔδϣϯ
    8FC1ͷϝϞϦϦʔΫमਖ਼
    8FC1ͷ2VBMJUZରԠ
    8FC1ͷϝϞϦϦʔΫमਖ਼ɺόάpY
    8FC1ग़ྗͷ৭ۭ͕ؒσϑΥϧτT3(#ʹ
    ৭ۭؒͷѻ͍͕मਖ਼ʢ৭ຯ͕มΘΔ͔΋ʣ
    ͜ͷ΁ΜͰࢭΊΕ͹ൺֱత҆શ

    View Slide

  37. 8FC1ͷͨΊʹ͸ͲͷόʔδϣϯΛ࢖͑͹͍͍͔
    w ͢Ͱʹ*NBHF.BHJDLʢҎલʣΛར༻தͷγεςϜ
    w ·Ͱ্͛Ε͹ʢ8FC1ʹ͓͍ͯ͸ʣඞཁे෼
    w Ͱ8FC1ͷ8JOEPXTରԠ΋͞Ε͍ͯΔ
    w ·ͩ*NBHF.BHJDLΛར༻͍ͯ͠ͳ͍γεςϜ
    w ࠷৽൛Λ࢖͍·͠ΐ͏

    View Slide