webkit 光栅图像与矢量图像
我正在尝试解决为 webkit 浏览器设计 HTML 时的分辨率问题。 所以基本上问题是 webkit 浏览器的分辨率可以从 240x320 到 960x640 的任何地方，我不能为每个浏览器设置单独的图像/图标，但我确实希望页面在所有设备上看起来都一样（或者至少非常接近） ）。
缩放图像（使用百分比）可以工作，但会降低性能： http://code.google.com/speed/page-speed /docs/rendering.html#SpecifyImageDimensions
另一个选项是使用 webkit 支持的矢量图形，但我不知道会对页面/应用程序产生的性能影响。
另一种选择是为某些标准的众所周知的分辨率设置一些图标集，当您获得这些组之外的浏览器时，您可以在最接近用户本机分辨率的集合上应用一些较小的缩放。
所以基本上我要问的是，在考虑性能的情况下实现这一目标的最佳途径是什么？
谢谢 -阿萨夫
I am trying to address a resolution issue when designing HTML for webkit browsers.
So basically the problem is that webkit browsers can have resolution anywhere from 240x320 to 960x640 and I can't have a separate image/icon set for each one but I do want the pages to look the same on all devices (or very close at least).
Scaling the image (working with percentages) works but it's a performance degrade:
http://code.google.com/speed/page-speed/docs/rendering.html#SpecifyImageDimensions
The other option is using vector graphics which is supported in webkit but I am not aware of the performance implications that is going to have on the pages/app.
The other option is to have a few icon sets for some standard well know resolutions and when you get a browser which is outside of these groups you apply some minor scaling on the set which is closest to the users native resolution.
So basically what I am asking is, what would be the best route to achieve this with performance in mind?
Thanks
-Assaf
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
矢量图形在运行时性能方面总是比复杂方程更昂贵运行来创建它们。话虽如此，我不确定它们是否从头开始重新绘制每一帧，或者结果是否被缓存，除非它处于脏状态。
我建议为众所周知的分辨率设置一些不同的图标集，并根据需要应用较小的缩放。
Vector graphics are always more expensive in terms of runtime performance as complex equations are run to create them. Having said that, I'm not sure if they're redrawn every frame from scratch, or if the result's cached unless it's in a dirty state.
I'd suggest having a few different icon sets for well known resolutions and applying minor scaling if required.
第一个答案根本没有帮助。矢量图形可以像 PNG 一样小，并且使用得当可以支持透明度和其他各种良好的功能。
唯一的问题是，如果您寻求像素完美，则某些图像按比例放大可能会导致问题。
您还可以使用 illustrator to html5 canvas 插件直接导出到 html5 canvas。
对于行图标上的 webkit 浏览器，我们设置了一个属性，不允许 webkit 缩放桌面浏览器的图标。或者对于某些图标，我们包含一个小的 SVG。
他们得到了很好的支持并且工作得很好。更好的是使用免费的字体创建工具并将矢量图形从 illustrator 粘贴到字体中，这样您就可以使用网络字体简单地调用任何大小的图标，作为简单的文本。我们使用这种技术。
The first answer is not helpful at all. Vector graphics can be just as small as a PNG, and used right can support transparency and various other good features.
The only problem is if your looking for pixel perfect perfection having some of the images scale up might cause problems.
You can also use illustrator to html5 canvas plugin to export directly to html5 canvas.
For our webkit browsers on row icons, we set a property that doesn't allow webkit to scale the icons for desktop browsers. Or for some of the icons we include a small SVG.
They are well supported and work great. Even better would be to use a free font creation tool and paste your vector graphics from illustrator into a font, so that you could use web-font to simply call up ANY size icon, as simple text. We use this technic.