webinar - image optimization,super | akamai · dev ops marketing, creative, brand ... •...

IMAGE MANAGER图像与视频优化

© 2019 Akamai | Confidential2

1998 – Text

互联网的进化

2009 – Text + Images

2014 – Rich Imagery2019 – Rich Images & Videos(Less Text)

© 2019 Akamai | Confidential3

沉重不堪的互联网

Low quality images and videos a reason not to buy

#3 reason

70%of websites got larger

OVER ONE YEARAverage page weight from

images

63%

*HTTPArchive via @katiehempenius. Alexa Top 10K Sites July ‘17 – ‘18

Video mobile data traffic by 2022

79% +

*** 2018 eMarketer, “Online Shoppers’ Expectations for Visual Merchandising Rise Dramatically”

*

***

** https://www.cisco.com/c/en/us/solutions/collateral/service-provider/visual-networking-index-vni/white-paper-c11-738429.html

**

https://twitter.com/katiehempenius/status/1133209127000379393/photo/1

https://www.cisco.com/c/en/us/solutions/collateral/service-provider/visual-networking-index-vni/white-paper-c11-738429.html

4 | © 2019 Akamai | Confidential

现实和理想

页面重量和性能

设备类型，操作系统，浏览器

Delivering Quality without Compromise

优化的大小，格式，分辨率的交付逻辑

• High demand for images and videos that boost engagement & UX• Rich digital assets are heavy and can impact performance

• Many derivative versions needed for each asset• Must consider device, OS, and browser-specific

formats (JPEG 2000, JPEG XR, WebP, WebM/V9, H.265, etc.)• Artistic transformations may be needed• Too many assets to create, store, and manage

• Complex code to determine when to deliver the right rendition to each and every end user


多重挑战，一种答案

to determine when to deliver the right digital asset

复杂的逻辑

to create, store, and manage太多衍生的图片和视频

for seamless and fast online experiences 用户期待更好的体验

CHALLENGES IMAGE MANAGER

pristine high-quality image or video仅存一份原始文件

to deliver the correct size, quality, and format for every device and browser

智能自动转换

to reduce bytes and page weight without sacrificing quality for high UX

轻量化资源

Image Manager


pristine images & videos from any connected storage

for seamless workflow integration

fast and engaging assets tailored for each and

every device, browser, and operating system

with the right format, size, and quality for maximum

visual fidelity at the lowest bytes

images with policies to standardize derivative

attributes without adding or changing code

Image Manager 工作流程Automated Optimizations ∙ Efficient Workflows ∙ Faster Time-to-Market ∙ Reduced Costs

拉取转换优化交付

SALE


1. 拉取源站媒体内容Seamless Integration into Existing Workflows

Link pristine assets from any web-accessible storage location.

Image Manager is compatible with existing publishing workflows to give full control over digital assets and infrastructure decisions.

WEB SERVERCMS

DAM*

Dev Ops

Marketing, Creative, Brand Managers, Designers, Partners…

IMAGE MANAGER

*Digital Asset Management = Interface for asset creation, management, and storage

Pristine


2. 转换Artistic and visual control with minimal effort

自定义策略

动态自动转换

调整质量和分辨率

API可控制

艺术转换(images only)• Background color• Facial recognition auto crop• Region-of-interest crop• Grayscale• Watermark• Scale, rotate, trim, crop, and more


http://www.example.com/folder/image.jpg


脸部聚焦黑白色https://developer.akamai.com/image-manager/img/gallery-1.jpg?impolicy=filter

https://developer.akamai.com/image-manager/img/gallery-1.jpg?impolicy=filter


ImQuery

http://www.example.com/folder/image.jpg?im=Crop=(<widthvalue>,<heightvalue>)

13 | © 2019 Akamai | Confidential 108 variants per image!

3 sizes

x 4 formats

x 3 resolutions

x 3 layoutsSALE

3. 优化图像和视频:多重可能性


3. 优化图像和视频

Optimal QualityMaximize image byte reduction that is imperceptible to the human eye with perceptual quality algorithms

Best FormatAutomatically deliver derivative images and videos at the Edge with the correct format based on the end users’ device & browser

Resolution & SizeAutomatically deliver images and videos based on the device and screen size to prevent downsampling (or over-downloading of unnecessary bytes)

Pristine9.4 MB

Medium4.8 MB

1.8 MB 76.3 KB

Optimize video and audio streams with preferred quality settings

Three levers for optimal quality & delivery

DERIVATIVE IMAGE WIDTHS

DERIVATIVE VIDEO RESOLUTIONS

320, 640, 1024, 2048, and 5000

853x640, 1280x720, 1920x1080

Pristine Optimized

Image Format

Size vs JPEG

Browser/OS Support

JPEG N/A All

WebP -35%

JPEG XR -30%

JPEG 2000 -30%

VideoFormat

Bitrate vs MP4 (H.264)

Browser/OS Support

MP4 (H.264) N/A All

MP4 (H.265) -50%

WebM (V9) -50%

OptimizedPristine

16 | © 2019 Akamai | Confidential© 2019 AKAMAI

4. 全球边缘节点交付Rich Interactive Experiences at the Scale of Akamai

媒体缓存架构

Full access to delivery controls (e.g., TTL, purge, etc.)• Derivative assets closest to end users

移动感知• Auto-resize based on viewport width• Prevent over-downloading bytes• Network latency

Media Viewer• Zoom, 360° view, and video enabled• Responsive (mobile-aware)

Dashboard• Gain insight into assets delivered, byte reduction,

content type, and more


监控图像性能


Monitor web performance for your real users in real-time

Prioritize enhancements for maximum business impact


图像优化性能对比


不同页面组的提升对比

Before After


不同浏览器的提升效果

Before

After


资源矩阵树


聚合瀑布图


关联性能与商业指标

‘What – if’ my website had better performance? How will that impact the bottom line?

Combine real user data with advanced predictive analytics to understand the unique relationship between performance and business outcomes.


Key BenefitsEmpowering both Business and Operational stakeholders

商务收益• 自动创建、修改和发布衍生的图像和视频，以便更快地进入市场

• 在各种设备和网络上提供一致的用户体验

• 减少图像和视频的重量，提供更轻，更快的页面

• 支持移动和响应式web设计策略

• 降低存储海量衍生图像和视频的成本

运维收益• 通过智能工作流自动化消除手工流程

• 无需代码更改或资产迁移/上传即可轻松集成• 通过策略管理器UI或查询字符串参数创建自定义策略的灵活性• 自动优化图像和视频，最高的视觉保真度最少的字节数

Questions?

扫码关注Akamai 微信公众号，可以免费下载本次在线研讨会的资料

Questions?

webinar - image optimization,super | akamai · dev ops marketing, creative, brand ... •...

Documents