在网页中显示缩略图的最佳实践
如果我想显示图像的缩略图视图并在单击缩略图时显示实际尺寸的图像,
最佳实践/标准方法是什么?我的意思是,
1-将两个文件保存在本地存储中(例如800x600和120x160)并分别加载它们
2-仅保留完整尺寸的图像(例如 800x600)并通过在 HTML 标签中调整其大小来显示缩略图
width="160" height="120"
If I want to show thumbnail view of an image and show the actual size image when the thumbnail is clicked ,
What is the best practice/standard way ? I mean,
1- Keep two files in local storage (say 800x600 and 120x160)and load them separately
2- Keep only the full size image(say 800x600) and show the thumbnail by resizing it in HTML tags
width="160" height="120"
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(4)
最佳实践是使用这两个文件,即
调整大小的计算量很大并且使用更多的带宽。
理想情况下,每个缩略图都被压缩到大约 10 - 30K (JPEG),并具有替代文本。这样一张表中大约可以有 20 个左右,方便查看。就像这里:http://www.flickr.com/explore/interesting/7days/
正如您可能知道的,有缩略图创建者,喜欢这个。
Best practice is to use the two files, i.e.
As resizing is both computationally expensive and uses more bandwidth.
Ideally, each thumbnail image is compressed to about 10 - 30K (JPEG), and has an alt text. That way you can have about 20 or so in a table, easy to see. Like here: http://www.flickr.com/explore/interesting/7days/
And as you likely know, there are thumbnail creators, like this one.
选项 1 - 您可以节省带宽,并且还允许有下载限制的人不使用他们的潜在限制(例如在他们的手机上)。您最终放弃的唯一东西(假设您自动化了该过程)是硬盘空间。
Option 1 - you save bandwidth and you also allow people with download limits to not use up their potential limit (such as on their phones). The only thing you end up giving up (assuming you automate the process) is hard drive space.
我认为,最好是保留两个文件。用户可以加载几个大文件,而不是所有文件。因此,没有必要将它们全部加载。
这对于手机或此类设备可能非常重要。
I think, that the best is to keep two files. User can load a several big files, not everything. So, to load them all is unnecessary.
It may be very important for phones or such devices.
最好的办法是在服务器中保留高分辨率版本,然后根据要求动态调整图像大小。如果您愿意,可以在服务器端缓存该文件。如果您使用 C#,此示例显示 如何动态调整大小
下一个选项是在服务器中保留单独的文件。
best thing is keep high resolution version in the server and then based on the requirement dynamically re size the image. and if you want you can cache the file in the server side.if you are using C# this sample shows how to resize dynamically
next option is keep separate files in server.