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

Question

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

事实是 CSS 文件比图像大得多。假设图片占37KB，CSS占7MB。那是 Not Acceptable 大。

但我在某处听说浏览器从服务器请求图像的速度比 CSS 慢，而且 CSS 易于解析。

那个应用程序还有什么优势吗？还是只是浪费时间？

请多多指教。

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

http://image2css.alexdoesit.com/  

Answer 1

But I have heard somewhere that browsers are slower at requesting images from the server than CSS and also find CSS easy to parse.

对于圆 Angular 、阴影、渐变等某些视觉效果，CSS 优于图像。

但是，如果您打算使用 CSS 模拟“真实”图片(例如照片)，那绝对是个坏主意。为什么？

• 空格:甚至考虑最简单的图像格式，如未压缩的 8 位 RGB 位图。每个像素需要 3 个字节(加上整个文件的一些固定字节数)。 CSS 可能需要相当多的字节来处理每个像素。

• 时间:(从计算的 Angular )解析和显示像素数据比使用样式化伪元素构建巨大 HTML DOM 更简单。

• 特性:真实图像可以通过 CSS 进行额外处理/更改/增强，例如将图像转换为灰度、模糊等 — 参见 filters .

---

不过，您已经完成了一个不错的编程练习:

I have just built an application that reads all pixels of an image using Java and then creates a CSS file for drawing that image on the browser.