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

実例で学ぶ画像最適化集 with ImageFlux / ImageFlux meetup#2

Tatsuhiko Kubo
September 25, 2018

実例で学ぶ画像最適化集 with ImageFlux / ImageFlux meetup#2

Tatsuhiko Kubo

September 25, 2018
Tweet

More Decks by Tatsuhiko Kubo

Other Decks in Technology

Transcript

  1. imageflux-cli • ImageFluxͷAPIΫϥΠΞϯτ • github.com/mercari/imageflux-cli • $ imageflux-cli Usage: imageflux-cli

    cache.lookup -k $url # lookup cache by key imageflux-cli cache.delete -k $url # delete cache by key imageflux-cli signature -s $secret -p $path # calculate signature of signed url
  2. ϝϧΧϦʹ͍ͭͯ • ೔ຊ࠷େͷϑϦϚΞϓϦ • 3෼Ͱ؆୯ʹग़඼ • 1) ࣸਅΛࡱΔ • 2)

    ঎඼৘ใΛهೖ • 3) ग़඼ϘλϯΛԡ͢ • ҆৺҆શͳܾࡁɾऔҾ • ΤεΫϩʔ • ಗ໊഑ૹ
  3. ϝϧΧϦʹ͓͚Δը૾഑৴ • CDN • Akamai • ImageFlux • Fastly •

    Origin • Amazon S3 ©2011 Amazon Web Services LLC or its affiliates. All rights reserved. User Users Client Multimedia Corporate data center Traditional server Mobile Client Internet AWS Management Console IAM Add-on Example: IAM Add-on Amazon Mechanical Turk On-Demand Workforce Human Intelligence Tasks (HIT) Assignment/ Task Requester Workers Amazon Mechanical Turk Non-Service Specific ©2011 Amazon Web Services LLC or its affiliates. All rights reserved. User Users Client Multimedia Corporate data center Traditional server Mobile Client Internet AWS Management Console IAM Add-on Example: IAM Add-on Amazon Mechanical Turk On-Demand Workforce Human Intelligence Tasks (HIT) Assignment/ Task Requester Workers Amazon Mechanical Turk Non-Service Specific User Users Client Multimedia Corporate data center Traditional server Mobile Client Amazon Mechanical Turk On-Demand Workforce Human Intelligence Tasks (HIT) Assignment/ Task Requester Workers Amazon Mechanical Turk Non-Service Specific User Users Client Multimedia Corporate data center Traditional server Mobile Client Internet AWS Management Console IAM Add-on Example: IAM Add-on Amazon Mechanical Turk On-Demand Workforce Human Intelligence Tasks (HIT) Assignment/ Task Requester Workers Amazon Mechanical Turk Non-Service Specific ©2011 Amazon Web Services LLC or its affiliates. All rights reserved. User Users Client Multimedia Corporate data center Traditional server Mobile Client Internet AWS Management Console IAM Add-on Example: IAM Add-on Human Intelligence Tasks (HIT) Assignment/ Task Requester Workers Amazon Mechanical Turk Non-Service Specific
  4. ImageFlux࠾༻ͷഎܠ • ೔ʑ૿͑ଓ͚ΔCDNͷը૾഑৴σʔλྔ • ഑৴ίετͷ૿Ճ • ΞϓϦͷσʔλ௨৴ྔͷ૿Ճ • ΞϓϦͷಈ࡞଎౓΍UXʹӨڹ •

    UI΍σβΠϯมߋʹ൐͏࠷దͳը૾αΠζͷมԽ • σʔλ਺͕ଟ͍ͷͰෳ਺ύλʔϯͷը૾Λࣄલʹ४උ͢Δͷ͸ࠔ೉
  5. ImageFluxʹΑΔը૾࠷దԽ • ϝϧΧϦͰ഑৴͞ΕΔը૾ΛΦϯβϑϥΠͰϦαΠζ & WebPʹม׵ • ΦϦδϯ্ʹΦϒδΣΫτ͸ۃྗ૿΍͞ͳ͍ • ύϑΥʔϚϯεతͳ࿩ •

    ωοτϫʔΫϨΠςϯγ >>>>> ը૾ͷม׵ॲཧʹ͔͔ΔΦʔόʔϔου • ίετతͳ࿩ • ωοτϫʔΫϦιʔε >>>>>>(ӽ͑ΒΕͳ͍น)>>>>>>CPUϦιʔε
  6. 1αϜωΠϧ͋ͨΓͷαΠζ࡟ݮޮՌ • ϦαΠζ • 10~20%ݮ • ϦαΠζ & WebPԽ •

    40~50%ݮ • λΠϜϥΠϯ΍ݕࡧ݁ՌͰ͸঎඼ը૾αϜωΠϧ͕େྔʹදࣔ͞ΕΔͷͰޮՌେ