How We Gain "Mobile First" Using WebP with ImageMagick

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

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