问题标签 [image-optimization]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
1227 浏览

performance - 如何优化通过调度程序提供的图像

我正在研究 CQ5.5 实例。我想始终提供网络优化图像。也就是说,经过优化以减小尺寸而不影响质量的图像。我发现即使我通过Yahoo Smushit之类的工具运行由 CQ 工作流程创建的图像再现,该工具仍然能够减小图像的大小。所以这让我相信 CQ 演绎版没有完全网络优化。

我还没有找到任何关于如何优化通过调度程序获取的图像的 CQ 指南,在我的例子中,调度程序是一个基于 Windows IIS 的调度程序。我已经探索了选项并考虑了以下内容:

  1. 也许存在一些 CQ 配置设置来启用它而我根本不知道?这将是最简单的,但搜索让我相信这不是一个功能(还没有?)。
  2. 添加某种模块,对 HTTP 响应进行图像优化处理并优化图像(但是,对于每个请求都执行此操作可能会对性能产生太大影响,除非它只能在从发布者获取非调度程序缓存的图像时运行) .
  3. 创建后更改磁盘上的调度程序缓存文件,以便后续请求获得 Web 优化版本。
  4. 在创建再现时自定义工作流程以优化图像。但是,我发现有时页面直接引用了原始 DAM 图像,这可能没有优化,我还想优化这些图像请求,而不仅仅是渲染请求。这不会影响所有 HTTP 图像请求。
  5. 添加在发布者上运行的 Java 代码,以对到达发布者的 HTTP 图像请求进行后处理并返回优化的图像(然后将被调度程序缓存)。

选项 5 似乎最有希望,但我不知道如何在 CQ5 中做到这一点。其他选项也可能存在。 如何优化调度程序提供的图像——最好的方法是什么,该方法是如何实现的?

0 投票
1 回答
146 浏览

image-compression - ImageOptim 破坏 png 文件

我想在我的网站上压缩 png 文件。我找到了 ImageOptim程序。对于 jpeg 文件,它工作得很好,但是当我压缩 png 文件时,它在网站上显示不正确(部分图片被切断)。

我的问题是如何让它在浏览器中工作?我看到 ImageOptim 使用多种工具进行 png 压缩(PNGOUT、OPTIpng 等)。也许我应该设置一些特定的工具?

破碎的png图像

0 投票
1 回答
2553 浏览

html - Twitter 引导程序和图像

我对 bootstrap 有点陌生,但在站点开发和 css 方面非常精通……我很难理解 Bootstrap 如何处理针对不同视口大小的优化图像。

根据我的经验,您需要针对正在查看的设备优化图像,而我在 Bootstrap 中看到的所有内容都让我相信它不会这样做。似乎它只是使用一个大图像并使用 css 将其缩小(甚至放大)。当我们希望移动设备拥有丰富的体验并针对较小文件的速度进行优化时,这似乎与直觉相悖。

例如,如果我希望图像在桌面上很好地显示,并且布局为 900 像素(~200k)宽,我会针对该尺寸优化图像。对于具有布局宽度的移动设备,我可以说是 400 像素(~50k)的优化版本。

在我自己的系统中,我们通过用户代理预先发现并在编译期间填充正确的图像,我意识到我也可以简单地将所有这些放入引导程序中,但我希望有某种形式的机制来实现类似的功能,是我期待太多了吗?

我看不到 Bootstrap 如何能够延迟加载页面内容中的图像,直到发现视口大小,以便使用针对该大小优化的正确文件?我在这里错过了什么吗?

- - 编辑

我很确定您可以根据视口大小在 Bootstraps CSS 中定义图像路径,但它没有回答它将首先加载的问题?

---- 2014 年 11 月编辑

仅供参考,这个问题已经过时了...... @media 查询将完成不同的文件请求,但是您仍然需要每种大小的单个文件或某种动态生成它们的方式。无论哪种方式,对于任何不匹配的内容都会延迟加载,因此它进行了一些优化。对于移动用户,在请求时识别用户代理并进一步优化仍然是有益的,因为加载除移动特定文件/类之外的任何内容都是无用的,只会减慢速度。

0 投票
0 回答
169 浏览

ios - 添加大图后的ipa文件大小

将大图 (1.1 MB) 添加到 iPad 应用程序包后,ipa 文件大小从 2MB 变为 4.1MB。有人可以解释为什么会发生这种情况吗?这是正常行为吗?我认为 Xcode 优化了 png 文件还是我错了?

0 投票
0 回答
301 浏览

ruby-on-rails - 使用 Rails 和 Heroku 压缩指南针生成的精灵

我现在在尝试确保我的图像得到优化时遇到了麻烦。我已经手动优化了每个图像,我发现这个方便的 gem与结合起来可以在未来自动化这个过程。

我还有两个pagespeed警告我的剩余图像,它们是指南针生成的精灵文件。虽然 image_optim gem 很棒,但它并没有压缩生成的图像。

由于其他原因,我已经分叉了 heroku ruby​​ buildpack 以对其进行修改,因此我对涉及该问题的解决方案持开放态度。我确实试过这个:

但我最终得到了这个错误,这似乎与我无关,但绝对是这段代码触发了它:

任何帮助,将不胜感激!

0 投票
0 回答
191 浏览

asp.net - 在 ASP.NET Sprite 和图像优化框架中自定义类名

是否可以在 ASP.NET Sprite 和图像优化框架中控制生成的 CSS 类名称?

更多信息:

我目前有两个精灵,一个用于 16x16 图标,另一个用于 32x32 图标。目前类名的格式.icon-16.[imagename].icon-32.[imagename].

我将手动引用标记中的类(即不通过框架助手):

例如class="icon-16 my-image"

有没有办法通过框架实现这一点?

0 投票
1 回答
1492 浏览

php - 是否可以在 shell_exec php 中运行 jpegoptim 命令?

在我的 php 文件中,我正在尝试执行 shell 命令。我能够在终端中运行命令变量值就好了。但不知何故,shell_exec 并没有为我做这件事。

看起来“git status”甚至在这里都不起作用

更新:终于报错了

sh:jpegoptim:找不到命令

0 投票
1 回答
112 浏览

ios - 如何使用 WASTED 和 xcode 来优化图像大小?

我正在尝试在我的应用程序上使用WASTED来减小其大小(目前为 839MB)。我已按照将其集成到我的 xcode 项目存档方案中的步骤进行操作:

当我存档它时,我会弹出要求我执行 WASTED 分析的弹出窗口。

在此处输入图像描述

然后我点击导出并按下分发按钮来创建 ipa 文件。问题是 ipa 仍然显示 >800MB 的大小。我错过了什么吗?我将 xcarchive 文件导出到不同的地方(桌面)并留在那里。我应该将其导出到我的应用程序中吗?谢谢!

0 投票
2 回答
151 浏览

javascript - 减少图像加载时间和带宽使用的最有效方法

我有一个巨大的图像加载在我的网站主页上,1366*690px我意识到这是巨大的,并决定考虑加快加载时间。

我首先通过Smush.it运行它

然后我编写了一些 javascript 来根据浏览器分辨率动态加载不同的图像

我现在正在寻求有关如何更快地加快进程的建议,我想我记得在某处读到将图像分成两部分会加快页面速度,这不是为什么在用图像制作渐变时,你会制作它们1px 宽?(并重复)?

当前文件大小(按浏览器宽度)如下所示:

注意:所有这些图像在 css 中的宽度都是 100%

我也知道与位深度(8,16,24,32)的数量有关,而且我不希望降低图片质量太多,您认为网络可以接受多少?我当前的位深度是 24,是不是太多了?

你会如何为网络优化这样的图像?

0 投票
1 回答
199 浏览

linux - 将监视文件夹和优化图像文件的 Linux 脚本?

有谁知道基于 linux 的脚本/程序,它将在服务器上连续运行并监视文件夹(最好带有子文件夹)图像文件并优化它们,alasmash.it pngout、jpegtrans 等。最好是所有这些工具。

我知道有很多 linux 应用程序会调用这些工具,但我想要一个可以监控包含我们网站图像的文件夹并优化新图像(忽略之前已经优化的图像) - 在第一次运行时它应该做所有事情,但是之后它应该知道它已经处理了什么。

这样的工具存在吗?