优化横幅图像

时间:2016-02-03 10:24:20

标签: css html5 optimization banner retina

这里有一个时间敏感的问题,所以任何及时的回复都会非常非常感激。

我必须创建一些不同大小的HTML5横幅,一些用于移动,另一些用于桌面。我的每个限制是100kb。我在InDesign文件中获得了图像和文本。

优化这些图片和文字组的最佳方法是什么?

到目前为止,我一直使用Fireworks将它们转换为PNG-8,平均结果。如果他们现在处于平均状态,那么他们在Retina屏幕上看起来会很糟糕。我不想要那个。

为了解决这个问题,我应该将它们保存在更大的尺寸中并在HTML5 / CSS中进行缩放吗?

我觉得我错过了一些基本的东西,但是我整个下午都在搜索,并且无法找到可行的答案。如果可以的话请帮忙。

1 个答案:

答案 0 :(得分:0)

听起来您可以从部署HTML5 1- abcdefg abcdeff 1 2- abc Abc 0 3- abs AbZ -1 元素中受益:

进一步阅读:

  1. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture
  2. http://webdesign.tutsplus.com/tutorials/quick-tip-how-to-use-html5-picture-for-responsive-images--cms-21015