推荐/标准图像缩略图尺寸

发布于 2024-10-08 11:34:17 字数 415 浏览 7 评论 0原文

根据我的Web开发经验,每个网站的HTML页面设计可能都有不同的<图像>标签以不同的尺寸显示相同的图像。即:网站的主页可能以 500*500 显示图像,列表页面可能以 200*150 显示图像,网站的其他部分将使用不同的尺寸。正如您所看到的,向用户显示的图像的比例是不同的,因此会导致图像拉伸、像素化和/或其他质量问题。

我目前处理这个问题的方法是使用 jQuery 裁剪工具让用户选择要从中裁剪缩略图的区域。然后使用 imagick 调整裁剪后的图像大小以适合页面设计中的每个位置。然而,尽管我可以强制用户根据预定义的比例裁剪图像,但 HTML 仍将包含图像占位符,其缩略图需要不同的比例。因此,对于每张图像,我将不得不强制用户根据我的网站所需的每种可能的比例裁剪上传的图像。

我认为这不是一个友好的解决方案,你会怎么做?网络有标准/推荐的比例吗?

谢谢

Based on my experience in web development, HTML page designs for every website may have different < img > tags showing the same image in different sizes. i.e: the website's main page might show the image in 500*500, the listing page might show it in 200*150 and other sections of the website will use different sizes. As you can see the ratios of the images to be displayed to the user are different and therefore will cause a problem in having the image stretched, pixelated and/or other quality problems.

How i currently handle this issue is by using a jQuery cropping tool to make the user select the area to crop the thumbnail from. the cropped image is then resized using imagick to fit every position in the page design. However, although i can force the user to crop an image based on a pre-defined ratio, the HTML will still contain image placeholders which require a different ratio for its thumbnail. So for every image, i will have to force the user to crop the uploaded image based on every possible ratio my site requires.

I don't think this is a friendly solution, how would you do it? is there a standard/recommended ratio for the web?

Thanks

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

终遇你 2024-10-15 11:34:17

我相信这里没有绝对的真理。如果您的发布商具有设计意识,他们可能不喜欢任意裁剪。 (设计不应该被逻辑所奴役。)

如果图像比例很重要,我建议使用两个不同的图像。如果没有,请裁剪/微移或更改布局。

问候,
/吨

There¨s no absolute truth here I belive. If your publishers are design aware, they probably don't like arbitrary cropping. (Design shouldn't be enslaved by logic.)

If image-proportions are significant, I'd suggest two diffenent images. If not, crop/nudge or change layout.

regards,
/t

飘过的浮云 2024-10-15 11:34:17

我只需使用 ImageMagick 自动裁剪缩略图即可。通常,裁剪在缩略图上的确切位置并不那么重要,因此自动执行此操作是解决问题的一种简单方法,无需用户参与,同时仍能获得不错的结果。

I would simply crop the thumbnail images automatically using ImageMagick. Usually, it's not that important exactly where the crop is placed on thumbnail images, so doing it automatically is an easy way to solve the problem without involving the user while still getting a decent result.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文