如何判断图片的格式
问题
客户上传的一张图片,chrome 和大部分的 Android 设备访问都正常,而苹果的设备访问则打不开,这是为什么?
chrome 访问
safari 访问
这是为什么呢?当遇到这类问题,我们应该怎么去排查?
首先,当我们看到这类问题,第一眼就该有个意识,图片格式有问题。因为 Android 操作系统是谷歌的,chrome 也是谷歌的,国产的一些 chromium 内核的浏览器其本质也和谷歌浏览器一样,比如360、QQ 浏览器、搜狗浏览器都是 chrome 开源版浏览器的内核。
那么我们平常接触到的图片格式有,jpg、gif、png。这些格式正常来说在不同内核的浏览器上都是可以正常识别的,而只有一种格式是只能在 chrome 浏览器上正常访问,其他浏览器不支持。
什么是 webp
webp 是谷歌开源的图片编码格式,它的最大特点就是算法牛逼,能够将图片的体积缩小但是质量不减。具体参考 google 官网说明https://developers.google.com/speed/webp/
怎么判断图片是 webp 呢
1.首先,第一种方式是查看图片的 response 头信息中的 content-type 字段,如果字段中带有 image/webp 就表示该图片是 webp 的格式,你可以试试把这个图片的 url 放到 Safari 访问试试。
2.我们查看上述案例的图片格式,发现其类型是 image/jpeg 格式,那能证明这张图片就不是 webp 了吗?
我们通过 ffplay 去查看下,发现其输入的格式是 webp。
ffplay http://cdn.zhi6.live/upload/20180830/968d5e9e866c6951d5c67b05e6e3f393.jpg
ffplay version 4.0.2 Copyright (c) 2003-2018 the FFmpeg developers
built with Apple LLVM version 9.1.0 (clang-902.0.39.2)
configuration: --prefix=/usr/local/Cellar/ffmpeg/4.0.2 --enable-shared --enable-pthreads --enable-version3 --enable-hardcoded-tables --enable-avresample --cc=clang --host-cflags= --host-ldflags= --enable-gpl --enable-ffplay --enable-libmp3lame --enable-libx264 --enable-libxvid --enable-opencl --enable-videotoolbox --disable-lzma
libavutil 56. 14.100 / 56. 14.100
libavcodec 58. 18.100 / 58. 18.100
libavformat 58. 12.100 / 58. 12.100
libavdevice 58. 3.100 / 58. 3.100
libavfilter 7. 16.100 / 7. 16.100
libavresample 4. 0. 0 / 4. 0. 0
libswscale 5. 1.100 / 5. 1.100
libswresample 3. 1.100 / 3. 1.100
libpostproc 55. 1.100 / 55. 1.100
Input #0, webp_pipe, from 'http://cdn.zhi6.live/upload/20180830/968d5e9e866c6951d5c67b05e6e3f393.jpg':
Duration: N/A, bitrate: N/A
Stream #0:0: Video: webp, yuv420p(tv, bt470bg/unknown/unknown), 1008x2016, 25 tbr, 25 tbn, 25 tbc
另外如果不打算安装 ffplay 可以找一些在线图片格式检测的网站去检测下