如何判断图片的格式

如何判断图片的格式

问题

客户上传的一张图片,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 可以找一些在线图片格式检测的网站去检测下