V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
taken
V2EX  ›  Android

请教一下各位,一般互联网公司对图片的要求是什么?

  •  
  •   taken · 2019-04-23 16:34:27 +08:00 · 8860 次点击
    这是一个创建于 2033 天前的主题,其中的信息可能已经有所发展或是发生改变。
    • 请教一下各位,一般互联网公司对图片的要求是什么?
    • PNG,JPEG,WEBP,SVG 之间的取舍标准是什么呢?
    • 是不是一般 UI 用 PNG 导出时,用 tinypng 插件压缩,然后客户端这边手动压缩成 WEBP 进行使用呢?
    8 条回复    2019-04-24 11:51:11 +08:00
    gz911122
        1
    gz911122  
       2019-04-23 16:54:52 +08:00
    在线图片一般是 webp,加载快省流量,
    移动端的话 png 的比较多
    gosansam
        2
    gosansam  
       2019-04-23 17:17:12 +08:00
    无码
    flyingghost
        3
    flyingghost  
       2019-04-23 17:31:27 +08:00   ❤️ 4
    要求就是。。。根据场景选择合适的图片格式、尺寸。没有唯一标准,只取决于具体场景下的业务需求+性能需求+价格需求。

    png 适合颜色简单、色块边界规则、细节不太丰富的图片。比如界面、文字、icon 等。
    jpg 适合颜色丰富、细节丰富的图片。比如照片。
    webp 很多指标比 png 还好一些,但毕竟比较新,兼容性不如 png。
    以上都是位图。而 svg 是矢量图,适合图片面积不大、颜色简单、边界规则,但需要在各种尺寸下无损缩放的场景。比如界面、icon。
    gif 能动,仅此一点天下无敌。
    ico 格式专做网站图标,这也是比较独特的。当然现代浏览器已经可以支持其他格式的图标了。

    大部分场景最好使用合适的尺寸、合适的 dpi/ppi 的图片。比如列表里只放小尺寸缩略图,详情里只放最大尺寸 1280 的图,原图下载时放高清原图。这只是一个例子,例如如果你做的是桌面壁纸站,那标准就要提高很多很多了。
    充分考虑小屏手机、大屏高 dpi 手机、retina 屏等各种物理屏幕场景。

    压缩分有损和无损两种。无损意味着原汁原味保留原图每一个像素点的信息,一般可以换格式、同格式下换压缩算法、剔除注释信息、Exif 信息等像素无关信息。有损可以换格式、换压缩算法、缩放等。

    总之,这是一个多目的多规则共同权衡的问题。没有唯一解。
    marsgt
        4
    marsgt  
       2019-04-23 17:34:07 +08:00
    小项目会选择图片类型,一般的标准(或者说我自己的标准)是,图片偏实景风格(或者色彩数太多,256 色板都搞不定的)的用 JPEG/JPG,偏矢量风格的用 PNG8,有高清要求的用 PNG24,有透明度过渡且有高保真要求的用 PNG32。
    如果预估受众客户端兼容没问题,考虑 WebP ;
    页面有复杂版式要求(一般是传播类 H5 )且需要切很碎拼很麻烦时,用 SVG。

    大项目一般直接用 CDN 统一处理格式和压缩之类的问题了。一般格式就直接统一了,比如都是 JPG。

    压缩这一段你可以独立出来,用工具流搞定。
    切图还是自己切舒服,UI 那边该转曲的转曲(如字体),然后直接甩过来原始文件就行了。这样可以省下不少沟通成本。
    aa1072551507
        5
    aa1072551507  
       2019-04-23 17:39:39 +08:00
    icon 用 PNG 大图就 JPG 我是这样的
    weixiangzhe
        6
    weixiangzhe  
       2019-04-24 10:03:51 +08:00 via iPhone
    全上传 png,然后用 oss 之类的图片处理转
    weixiangzhe
        7
    weixiangzhe  
       2019-04-24 10:06:49 +08:00 via iPhone
    支持 webp 用 webp,不支持大图用 jpg,小图用 png
    Gloomyer
        8
    Gloomyer  
       2019-04-24 11:51:11 +08:00
    icon svg 小部分 png(Android 小部分 vector 转了之后有压缩的问题)
    其他本地图片全部用 webp,网络图片 Android 这边用的 webp,ios 那边用的原图格式(阿里云 在线转)
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1072 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 18ms · UTC 22:56 · PVG 06:56 · LAX 14:56 · JFK 17:56
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.