使用CSS与图像本身绘制图像

Question

我刚刚构建了一个应用程序，它使用Java读取图像的所有像素，然后创建一个CSS文件，用于在浏览器上绘制该图像。

事实是CSS文件比图像大得多。假设图像占用37KB，则CSS占用7MB。多令人无法接受的大。

但是我听说过某些地方浏览器从服务器请求图像比CSS慢，而且发现CSS很容易解析。

该应用程序还有什么优点吗？或者这只是浪费时间？

请指教。

我的应用程序与此网站的工作方式相同，并生成相同的CSS：

http://image2css.alexdoesit.com/  

Answer 1

  

但是我听说过某些地方浏览器从服务器请求图像比CSS慢，而且发现CSS很容易解析。

对于某些视觉效果（如圆角，阴影，渐变等），CSS优先于图像。

但是如果你打算效仿＆＃34;真实＆＃34;使用CSS的图片（例如照片），这绝对是个坏主意。为什么？

• 空间：考虑最简单的图像格式，如未压缩的8位RGB位图。每个像素需要3个字节（加上整个文件的一些固定字节数）。对于每个像素，CSS可能需要更多的字节。

• 时间：解析和显示像素数据比使用样式化伪元素构建巨大的 HTML DOM更简单（从计算角度来看）。

• 功能：可以通过CSS额外处理/更改/增强实际图像，例如将图像转换为灰度，模糊等 - 请参阅filters。

但是，你已经完成了一个很好的编程练习：

  

我刚刚构建了一个应用程序，它使用Java读取图像的所有像素，然后创建一个CSS文件，用于在浏览器上绘制该图像。