![Page 1: Optimize images for web site / app performance](https://reader033.vdocuments.mx/reader033/viewer/2022042906/58a6f90f1a28abc6318b4ced/html5/thumbnails/1.jpg)
OPTIMIZE IMAGES FOR WEB SITE APP PERFORMANCE
TAKAAKI MIZUNO
WEB SITE LOADING SPEED IS VERY IMPORTANT
テキスト
WEB SITE LOADING SPEED IS IMPORTANT
Web site loading speed affect to the Google web search ranking
テキスト
WEB SITE LOADING SPEED IS IMPORTANT
Web site loading speed affect to the revenue of EC site
One Second Could Cost Amazon $16 Billion In Sales Per Year
テキスト
HOW TO MAKE THE RESPONSE FASTER
Minify HTMLCSSJS
Combine CSSJS1
CSS Sprite
Multi Subdomains for images1
Resize Images
Set HTTP cache headers properly
Lazy Loading
Use HTTP21 It is not effective when you are using HTTP2
テキスト
YOU CAN CHECK YOUR PAGE WITH
Google Page Speed Insightshttpsdevelopersgooglecomspeedpagespeedinsights
REDUCE IMAGE SIZE WITHOUT ANY CHANGES
テキスト
WHY OPTIMIZE IMAGE
You can do it TODAY
Really effective
PNG
テキスト
PNG
Never uses full color PNG images ( 24bit 32bit )
Change to Index Colored PNG with pngquant
Optimize color index with pngrewrite
Optimize deflete compression with AdvanceCOMP
You Can Reduce Image File Size 20~
JPEG
テキスト
JPEG
Use mozjpeg to optimize Jpeg Images
You Can Reduce Image File Size 20~
WEBP
テキスト
WEBP
WebP is the JpegPNG alternative image format by Google
Size of image will be 25~34 of Jpeg image
Supported OSBrowsers
Android 40~
iOS ( SDWebImage library )
Chrome
IESafariFirefox donrsquot support
You Can Reduce Image File Size 60~
テキスト
HOW TO KNOW THE CLIENT SUPPORTS WEBP OR NOT
Acceptimagewebpimageq=08
Check Accept HTTP Request Header
テキスト
DEMO
REAL EXAMPLE
テキスト
FOODYVN
テキスト
ORIGINAL WEB DATA SIZE 59MB
html
css
js
img
other
Image 52 31MB
テキスト
PNG amp JPEG OPTIMIZATION SIZE 51MB ( REDUCE 92 )
342283html
css
js
img
other
Image 47 26MB
18 Image Size Reduced
テキスト
JPEG TO WEBP SIZE 47MB ( REDUCE 174 )
342283html
css
js
img
other
Image 42 21MB
333 Image Size Reduced
テキスト
JPEGPNGGIF TO WEBP SIZE 45MB ( REDUCE 211 )
342283html
css
js
img
other
Image 42 19MB
401 Image Size Reduced
テキスト
DEMO
テキスト
USE IMAGE RESIZING PROXY
httpsgithubcomcubicdaiyangx_small_light
ngx_small_light
テキスト
JUST CHANGE THE IMAGE URL
http$host$portsmall_light(dw=300dh=300)imgimagejpg
http$host$portimgimagejpg
テキスト
Thank You
![Page 2: Optimize images for web site / app performance](https://reader033.vdocuments.mx/reader033/viewer/2022042906/58a6f90f1a28abc6318b4ced/html5/thumbnails/2.jpg)
WEB SITE LOADING SPEED IS VERY IMPORTANT
テキスト
WEB SITE LOADING SPEED IS IMPORTANT
Web site loading speed affect to the Google web search ranking
テキスト
WEB SITE LOADING SPEED IS IMPORTANT
Web site loading speed affect to the revenue of EC site
One Second Could Cost Amazon $16 Billion In Sales Per Year
テキスト
HOW TO MAKE THE RESPONSE FASTER
Minify HTMLCSSJS
Combine CSSJS1
CSS Sprite
Multi Subdomains for images1
Resize Images
Set HTTP cache headers properly
Lazy Loading
Use HTTP21 It is not effective when you are using HTTP2
テキスト
YOU CAN CHECK YOUR PAGE WITH
Google Page Speed Insightshttpsdevelopersgooglecomspeedpagespeedinsights
REDUCE IMAGE SIZE WITHOUT ANY CHANGES
テキスト
WHY OPTIMIZE IMAGE
You can do it TODAY
Really effective
PNG
テキスト
PNG
Never uses full color PNG images ( 24bit 32bit )
Change to Index Colored PNG with pngquant
Optimize color index with pngrewrite
Optimize deflete compression with AdvanceCOMP
You Can Reduce Image File Size 20~
JPEG
テキスト
JPEG
Use mozjpeg to optimize Jpeg Images
You Can Reduce Image File Size 20~
WEBP
テキスト
WEBP
WebP is the JpegPNG alternative image format by Google
Size of image will be 25~34 of Jpeg image
Supported OSBrowsers
Android 40~
iOS ( SDWebImage library )
Chrome
IESafariFirefox donrsquot support
You Can Reduce Image File Size 60~
テキスト
HOW TO KNOW THE CLIENT SUPPORTS WEBP OR NOT
Acceptimagewebpimageq=08
Check Accept HTTP Request Header
テキスト
DEMO
REAL EXAMPLE
テキスト
FOODYVN
テキスト
ORIGINAL WEB DATA SIZE 59MB
html
css
js
img
other
Image 52 31MB
テキスト
PNG amp JPEG OPTIMIZATION SIZE 51MB ( REDUCE 92 )
342283html
css
js
img
other
Image 47 26MB
18 Image Size Reduced
テキスト
JPEG TO WEBP SIZE 47MB ( REDUCE 174 )
342283html
css
js
img
other
Image 42 21MB
333 Image Size Reduced
テキスト
JPEGPNGGIF TO WEBP SIZE 45MB ( REDUCE 211 )
342283html
css
js
img
other
Image 42 19MB
401 Image Size Reduced
テキスト
DEMO
テキスト
USE IMAGE RESIZING PROXY
httpsgithubcomcubicdaiyangx_small_light
ngx_small_light
テキスト
JUST CHANGE THE IMAGE URL
http$host$portsmall_light(dw=300dh=300)imgimagejpg
http$host$portimgimagejpg
テキスト
Thank You
![Page 3: Optimize images for web site / app performance](https://reader033.vdocuments.mx/reader033/viewer/2022042906/58a6f90f1a28abc6318b4ced/html5/thumbnails/3.jpg)
テキスト
WEB SITE LOADING SPEED IS IMPORTANT
Web site loading speed affect to the Google web search ranking
テキスト
WEB SITE LOADING SPEED IS IMPORTANT
Web site loading speed affect to the revenue of EC site
One Second Could Cost Amazon $16 Billion In Sales Per Year
テキスト
HOW TO MAKE THE RESPONSE FASTER
Minify HTMLCSSJS
Combine CSSJS1
CSS Sprite
Multi Subdomains for images1
Resize Images
Set HTTP cache headers properly
Lazy Loading
Use HTTP21 It is not effective when you are using HTTP2
テキスト
YOU CAN CHECK YOUR PAGE WITH
Google Page Speed Insightshttpsdevelopersgooglecomspeedpagespeedinsights
REDUCE IMAGE SIZE WITHOUT ANY CHANGES
テキスト
WHY OPTIMIZE IMAGE
You can do it TODAY
Really effective
PNG
テキスト
PNG
Never uses full color PNG images ( 24bit 32bit )
Change to Index Colored PNG with pngquant
Optimize color index with pngrewrite
Optimize deflete compression with AdvanceCOMP
You Can Reduce Image File Size 20~
JPEG
テキスト
JPEG
Use mozjpeg to optimize Jpeg Images
You Can Reduce Image File Size 20~
WEBP
テキスト
WEBP
WebP is the JpegPNG alternative image format by Google
Size of image will be 25~34 of Jpeg image
Supported OSBrowsers
Android 40~
iOS ( SDWebImage library )
Chrome
IESafariFirefox donrsquot support
You Can Reduce Image File Size 60~
テキスト
HOW TO KNOW THE CLIENT SUPPORTS WEBP OR NOT
Acceptimagewebpimageq=08
Check Accept HTTP Request Header
テキスト
DEMO
REAL EXAMPLE
テキスト
FOODYVN
テキスト
ORIGINAL WEB DATA SIZE 59MB
html
css
js
img
other
Image 52 31MB
テキスト
PNG amp JPEG OPTIMIZATION SIZE 51MB ( REDUCE 92 )
342283html
css
js
img
other
Image 47 26MB
18 Image Size Reduced
テキスト
JPEG TO WEBP SIZE 47MB ( REDUCE 174 )
342283html
css
js
img
other
Image 42 21MB
333 Image Size Reduced
テキスト
JPEGPNGGIF TO WEBP SIZE 45MB ( REDUCE 211 )
342283html
css
js
img
other
Image 42 19MB
401 Image Size Reduced
テキスト
DEMO
テキスト
USE IMAGE RESIZING PROXY
httpsgithubcomcubicdaiyangx_small_light
ngx_small_light
テキスト
JUST CHANGE THE IMAGE URL
http$host$portsmall_light(dw=300dh=300)imgimagejpg
http$host$portimgimagejpg
テキスト
Thank You
![Page 4: Optimize images for web site / app performance](https://reader033.vdocuments.mx/reader033/viewer/2022042906/58a6f90f1a28abc6318b4ced/html5/thumbnails/4.jpg)
テキスト
WEB SITE LOADING SPEED IS IMPORTANT
Web site loading speed affect to the revenue of EC site
One Second Could Cost Amazon $16 Billion In Sales Per Year
テキスト
HOW TO MAKE THE RESPONSE FASTER
Minify HTMLCSSJS
Combine CSSJS1
CSS Sprite
Multi Subdomains for images1
Resize Images
Set HTTP cache headers properly
Lazy Loading
Use HTTP21 It is not effective when you are using HTTP2
テキスト
YOU CAN CHECK YOUR PAGE WITH
Google Page Speed Insightshttpsdevelopersgooglecomspeedpagespeedinsights
REDUCE IMAGE SIZE WITHOUT ANY CHANGES
テキスト
WHY OPTIMIZE IMAGE
You can do it TODAY
Really effective
PNG
テキスト
PNG
Never uses full color PNG images ( 24bit 32bit )
Change to Index Colored PNG with pngquant
Optimize color index with pngrewrite
Optimize deflete compression with AdvanceCOMP
You Can Reduce Image File Size 20~
JPEG
テキスト
JPEG
Use mozjpeg to optimize Jpeg Images
You Can Reduce Image File Size 20~
WEBP
テキスト
WEBP
WebP is the JpegPNG alternative image format by Google
Size of image will be 25~34 of Jpeg image
Supported OSBrowsers
Android 40~
iOS ( SDWebImage library )
Chrome
IESafariFirefox donrsquot support
You Can Reduce Image File Size 60~
テキスト
HOW TO KNOW THE CLIENT SUPPORTS WEBP OR NOT
Acceptimagewebpimageq=08
Check Accept HTTP Request Header
テキスト
DEMO
REAL EXAMPLE
テキスト
FOODYVN
テキスト
ORIGINAL WEB DATA SIZE 59MB
html
css
js
img
other
Image 52 31MB
テキスト
PNG amp JPEG OPTIMIZATION SIZE 51MB ( REDUCE 92 )
342283html
css
js
img
other
Image 47 26MB
18 Image Size Reduced
テキスト
JPEG TO WEBP SIZE 47MB ( REDUCE 174 )
342283html
css
js
img
other
Image 42 21MB
333 Image Size Reduced
テキスト
JPEGPNGGIF TO WEBP SIZE 45MB ( REDUCE 211 )
342283html
css
js
img
other
Image 42 19MB
401 Image Size Reduced
テキスト
DEMO
テキスト
USE IMAGE RESIZING PROXY
httpsgithubcomcubicdaiyangx_small_light
ngx_small_light
テキスト
JUST CHANGE THE IMAGE URL
http$host$portsmall_light(dw=300dh=300)imgimagejpg
http$host$portimgimagejpg
テキスト
Thank You
![Page 5: Optimize images for web site / app performance](https://reader033.vdocuments.mx/reader033/viewer/2022042906/58a6f90f1a28abc6318b4ced/html5/thumbnails/5.jpg)
テキスト
HOW TO MAKE THE RESPONSE FASTER
Minify HTMLCSSJS
Combine CSSJS1
CSS Sprite
Multi Subdomains for images1
Resize Images
Set HTTP cache headers properly
Lazy Loading
Use HTTP21 It is not effective when you are using HTTP2
テキスト
YOU CAN CHECK YOUR PAGE WITH
Google Page Speed Insightshttpsdevelopersgooglecomspeedpagespeedinsights
REDUCE IMAGE SIZE WITHOUT ANY CHANGES
テキスト
WHY OPTIMIZE IMAGE
You can do it TODAY
Really effective
PNG
テキスト
PNG
Never uses full color PNG images ( 24bit 32bit )
Change to Index Colored PNG with pngquant
Optimize color index with pngrewrite
Optimize deflete compression with AdvanceCOMP
You Can Reduce Image File Size 20~
JPEG
テキスト
JPEG
Use mozjpeg to optimize Jpeg Images
You Can Reduce Image File Size 20~
WEBP
テキスト
WEBP
WebP is the JpegPNG alternative image format by Google
Size of image will be 25~34 of Jpeg image
Supported OSBrowsers
Android 40~
iOS ( SDWebImage library )
Chrome
IESafariFirefox donrsquot support
You Can Reduce Image File Size 60~
テキスト
HOW TO KNOW THE CLIENT SUPPORTS WEBP OR NOT
Acceptimagewebpimageq=08
Check Accept HTTP Request Header
テキスト
DEMO
REAL EXAMPLE
テキスト
FOODYVN
テキスト
ORIGINAL WEB DATA SIZE 59MB
html
css
js
img
other
Image 52 31MB
テキスト
PNG amp JPEG OPTIMIZATION SIZE 51MB ( REDUCE 92 )
342283html
css
js
img
other
Image 47 26MB
18 Image Size Reduced
テキスト
JPEG TO WEBP SIZE 47MB ( REDUCE 174 )
342283html
css
js
img
other
Image 42 21MB
333 Image Size Reduced
テキスト
JPEGPNGGIF TO WEBP SIZE 45MB ( REDUCE 211 )
342283html
css
js
img
other
Image 42 19MB
401 Image Size Reduced
テキスト
DEMO
テキスト
USE IMAGE RESIZING PROXY
httpsgithubcomcubicdaiyangx_small_light
ngx_small_light
テキスト
JUST CHANGE THE IMAGE URL
http$host$portsmall_light(dw=300dh=300)imgimagejpg
http$host$portimgimagejpg
テキスト
Thank You
![Page 6: Optimize images for web site / app performance](https://reader033.vdocuments.mx/reader033/viewer/2022042906/58a6f90f1a28abc6318b4ced/html5/thumbnails/6.jpg)
テキスト
YOU CAN CHECK YOUR PAGE WITH
Google Page Speed Insightshttpsdevelopersgooglecomspeedpagespeedinsights
REDUCE IMAGE SIZE WITHOUT ANY CHANGES
テキスト
WHY OPTIMIZE IMAGE
You can do it TODAY
Really effective
PNG
テキスト
PNG
Never uses full color PNG images ( 24bit 32bit )
Change to Index Colored PNG with pngquant
Optimize color index with pngrewrite
Optimize deflete compression with AdvanceCOMP
You Can Reduce Image File Size 20~
JPEG
テキスト
JPEG
Use mozjpeg to optimize Jpeg Images
You Can Reduce Image File Size 20~
WEBP
テキスト
WEBP
WebP is the JpegPNG alternative image format by Google
Size of image will be 25~34 of Jpeg image
Supported OSBrowsers
Android 40~
iOS ( SDWebImage library )
Chrome
IESafariFirefox donrsquot support
You Can Reduce Image File Size 60~
テキスト
HOW TO KNOW THE CLIENT SUPPORTS WEBP OR NOT
Acceptimagewebpimageq=08
Check Accept HTTP Request Header
テキスト
DEMO
REAL EXAMPLE
テキスト
FOODYVN
テキスト
ORIGINAL WEB DATA SIZE 59MB
html
css
js
img
other
Image 52 31MB
テキスト
PNG amp JPEG OPTIMIZATION SIZE 51MB ( REDUCE 92 )
342283html
css
js
img
other
Image 47 26MB
18 Image Size Reduced
テキスト
JPEG TO WEBP SIZE 47MB ( REDUCE 174 )
342283html
css
js
img
other
Image 42 21MB
333 Image Size Reduced
テキスト
JPEGPNGGIF TO WEBP SIZE 45MB ( REDUCE 211 )
342283html
css
js
img
other
Image 42 19MB
401 Image Size Reduced
テキスト
DEMO
テキスト
USE IMAGE RESIZING PROXY
httpsgithubcomcubicdaiyangx_small_light
ngx_small_light
テキスト
JUST CHANGE THE IMAGE URL
http$host$portsmall_light(dw=300dh=300)imgimagejpg
http$host$portimgimagejpg
テキスト
Thank You
![Page 7: Optimize images for web site / app performance](https://reader033.vdocuments.mx/reader033/viewer/2022042906/58a6f90f1a28abc6318b4ced/html5/thumbnails/7.jpg)
REDUCE IMAGE SIZE WITHOUT ANY CHANGES
テキスト
WHY OPTIMIZE IMAGE
You can do it TODAY
Really effective
PNG
テキスト
PNG
Never uses full color PNG images ( 24bit 32bit )
Change to Index Colored PNG with pngquant
Optimize color index with pngrewrite
Optimize deflete compression with AdvanceCOMP
You Can Reduce Image File Size 20~
JPEG
テキスト
JPEG
Use mozjpeg to optimize Jpeg Images
You Can Reduce Image File Size 20~
WEBP
テキスト
WEBP
WebP is the JpegPNG alternative image format by Google
Size of image will be 25~34 of Jpeg image
Supported OSBrowsers
Android 40~
iOS ( SDWebImage library )
Chrome
IESafariFirefox donrsquot support
You Can Reduce Image File Size 60~
テキスト
HOW TO KNOW THE CLIENT SUPPORTS WEBP OR NOT
Acceptimagewebpimageq=08
Check Accept HTTP Request Header
テキスト
DEMO
REAL EXAMPLE
テキスト
FOODYVN
テキスト
ORIGINAL WEB DATA SIZE 59MB
html
css
js
img
other
Image 52 31MB
テキスト
PNG amp JPEG OPTIMIZATION SIZE 51MB ( REDUCE 92 )
342283html
css
js
img
other
Image 47 26MB
18 Image Size Reduced
テキスト
JPEG TO WEBP SIZE 47MB ( REDUCE 174 )
342283html
css
js
img
other
Image 42 21MB
333 Image Size Reduced
テキスト
JPEGPNGGIF TO WEBP SIZE 45MB ( REDUCE 211 )
342283html
css
js
img
other
Image 42 19MB
401 Image Size Reduced
テキスト
DEMO
テキスト
USE IMAGE RESIZING PROXY
httpsgithubcomcubicdaiyangx_small_light
ngx_small_light
テキスト
JUST CHANGE THE IMAGE URL
http$host$portsmall_light(dw=300dh=300)imgimagejpg
http$host$portimgimagejpg
テキスト
Thank You
![Page 8: Optimize images for web site / app performance](https://reader033.vdocuments.mx/reader033/viewer/2022042906/58a6f90f1a28abc6318b4ced/html5/thumbnails/8.jpg)
テキスト
WHY OPTIMIZE IMAGE
You can do it TODAY
Really effective
PNG
テキスト
PNG
Never uses full color PNG images ( 24bit 32bit )
Change to Index Colored PNG with pngquant
Optimize color index with pngrewrite
Optimize deflete compression with AdvanceCOMP
You Can Reduce Image File Size 20~
JPEG
テキスト
JPEG
Use mozjpeg to optimize Jpeg Images
You Can Reduce Image File Size 20~
WEBP
テキスト
WEBP
WebP is the JpegPNG alternative image format by Google
Size of image will be 25~34 of Jpeg image
Supported OSBrowsers
Android 40~
iOS ( SDWebImage library )
Chrome
IESafariFirefox donrsquot support
You Can Reduce Image File Size 60~
テキスト
HOW TO KNOW THE CLIENT SUPPORTS WEBP OR NOT
Acceptimagewebpimageq=08
Check Accept HTTP Request Header
テキスト
DEMO
REAL EXAMPLE
テキスト
FOODYVN
テキスト
ORIGINAL WEB DATA SIZE 59MB
html
css
js
img
other
Image 52 31MB
テキスト
PNG amp JPEG OPTIMIZATION SIZE 51MB ( REDUCE 92 )
342283html
css
js
img
other
Image 47 26MB
18 Image Size Reduced
テキスト
JPEG TO WEBP SIZE 47MB ( REDUCE 174 )
342283html
css
js
img
other
Image 42 21MB
333 Image Size Reduced
テキスト
JPEGPNGGIF TO WEBP SIZE 45MB ( REDUCE 211 )
342283html
css
js
img
other
Image 42 19MB
401 Image Size Reduced
テキスト
DEMO
テキスト
USE IMAGE RESIZING PROXY
httpsgithubcomcubicdaiyangx_small_light
ngx_small_light
テキスト
JUST CHANGE THE IMAGE URL
http$host$portsmall_light(dw=300dh=300)imgimagejpg
http$host$portimgimagejpg
テキスト
Thank You
![Page 9: Optimize images for web site / app performance](https://reader033.vdocuments.mx/reader033/viewer/2022042906/58a6f90f1a28abc6318b4ced/html5/thumbnails/9.jpg)
PNG
テキスト
PNG
Never uses full color PNG images ( 24bit 32bit )
Change to Index Colored PNG with pngquant
Optimize color index with pngrewrite
Optimize deflete compression with AdvanceCOMP
You Can Reduce Image File Size 20~
JPEG
テキスト
JPEG
Use mozjpeg to optimize Jpeg Images
You Can Reduce Image File Size 20~
WEBP
テキスト
WEBP
WebP is the JpegPNG alternative image format by Google
Size of image will be 25~34 of Jpeg image
Supported OSBrowsers
Android 40~
iOS ( SDWebImage library )
Chrome
IESafariFirefox donrsquot support
You Can Reduce Image File Size 60~
テキスト
HOW TO KNOW THE CLIENT SUPPORTS WEBP OR NOT
Acceptimagewebpimageq=08
Check Accept HTTP Request Header
テキスト
DEMO
REAL EXAMPLE
テキスト
FOODYVN
テキスト
ORIGINAL WEB DATA SIZE 59MB
html
css
js
img
other
Image 52 31MB
テキスト
PNG amp JPEG OPTIMIZATION SIZE 51MB ( REDUCE 92 )
342283html
css
js
img
other
Image 47 26MB
18 Image Size Reduced
テキスト
JPEG TO WEBP SIZE 47MB ( REDUCE 174 )
342283html
css
js
img
other
Image 42 21MB
333 Image Size Reduced
テキスト
JPEGPNGGIF TO WEBP SIZE 45MB ( REDUCE 211 )
342283html
css
js
img
other
Image 42 19MB
401 Image Size Reduced
テキスト
DEMO
テキスト
USE IMAGE RESIZING PROXY
httpsgithubcomcubicdaiyangx_small_light
ngx_small_light
テキスト
JUST CHANGE THE IMAGE URL
http$host$portsmall_light(dw=300dh=300)imgimagejpg
http$host$portimgimagejpg
テキスト
Thank You
![Page 10: Optimize images for web site / app performance](https://reader033.vdocuments.mx/reader033/viewer/2022042906/58a6f90f1a28abc6318b4ced/html5/thumbnails/10.jpg)
テキスト
PNG
Never uses full color PNG images ( 24bit 32bit )
Change to Index Colored PNG with pngquant
Optimize color index with pngrewrite
Optimize deflete compression with AdvanceCOMP
You Can Reduce Image File Size 20~
JPEG
テキスト
JPEG
Use mozjpeg to optimize Jpeg Images
You Can Reduce Image File Size 20~
WEBP
テキスト
WEBP
WebP is the JpegPNG alternative image format by Google
Size of image will be 25~34 of Jpeg image
Supported OSBrowsers
Android 40~
iOS ( SDWebImage library )
Chrome
IESafariFirefox donrsquot support
You Can Reduce Image File Size 60~
テキスト
HOW TO KNOW THE CLIENT SUPPORTS WEBP OR NOT
Acceptimagewebpimageq=08
Check Accept HTTP Request Header
テキスト
DEMO
REAL EXAMPLE
テキスト
FOODYVN
テキスト
ORIGINAL WEB DATA SIZE 59MB
html
css
js
img
other
Image 52 31MB
テキスト
PNG amp JPEG OPTIMIZATION SIZE 51MB ( REDUCE 92 )
342283html
css
js
img
other
Image 47 26MB
18 Image Size Reduced
テキスト
JPEG TO WEBP SIZE 47MB ( REDUCE 174 )
342283html
css
js
img
other
Image 42 21MB
333 Image Size Reduced
テキスト
JPEGPNGGIF TO WEBP SIZE 45MB ( REDUCE 211 )
342283html
css
js
img
other
Image 42 19MB
401 Image Size Reduced
テキスト
DEMO
テキスト
USE IMAGE RESIZING PROXY
httpsgithubcomcubicdaiyangx_small_light
ngx_small_light
テキスト
JUST CHANGE THE IMAGE URL
http$host$portsmall_light(dw=300dh=300)imgimagejpg
http$host$portimgimagejpg
テキスト
Thank You
![Page 11: Optimize images for web site / app performance](https://reader033.vdocuments.mx/reader033/viewer/2022042906/58a6f90f1a28abc6318b4ced/html5/thumbnails/11.jpg)
JPEG
テキスト
JPEG
Use mozjpeg to optimize Jpeg Images
You Can Reduce Image File Size 20~
WEBP
テキスト
WEBP
WebP is the JpegPNG alternative image format by Google
Size of image will be 25~34 of Jpeg image
Supported OSBrowsers
Android 40~
iOS ( SDWebImage library )
Chrome
IESafariFirefox donrsquot support
You Can Reduce Image File Size 60~
テキスト
HOW TO KNOW THE CLIENT SUPPORTS WEBP OR NOT
Acceptimagewebpimageq=08
Check Accept HTTP Request Header
テキスト
DEMO
REAL EXAMPLE
テキスト
FOODYVN
テキスト
ORIGINAL WEB DATA SIZE 59MB
html
css
js
img
other
Image 52 31MB
テキスト
PNG amp JPEG OPTIMIZATION SIZE 51MB ( REDUCE 92 )
342283html
css
js
img
other
Image 47 26MB
18 Image Size Reduced
テキスト
JPEG TO WEBP SIZE 47MB ( REDUCE 174 )
342283html
css
js
img
other
Image 42 21MB
333 Image Size Reduced
テキスト
JPEGPNGGIF TO WEBP SIZE 45MB ( REDUCE 211 )
342283html
css
js
img
other
Image 42 19MB
401 Image Size Reduced
テキスト
DEMO
テキスト
USE IMAGE RESIZING PROXY
httpsgithubcomcubicdaiyangx_small_light
ngx_small_light
テキスト
JUST CHANGE THE IMAGE URL
http$host$portsmall_light(dw=300dh=300)imgimagejpg
http$host$portimgimagejpg
テキスト
Thank You
![Page 12: Optimize images for web site / app performance](https://reader033.vdocuments.mx/reader033/viewer/2022042906/58a6f90f1a28abc6318b4ced/html5/thumbnails/12.jpg)
テキスト
JPEG
Use mozjpeg to optimize Jpeg Images
You Can Reduce Image File Size 20~
WEBP
テキスト
WEBP
WebP is the JpegPNG alternative image format by Google
Size of image will be 25~34 of Jpeg image
Supported OSBrowsers
Android 40~
iOS ( SDWebImage library )
Chrome
IESafariFirefox donrsquot support
You Can Reduce Image File Size 60~
テキスト
HOW TO KNOW THE CLIENT SUPPORTS WEBP OR NOT
Acceptimagewebpimageq=08
Check Accept HTTP Request Header
テキスト
DEMO
REAL EXAMPLE
テキスト
FOODYVN
テキスト
ORIGINAL WEB DATA SIZE 59MB
html
css
js
img
other
Image 52 31MB
テキスト
PNG amp JPEG OPTIMIZATION SIZE 51MB ( REDUCE 92 )
342283html
css
js
img
other
Image 47 26MB
18 Image Size Reduced
テキスト
JPEG TO WEBP SIZE 47MB ( REDUCE 174 )
342283html
css
js
img
other
Image 42 21MB
333 Image Size Reduced
テキスト
JPEGPNGGIF TO WEBP SIZE 45MB ( REDUCE 211 )
342283html
css
js
img
other
Image 42 19MB
401 Image Size Reduced
テキスト
DEMO
テキスト
USE IMAGE RESIZING PROXY
httpsgithubcomcubicdaiyangx_small_light
ngx_small_light
テキスト
JUST CHANGE THE IMAGE URL
http$host$portsmall_light(dw=300dh=300)imgimagejpg
http$host$portimgimagejpg
テキスト
Thank You
![Page 13: Optimize images for web site / app performance](https://reader033.vdocuments.mx/reader033/viewer/2022042906/58a6f90f1a28abc6318b4ced/html5/thumbnails/13.jpg)
WEBP
テキスト
WEBP
WebP is the JpegPNG alternative image format by Google
Size of image will be 25~34 of Jpeg image
Supported OSBrowsers
Android 40~
iOS ( SDWebImage library )
Chrome
IESafariFirefox donrsquot support
You Can Reduce Image File Size 60~
テキスト
HOW TO KNOW THE CLIENT SUPPORTS WEBP OR NOT
Acceptimagewebpimageq=08
Check Accept HTTP Request Header
テキスト
DEMO
REAL EXAMPLE
テキスト
FOODYVN
テキスト
ORIGINAL WEB DATA SIZE 59MB
html
css
js
img
other
Image 52 31MB
テキスト
PNG amp JPEG OPTIMIZATION SIZE 51MB ( REDUCE 92 )
342283html
css
js
img
other
Image 47 26MB
18 Image Size Reduced
テキスト
JPEG TO WEBP SIZE 47MB ( REDUCE 174 )
342283html
css
js
img
other
Image 42 21MB
333 Image Size Reduced
テキスト
JPEGPNGGIF TO WEBP SIZE 45MB ( REDUCE 211 )
342283html
css
js
img
other
Image 42 19MB
401 Image Size Reduced
テキスト
DEMO
テキスト
USE IMAGE RESIZING PROXY
httpsgithubcomcubicdaiyangx_small_light
ngx_small_light
テキスト
JUST CHANGE THE IMAGE URL
http$host$portsmall_light(dw=300dh=300)imgimagejpg
http$host$portimgimagejpg
テキスト
Thank You
![Page 14: Optimize images for web site / app performance](https://reader033.vdocuments.mx/reader033/viewer/2022042906/58a6f90f1a28abc6318b4ced/html5/thumbnails/14.jpg)
テキスト
WEBP
WebP is the JpegPNG alternative image format by Google
Size of image will be 25~34 of Jpeg image
Supported OSBrowsers
Android 40~
iOS ( SDWebImage library )
Chrome
IESafariFirefox donrsquot support
You Can Reduce Image File Size 60~
テキスト
HOW TO KNOW THE CLIENT SUPPORTS WEBP OR NOT
Acceptimagewebpimageq=08
Check Accept HTTP Request Header
テキスト
DEMO
REAL EXAMPLE
テキスト
FOODYVN
テキスト
ORIGINAL WEB DATA SIZE 59MB
html
css
js
img
other
Image 52 31MB
テキスト
PNG amp JPEG OPTIMIZATION SIZE 51MB ( REDUCE 92 )
342283html
css
js
img
other
Image 47 26MB
18 Image Size Reduced
テキスト
JPEG TO WEBP SIZE 47MB ( REDUCE 174 )
342283html
css
js
img
other
Image 42 21MB
333 Image Size Reduced
テキスト
JPEGPNGGIF TO WEBP SIZE 45MB ( REDUCE 211 )
342283html
css
js
img
other
Image 42 19MB
401 Image Size Reduced
テキスト
DEMO
テキスト
USE IMAGE RESIZING PROXY
httpsgithubcomcubicdaiyangx_small_light
ngx_small_light
テキスト
JUST CHANGE THE IMAGE URL
http$host$portsmall_light(dw=300dh=300)imgimagejpg
http$host$portimgimagejpg
テキスト
Thank You
![Page 15: Optimize images for web site / app performance](https://reader033.vdocuments.mx/reader033/viewer/2022042906/58a6f90f1a28abc6318b4ced/html5/thumbnails/15.jpg)
テキスト
HOW TO KNOW THE CLIENT SUPPORTS WEBP OR NOT
Acceptimagewebpimageq=08
Check Accept HTTP Request Header
テキスト
DEMO
REAL EXAMPLE
テキスト
FOODYVN
テキスト
ORIGINAL WEB DATA SIZE 59MB
html
css
js
img
other
Image 52 31MB
テキスト
PNG amp JPEG OPTIMIZATION SIZE 51MB ( REDUCE 92 )
342283html
css
js
img
other
Image 47 26MB
18 Image Size Reduced
テキスト
JPEG TO WEBP SIZE 47MB ( REDUCE 174 )
342283html
css
js
img
other
Image 42 21MB
333 Image Size Reduced
テキスト
JPEGPNGGIF TO WEBP SIZE 45MB ( REDUCE 211 )
342283html
css
js
img
other
Image 42 19MB
401 Image Size Reduced
テキスト
DEMO
テキスト
USE IMAGE RESIZING PROXY
httpsgithubcomcubicdaiyangx_small_light
ngx_small_light
テキスト
JUST CHANGE THE IMAGE URL
http$host$portsmall_light(dw=300dh=300)imgimagejpg
http$host$portimgimagejpg
テキスト
Thank You
![Page 16: Optimize images for web site / app performance](https://reader033.vdocuments.mx/reader033/viewer/2022042906/58a6f90f1a28abc6318b4ced/html5/thumbnails/16.jpg)
テキスト
DEMO
REAL EXAMPLE
テキスト
FOODYVN
テキスト
ORIGINAL WEB DATA SIZE 59MB
html
css
js
img
other
Image 52 31MB
テキスト
PNG amp JPEG OPTIMIZATION SIZE 51MB ( REDUCE 92 )
342283html
css
js
img
other
Image 47 26MB
18 Image Size Reduced
テキスト
JPEG TO WEBP SIZE 47MB ( REDUCE 174 )
342283html
css
js
img
other
Image 42 21MB
333 Image Size Reduced
テキスト
JPEGPNGGIF TO WEBP SIZE 45MB ( REDUCE 211 )
342283html
css
js
img
other
Image 42 19MB
401 Image Size Reduced
テキスト
DEMO
テキスト
USE IMAGE RESIZING PROXY
httpsgithubcomcubicdaiyangx_small_light
ngx_small_light
テキスト
JUST CHANGE THE IMAGE URL
http$host$portsmall_light(dw=300dh=300)imgimagejpg
http$host$portimgimagejpg
テキスト
Thank You
![Page 17: Optimize images for web site / app performance](https://reader033.vdocuments.mx/reader033/viewer/2022042906/58a6f90f1a28abc6318b4ced/html5/thumbnails/17.jpg)
REAL EXAMPLE
テキスト
FOODYVN
テキスト
ORIGINAL WEB DATA SIZE 59MB
html
css
js
img
other
Image 52 31MB
テキスト
PNG amp JPEG OPTIMIZATION SIZE 51MB ( REDUCE 92 )
342283html
css
js
img
other
Image 47 26MB
18 Image Size Reduced
テキスト
JPEG TO WEBP SIZE 47MB ( REDUCE 174 )
342283html
css
js
img
other
Image 42 21MB
333 Image Size Reduced
テキスト
JPEGPNGGIF TO WEBP SIZE 45MB ( REDUCE 211 )
342283html
css
js
img
other
Image 42 19MB
401 Image Size Reduced
テキスト
DEMO
テキスト
USE IMAGE RESIZING PROXY
httpsgithubcomcubicdaiyangx_small_light
ngx_small_light
テキスト
JUST CHANGE THE IMAGE URL
http$host$portsmall_light(dw=300dh=300)imgimagejpg
http$host$portimgimagejpg
テキスト
Thank You
![Page 18: Optimize images for web site / app performance](https://reader033.vdocuments.mx/reader033/viewer/2022042906/58a6f90f1a28abc6318b4ced/html5/thumbnails/18.jpg)
テキスト
FOODYVN
テキスト
ORIGINAL WEB DATA SIZE 59MB
html
css
js
img
other
Image 52 31MB
テキスト
PNG amp JPEG OPTIMIZATION SIZE 51MB ( REDUCE 92 )
342283html
css
js
img
other
Image 47 26MB
18 Image Size Reduced
テキスト
JPEG TO WEBP SIZE 47MB ( REDUCE 174 )
342283html
css
js
img
other
Image 42 21MB
333 Image Size Reduced
テキスト
JPEGPNGGIF TO WEBP SIZE 45MB ( REDUCE 211 )
342283html
css
js
img
other
Image 42 19MB
401 Image Size Reduced
テキスト
DEMO
テキスト
USE IMAGE RESIZING PROXY
httpsgithubcomcubicdaiyangx_small_light
ngx_small_light
テキスト
JUST CHANGE THE IMAGE URL
http$host$portsmall_light(dw=300dh=300)imgimagejpg
http$host$portimgimagejpg
テキスト
Thank You
![Page 19: Optimize images for web site / app performance](https://reader033.vdocuments.mx/reader033/viewer/2022042906/58a6f90f1a28abc6318b4ced/html5/thumbnails/19.jpg)
テキスト
ORIGINAL WEB DATA SIZE 59MB
html
css
js
img
other
Image 52 31MB
テキスト
PNG amp JPEG OPTIMIZATION SIZE 51MB ( REDUCE 92 )
342283html
css
js
img
other
Image 47 26MB
18 Image Size Reduced
テキスト
JPEG TO WEBP SIZE 47MB ( REDUCE 174 )
342283html
css
js
img
other
Image 42 21MB
333 Image Size Reduced
テキスト
JPEGPNGGIF TO WEBP SIZE 45MB ( REDUCE 211 )
342283html
css
js
img
other
Image 42 19MB
401 Image Size Reduced
テキスト
DEMO
テキスト
USE IMAGE RESIZING PROXY
httpsgithubcomcubicdaiyangx_small_light
ngx_small_light
テキスト
JUST CHANGE THE IMAGE URL
http$host$portsmall_light(dw=300dh=300)imgimagejpg
http$host$portimgimagejpg
テキスト
Thank You
![Page 20: Optimize images for web site / app performance](https://reader033.vdocuments.mx/reader033/viewer/2022042906/58a6f90f1a28abc6318b4ced/html5/thumbnails/20.jpg)
テキスト
PNG amp JPEG OPTIMIZATION SIZE 51MB ( REDUCE 92 )
342283html
css
js
img
other
Image 47 26MB
18 Image Size Reduced
テキスト
JPEG TO WEBP SIZE 47MB ( REDUCE 174 )
342283html
css
js
img
other
Image 42 21MB
333 Image Size Reduced
テキスト
JPEGPNGGIF TO WEBP SIZE 45MB ( REDUCE 211 )
342283html
css
js
img
other
Image 42 19MB
401 Image Size Reduced
テキスト
DEMO
テキスト
USE IMAGE RESIZING PROXY
httpsgithubcomcubicdaiyangx_small_light
ngx_small_light
テキスト
JUST CHANGE THE IMAGE URL
http$host$portsmall_light(dw=300dh=300)imgimagejpg
http$host$portimgimagejpg
テキスト
Thank You
![Page 21: Optimize images for web site / app performance](https://reader033.vdocuments.mx/reader033/viewer/2022042906/58a6f90f1a28abc6318b4ced/html5/thumbnails/21.jpg)
テキスト
JPEG TO WEBP SIZE 47MB ( REDUCE 174 )
342283html
css
js
img
other
Image 42 21MB
333 Image Size Reduced
テキスト
JPEGPNGGIF TO WEBP SIZE 45MB ( REDUCE 211 )
342283html
css
js
img
other
Image 42 19MB
401 Image Size Reduced
テキスト
DEMO
テキスト
USE IMAGE RESIZING PROXY
httpsgithubcomcubicdaiyangx_small_light
ngx_small_light
テキスト
JUST CHANGE THE IMAGE URL
http$host$portsmall_light(dw=300dh=300)imgimagejpg
http$host$portimgimagejpg
テキスト
Thank You
![Page 22: Optimize images for web site / app performance](https://reader033.vdocuments.mx/reader033/viewer/2022042906/58a6f90f1a28abc6318b4ced/html5/thumbnails/22.jpg)
テキスト
JPEGPNGGIF TO WEBP SIZE 45MB ( REDUCE 211 )
342283html
css
js
img
other
Image 42 19MB
401 Image Size Reduced
テキスト
DEMO
テキスト
USE IMAGE RESIZING PROXY
httpsgithubcomcubicdaiyangx_small_light
ngx_small_light
テキスト
JUST CHANGE THE IMAGE URL
http$host$portsmall_light(dw=300dh=300)imgimagejpg
http$host$portimgimagejpg
テキスト
Thank You
![Page 23: Optimize images for web site / app performance](https://reader033.vdocuments.mx/reader033/viewer/2022042906/58a6f90f1a28abc6318b4ced/html5/thumbnails/23.jpg)
テキスト
DEMO
テキスト
USE IMAGE RESIZING PROXY
httpsgithubcomcubicdaiyangx_small_light
ngx_small_light
テキスト
JUST CHANGE THE IMAGE URL
http$host$portsmall_light(dw=300dh=300)imgimagejpg
http$host$portimgimagejpg
テキスト
Thank You
![Page 24: Optimize images for web site / app performance](https://reader033.vdocuments.mx/reader033/viewer/2022042906/58a6f90f1a28abc6318b4ced/html5/thumbnails/24.jpg)
テキスト
USE IMAGE RESIZING PROXY
httpsgithubcomcubicdaiyangx_small_light
ngx_small_light
テキスト
JUST CHANGE THE IMAGE URL
http$host$portsmall_light(dw=300dh=300)imgimagejpg
http$host$portimgimagejpg
テキスト
Thank You
![Page 25: Optimize images for web site / app performance](https://reader033.vdocuments.mx/reader033/viewer/2022042906/58a6f90f1a28abc6318b4ced/html5/thumbnails/25.jpg)
テキスト
JUST CHANGE THE IMAGE URL
http$host$portsmall_light(dw=300dh=300)imgimagejpg
http$host$portimgimagejpg
テキスト
Thank You
![Page 26: Optimize images for web site / app performance](https://reader033.vdocuments.mx/reader033/viewer/2022042906/58a6f90f1a28abc6318b4ced/html5/thumbnails/26.jpg)
テキスト
Thank You