出于版权目的调整 html 标签中的图像大小

Question

当在 <img> 标签中从 url 使用图像时，是否可以将图像调整为较低的分辨率？

例如<img src="http://someplace.com/img" width="100" height="100">

我想使用使用 Shopify 应用创建并在 line_item 属性中引用的个性化图片，并在确认电子邮件中使用它，但我不希望客户可以右击保存。

是否可以降低图像的分辨率？

Answer 1

CSS 仅在视觉上更改图像大小。这意味着文件大小仍然与原始文件一样，如果查看器 download/save 图像，它会以原始大小获取它。

所以为了视觉目的，你可以使用这样的东西：

img.resize {
    width:100px;
    height: auto;
}

但是如果你想隐藏原来的文件大小，你需要用图像编辑软件调整它的大小，然后在新的URL中上传较小的文件并使用它。

Answer 2

您可以使用图像处理库来调整大小 and/or 模糊图像或更改其分辨率。您可以操作文件夹中的单个图像或多个图像，并将操作后的图像存储在新文件夹中。然后您可以将这些新修改的图像添加到您的页面。一个这样的库是 gulp-gm

gulp.src('test.png')
  .pipe(gm(function (gmfile) {
    return gmfile.blur(10);
  }))

分辨率更改

var gulp = require('gulp');
var gm = require('gulp-gm');

gulp.task('default', function () {
  gulp.src('test.png')

    .pipe(gm(function (gmfile) {

      return gmfile.resize(100, 100);

    }))

    .pipe(gulp.dest('dist'));
});

出于版权目的调整 html 标签中的图像大小

Re-size image in html tag for copyright purposes

html

shopify