网页图像大小推荐不同的屏幕

Question

我是网络开发的新手。我正在开发一个电子商务网站。我希望我的网页加载速度更快。由于图像对网页的性能贡献很大，我想严格处理图像大小，分辨率对于不同大小的媒体屏幕。请帮我解决一下这个。我有这个工具或任何插件吗？或者关于这个主题的任何来源涵盖了大部分内容？

Answer 1

您可以调整不同屏幕尺寸的图像大小。将图像上载到网站时，请通过编写服务器端脚本来调整图像大小。并将图像限制为您需要的更大尺寸。

例如。假设您的网站需要1024 * 740分辨率图片，您可以限制用户仅上传1024 * 740张图片。上传后，您可以通过服务器端脚本将上传的图像调整为几个较小分辨率的图像文件。然后，您可以根据屏幕分辨率使用JavaScript加载已调整大小的图像。

希望此链接可以帮助您。 http://www.w3schools.com/css/css_rwd_images.asp

由于您正在开发电子商务网站，我希望您必须使用位图图像。如果您可以尝试使用矢量图像作为横幅和滑块。它比位图更快。 https://en.wikipedia.org/wiki/Vector_graphics

Answer 2

1. 使用自适应图像 srcset 属性

为桌面和移动设备使用不同的图像分辨率

2. 然后使用延迟加载图片以使用此插件获得更好的速度LazySize

阅读本文以便更好地理解Immaculate Imagery with Lazy Pictures & BPG