假設頁面的圖片太多，要如何改善速度？

Question

請問一下
我網站有很多圖片需要加載
但這導致我的網頁開啟速度很慢
請問有什麼方式可以使他變快呢？
https://www.pexels.com/
像這種網站圖片非常多
但是他也能在兩秒內加載完畢甚至更快
這到底怎麼做到的？

---

補充

我加了懶加載
但是發現好像沒有什麼用
可能是本身圖片真的太大了。。。
因為一開始根本沒有想到圖片檔案會那麼大，每個都3, 4ＭＢ
ＣＳＳ有沒有剪裁的技術能做後天補強？
可以讓圖片加載某個範圍就好？

Answer 1

楼主的主要问题在于他的图实在是太大了，3,4m的图不适合直接在网页上展示，所以解决方案：

图片上传之前先做压缩处理

1. 尺寸压缩。根据对清晰度的要求，缩小图片尺寸，比如原图是4000x3000的，那是不是缩小到2000x1500也可以接受？尺寸缩小就可以大大减少图片大小了。这个尺寸的缩小可以用photoshop的自动批处理功能实现，也可以用一些图片工具软件来实现。
2. 大小压缩。前端一般用gulp之类的工具实现，如果不是专业前端，jpg统一用photoshop压缩也还不错，通常3,4m的原片按65的参数压缩到300~400k也是有可能的。png的话可以在https://tinypng.com/上压缩，支持多文件打包下载。

列表图和详细图分开

页面展示的图片列表页的图，是更小尺寸的图片，根据你的layout设计来定图片的尺寸。用户点击小图以后，才去加载打开最终那个大图。你可以把你参考的那个网站上，列表页的图，和打开以后的大图，分别保存下来看一下就明白了。这个生成小图的功能，就要在你的php后台去实现了。

最后

最后才是楼上提到的那些优化方法，其中最重要的当然是懒加载，或者叫瀑布流图片。

Answer 2

从图片的角度简单回答一下:

1. 懒加载
   减少初始化时候的加载量，并且达到按需加载的目的
2. http2
   复用TCP连接，压缩HTTP包体积等,使用这种方法可以不将图片放到多个域名下。
3. 压缩图片
   常见套路，减少请求大小
4. 合并小且常用图片为雪碧图或iconfont
   常见套路，减少请求
5. dns 预解析
   在移动端dns解析影响挺大，
   我放几个连接:
   无线性能优化：域名收敛
   Prefetching, preloading, prebrowsing
6. 合理设置图片缓存方式，增强重复利用，避免反复网络请求
   主要是 if-not-modified/ e-tag 之类的http响应头
7. 使用测试工具分析页面加载流程
   简单可以使用 lighthouse, 现在已经被 chrome 合并到其 devtools 里面了。

配和 network 中的 throttle 进行网速控制，可以模拟一些贴近现实场景。

------ update

你可以试试渐进式图片

What does the interlaced option in Photoshop do?
When to interlace an image?

总结:

优化这个事情，我当前一直是没有理出什么规则的，一般都是出了问题才会去反追。所以建议你可以这样试试xD

Answer 3

图片懒加载 + gzip压缩

这个网站的懒加载代码是下面这个，它是发一个请求，返回一段 js 代码，然后执行这段代码，往 container 容器里添加新图片。

var container=document.getElementsByClassName('photos')[0];container.insertAdjacentHTML('beforeend','\n\n<article\n  class=\"photo-item photo-item--overlay\"\n  >\n  <a class=\"js-photo-link\" title=\"Road in City during Sunset\" href=\"/photo/road-in-city-during-sunset-248159/\">\n\n    <img srcset=\"https://images.pexels.com/photos/248159/pexels-photo-248159.jpeg?auto=compress&amp;cs=tinysrgb&amp;h=350 1x, https://images.pexels.com/photos/248159/pexels-photo-248159.jpeg?auto=compress&amp;cs=tinysrgb&amp;dpr=2&amp;h=350 2x\" width=\"525\" height=\"350\" style=\"background:rgb(81,65,56)\" class=\"photo-item__img\" alt=\"Road in City during Sunset\" data-big-src=\"https://images.pexels.com/photos/248159/pexels-photo-248159.jpeg?auto=compress&amp;cs=tinysrgb&amp;h=750&amp;w=1260\" data-large-src=\"https://images.pexels.com/photos/248159/pexels-photo-248159.jpeg?auto=compress&amp;cs=tinysrgb&amp;h=650&amp;w=940\" data-pin-media=\"https://images.pexels.com/photos/248159/pexels-photo-248159.jpeg?auto=compress&amp;cs=tinysrgb&amp;fit=crop&amp;h=1200&amp;w=800\" src=\"https://images.pexels.com/photos/248159/pexels-photo-248159.jpeg?auto=compress&amp;cs=tinysrgb&amp;h=350\" />\n<\/a>    <a href=\"/@nout-gons-80280\" class=\"photo-item__photographer\">\n      <img class=\"photo-item__avatar\" height=\"30\" width=\"30\" src=\"https://images.pexels.com/users/avatars/80280/nout-gons-225.jpeg?w=60&amp;h=60&amp;fit=crop&amp;crop=faces\" alt=\"Nout gons 225\" />\n      <span class=\"photo-item__name\">Nout Gons<\/span>\n    <\/a>\n  <a href=\"https://images.pexels.com/photos/248159/pexels-photo-248159.jpeg?cs=srgb&amp;dl=light-city-road-248159.jpg&amp;fm=jpg\" download><\/a>\n  <button class=\"js-like js-like-248159 btn-like btn-like--small photo-item__info\" data-photo-id=\"248159\">\n    <svg viewBox=\"0 0 100 100\" class=\"icon-heart\"><use xlink:href=\"#iconHeart\"><\/use><\/svg>\n  <\/button>\n  <button class=\"js-collect js-collect-248159 btn-like btn-like--small btn-like--collect photo-item__info\" data-photo-id=\"248159\">\n    <svg viewBox=\"0 0 30 30\" class=\"icon-plus\"><use xlink:href=\"#iconPlus\"><\/use><\/svg>\n  <\/button>\n<\/article>\n<article\n  class=\"photo-item photo-item--overlay\"\n  >\n  <a class=\"js-photo-link\" title=\"Two Mountaineers in Mountain\" href=\"/photo/two-mountaineers-in-mountain-914128/\">\n\n    <img srcset=\"https://images.pexels.com/photos/914128/pexels-photo-914128.jpeg?auto=compress&amp;cs=tinysrgb&amp;h=350 1x, https://images.pexels.com/photos/914128/pexels-photo-914128.jpeg?auto=compress&amp;cs=tinysrgb&amp;dpr=2&amp;h=350 2x\" width=\"528\" height=\"350\" style=\"background:rgb(70,70,70)\" class=\"photo-item__img\" alt=\"Two Mountaineers in Mountain\" data-big-src=\"https://images.pexels.com/photos/914128/pexels-photo-914128.jpeg?auto=compress&amp;cs=tinysrgb&amp;h=750&amp;w=1260\" data-large-src=\"https://images.pexels.com/photos/914128/pexels-photo-914128.jpeg?auto=compress&amp;cs=tinysrgb&amp;h=650&amp;w=940\" data-pin-media=\"https://images.pexels.com/photos/914128/pexels-photo-914128.jpeg?auto=compress&amp;cs=tinysrgb&amp;fit=crop&amp;h=1200&amp;w=800\" src=\"https://images.pexels.com/photos/914128/pexels-photo-914128.jpeg?auto=compress&amp;cs=tinysrgb&amp;h=350\" />\n<\/a>    <a href=\"/@saikat-ghosh-323099\" class=\"photo-item__photographer\">\n      <img class=\"photo-item__avatar\" height=\"30\" width=\"30\" src=\"https://images.pexels.com/users/avatars/323099/saikat-ghosh-795.jpeg?w=60&amp;h=60&amp;fit=crop&amp;crop=faces\" alt=\"Saikat ghosh 795\" />\n      <span class=\"photo-item__name\">Saikat Ghosh<\/span>\n    <\/a>\n  <a href=\"https://images.pexels.com/photos/914128/pexels-photo-914128.jpeg?cs=srgb&amp;dl=snow-landscape-mountains-914128.jpg&amp;fm=jpg\" download><\/a>\n  <button class=\"js-like js-like-914128 btn-like btn-like--small photo-item__info\" data-photo-id=\"914128\">\n    <svg viewBox=\"0 0 100 100\" class=\"icon-heart\"><use xlink:href=\"#iconHeart\"><\/use><\/svg>\n  <\/button>\n  <button class=\"js-collect js-collect-914128 btn-like btn-like--small btn-like--collect photo-item__info\" data-photo-id=\"914128\">\n    <svg viewBox=\"0 0 30 30\" class=\"icon-plus\"><use xlink:href=\"#iconPlus\"><\/use><\/svg>\n  <\/button>\n<\/article>\n<article\n  class=\"photo-item photo-item--overlay\"\n  >\n  <a class=\"js-photo-link\" title=\"\" href=\"/photo/baked-baking-close-up-dough-784636/\">\n\n    <img srcset=\"https://images.pexels.com/photos/784636/pexels-photo-784636.jpeg?auto=compress&amp;cs=tinysrgb&amp;h=350 1x, https://images.pexels.com/photos/784636/pexels-photo-784636.jpeg?auto=compress&amp;cs=tinysrgb&amp;dpr=2&amp;h=350 2x\" width=\"233\" height=\"350\" style=\"background:rgb(86,80,73)\" class=\"photo-item__img\" alt=\"Free stock photo of hands, photography, table, flour\" data-big-src=\"https://images.pexels.com/photos/784636/pexels-photo-784636.jpeg?auto=compress&amp;cs=tinysrgb&amp;h=750&amp;w=1260\" data-large-src=\"https://images.pexels.com/photos/784636/pexels-photo-784636.jpeg?auto=compress&amp;cs=tinysrgb&amp;h=650&amp;w=940\" data-pin-media=\"https://images.pexels.com/photos/784636/pexels-photo-784636.jpeg?auto=compress&amp;cs=tinysrgb&amp;fit=crop&amp;h=1200&amp;w=800\" src=\"https://images.pexels.com/photos/784636/pexels-photo-784636.jpeg?auto=compress&amp;cs=tinysrgb&amp;h=350\" />\n<\/a>    <a href=\"/@vanmalidate\" class=\"photo-item__photographer\">\n      <img class=\"photo-item__avatar\" height=\"30\" width=\"30\" src=\"https://images.pexels.com/users/avatars/253015/malidate-van-397.jpg?w=60&amp;h=60&amp;fit=crop&amp;crop=faces\" alt=\"Malidate van 397\" />\n      <span class=\"photo-item__name\">Malidate Van<\/span>\n    <\/a>\n  <a href=\"https://images.pexels.com/photos/784636/pexels-photo-784636.jpeg?cs=srgb&amp;dl=hands-photography-table-784636.jpg&amp;fm=jpg\" download><\/a>\n  <button class=\"js-like js-like-784636 btn-like btn-like--small photo-item__info\" data-photo-id=\"784636\">\n    <svg viewBox=\"0 0 100 100\" class=\"icon-heart\"><use xlink:href=\"#iconHeart\"><\/use><\/svg>\n  <\/button>\n  <button class=\"js-collect js-collect-784636 btn-like btn-like--small btn-like--collect photo-item__info\" data-photo-id=\"784636\">\n    <svg viewBox=\"0 0 30 30\" class=\"icon-plus\"><use xlink:href=\"#iconPlus\"><\/use><\/svg>\n  <\/button>\n<\/article>\n<article\n  class=\"photo-item photo-item--overlay\"\n  >\n  <a class=\"js-photo-link\" href=\"/photo/adult-adventure-couple-dirty-349493/\">\n\n    <img srcset=\"https://images.pexels.com/photos/349493/pexels-photo-349493.jpeg?auto=compress&amp;cs=tinysrgb&amp;h=350 1x, https://images.pexels.com/photos/349493/pexels-photo-349493.jpeg?auto=compress&amp;cs=tinysrgb&amp;dpr=2&amp;h=350 2x\" width=\"233\" height=\"350\" style=\"background:rgb(82,86,99)\" class=\"photo-item__img\" alt=\"Free stock photo of wood, landscape, nature, couple\" data-big-src=\"https://images.pexels.com/photos/349493/pexels-photo-349493.jpeg?auto=compress&amp;cs=tinysrgb&amp;h=750&amp;w=1260\" data-large-src=\"https://images.pexels.com/photos/349493/pexels-photo-349493.jpeg?auto=compress&amp;cs=tinysrgb&amp;h=650&amp;w=940\" data-pin-media=\"https://images.pexels.com/photos/349493/pexels-photo-349493.jpeg?auto=compress&amp;cs=tinysrgb&amp;fit=crop&amp;h=1200&amp;w=800\" src=\"https://images.pexels.com/photos/349493/pexels-photo-349493.jpeg?auto=compress&amp;cs=tinysrgb&amp;h=350\" />\n<\/a>    <a href=\"/@freestocks\" class=\"photo-item__photographer\">\n      <img class=\"photo-item__avatar\" height=\"30\" width=\"30\" src=\"https://images.pexels.com/users/avatars/592/pawel-malinowski-908.jpeg?w=60&amp;h=60&amp;fit=crop&amp;crop=faces\" alt=\"Pawel malinowski 908\" />\n      <span class=\"photo-item__name\">freestocks.org<\/span>\n    <\/a>\n  <a href=\"https://images.pexels.com/photos/349493/pexels-photo-349493.jpeg?cs=srgb&amp;dl=wood-landscape-nature-349493.jpg&amp;fm=jpg\" download><\/a>\n  <button class=\"js-like js-like-349493 btn-like btn-like--small photo-item__info\" data-photo-id=\"349493\">\n    <svg viewBox=\"0 0 100 100\" class=\"icon-heart\"><use xlink:href=\"#iconHeart\"><\/use><\/svg>\n  <\/button>\n  <button class=\"js-collect js-collect-349493 btn-like btn-like--small btn-like--collect photo-item__info\" data-photo-id=\"349493\">\n    <svg viewBox=\"0 0 30 30\" class=\"icon-plus\"><use xlink:href=\"#iconPlus\"><\/use><\/svg>\n  <\/button>\n<\/article>\n<article\n  class=\"photo-item photo-item--overlay\"\n  >\n  <a class=\"js-photo-link\" title=\"Basketball Hoop on Court\" href=\"/photo/basketball-hoop-on-court-680074/\">\n\n    <img srcset=\"https://images.pexels.com/photos/680074/pexels-photo-680074.jpeg?auto=compress&amp;cs=tinysrgb&amp;h=350 1x, https://images.pexels.com/photos/680074/pexels-photo-680074.jpeg?auto=compress&amp;cs=tinysrgb&amp;dpr=2&amp;h=350 2x\" width=\"525\" height=\"350\" style=\"background:rgb(129,99,82)\" class=\"photo-item__img\" alt=\"Basketball Hoop on Court\" data-big-src=\"https://images.pexels.com/photos/680074/pexels-photo-680074.jpeg?auto=compress&amp;cs=tinysrgb&amp;h=750&amp;w=1260\" data-large-src=\"https://images.pexels.com/photos/680074/pexels-photo-680074.jpeg?auto=compress&amp;cs=tinysrgb&amp;h=650&amp;w=940\" data-pin-media=\"https://images.pexels.com/photos/680074/pexels-photo-680074.jpeg?auto=compress&amp;cs=tinysrgb&amp;fit=crop&amp;h=1200&amp;w=800\" src=\"https://images.pexels.com/photos/680074/pexels-photo-680074.jpeg?auto=compress&amp;cs=tinysrgb&amp;h=350\" />\n<\/a>    <a href=\"/@daniel-absi-122864\" class=\"photo-item__photographer\">\n      <img class=\"photo-item__avatar\" height=\"30\" width=\"30\" src=\"https://images.pexels.com/users/avatars/122864/daniel-absi-273.png?w=60&amp;h=60&amp;fit=crop&amp;crop=faces\" alt=\"Daniel absi 273\" />\n      <span class=\"photo-item__name\">Daniel absi<\/span>\n    <\/a>\n  <a href=\"https://images.pexels.com/photos/680074/pexels-photo-680074.jpeg?cs=srgb&amp;dl=light-city-street-680074.jpg&amp;fm=jpg\" download><\/a>\n  <button class=\"js-like js-like-680074 btn-like btn-like--small photo-item__info\" data-photo-id=\"680074\">\n    <svg viewBox=\"0 0 100 100\" class=\"icon-heart\"><use xlink:href=\"#iconHeart\"><\/use><\/svg>\n  <\/button>\n  <button class=\"js-collect js-collect-680074 btn-like btn-like--small btn-like--collect photo-item__info\" data-photo-id=\"680074\">\n    <svg viewBox=\"0 0 30 30\" class=\"icon-plus\"><use xlink:href=\"#iconPlus\"><\/use><\/svg>\n  <\/button>\n<\/article>\n<article\n  class=\"photo-item photo-item--overlay\"\n  >\n  <a class=\"js-photo-link\" title=\"Man Jumping On Puddle Of Water\" href=\"/photo/man-jumping-on-puddle-of-water-250356/\">\n\n    <img srcset=\"https://images.pexels.com/photos/250356/pexels-photo-250356.jpeg?auto=compress&amp;cs=tinysrgb&amp;h=350 1x, https://images.pexels.com/photos/250356/pexels-photo-250356.jpeg?auto=compress&amp;cs=tinysrgb&amp;dpr=2&amp;h=350 2x\" width=\"622\" height=\"350\" style=\"background:rgb(97,108,110)\" class=\"photo-item__img\" alt=\"Man Jumping On Puddle Of Water\" data-big-src=\"https://images.pexels.com/photos/250356/pexels-photo-250356.jpeg?auto=compress&amp;cs=tinysrgb&amp;h=750&amp;w=1260\" data-large-src=\"https://images.pexels.com/photos/250356/pexels-photo-250356.jpeg?auto=compress&amp;cs=tinysrgb&amp;h=650&amp;w=940\" data-pin-media=\"https://images.pexels.com/photos/250356/pexels-photo-250356.jpeg?auto=compress&amp;cs=tinysrgb&amp;fit=crop&amp;h=1200&amp;w=800\" src=\"https://images.pexels.com/photos/250356/pexels-photo-250356.jpeg?auto=compress&amp;cs=tinysrgb&amp;h=350\" />\n<\/a>    <a href=\"/@kaiquestr\" class=\"photo-item__photographer\">\n      <img class=\"photo-item__avatar\" height=\"30\" width=\"30\" src=\"https://images.pexels.com/users/avatars/4672/kaique-rocha-298.jpeg?w=60&amp;h=60&amp;fit=crop&amp;crop=faces\" alt=\"Kaique rocha 298\" />\n      <span class=\"photo-item__name\">Kaique Rocha<\/span>\n    <\/a>\n  <a href=\"https://images.pexels.com/photos/250356/pexels-photo-250356.jpeg?cs=srgb&amp;dl=city-road-person-250356.jpg&amp;fm=jpg\" download><\/a>\n  <button class=\"js-like js-like-250356 btn-like btn-like--small photo-item__info\" data-photo-id=\"250356\">\n    <svg viewBox=\"0 0 100 100\" class=\"icon-heart\"><use xlink:href=\"#iconHeart\"><\/use><\/svg>\n  <\/button>\n  <button class=\"js-collect js-collect-250356 btn-like btn-like--small btn-like--collect photo-item__info\" data-photo-id=\"250356\">\n    <svg viewBox=\"0 0 30 30\" class=\"icon-plus\"><use xlink:href=\"#iconPlus\"><\/use><\/svg>\n  <\/button>\n<\/article>\n<article\n  class=\"photo-item photo-item--overlay\"\n  >\n  <a class=\"js-photo-link\" title=\"Man Wearing Black Hat a Bow and a Sweat Shirt on a Backstage\" href=\"/photo/man-wearing-black-hat-a-bow-and-a-sweat-shirt-on-a-backstage-175696/\">\n\n    <img srcset=\"https://images.pexels.com/photos/175696/pexels-photo-175696.jpeg?auto=compress&amp;cs=tinysrgb&amp;h=350 1x, https://images.pexels.com/photos/175696/pexels-photo-175696.jpeg?auto=compress&amp;cs=tinysrgb&amp;dpr=2&amp;h=350 2x\" width=\"505\" height=\"350\" style=\"background:rgb(107,110,113)\" class=\"photo-item__img\" alt=\"Man Wearing Black Hat a Bow and a Sweat Shirt on a Backstage\" data-big-src=\"https://images.pexels.com/photos/175696/pexels-photo-175696.jpeg?auto=compress&amp;cs=tinysrgb&amp;h=750&amp;w=1260\" data-large-src=\"https://images.pexels.com/photos/175696/pexels-photo-175696.jpeg?auto=compress&amp;cs=tinysrgb&amp;h=650&amp;w=940\" data-pin-media=\"https://images.pexels.com/photos/175696/pexels-photo-175696.jpeg?auto=compress&amp;cs=tinysrgb&amp;fit=crop&amp;h=1200&amp;w=800\" src=\"https://images.pexels.com/photos/175696/pexels-photo-175696.jpeg?auto=compress&amp;cs=tinysrgb&amp;h=350\" />\n<\/a>    <a href=\"/@conojeghuo\" class=\"photo-item__photographer\">\n      <img class=\"photo-item__avatar\" height=\"30\" width=\"30\" src=\"https://images.pexels.com/users/avatars/47503/clem-onojeghuo-518.jpeg?w=60&amp;h=60&amp;fit=crop&amp;crop=faces\" alt=\"Clem onojeghuo 518\" />\n      <span class=\"photo-item__name\">Clem Onojeghuo<\/span>\n    <\/a>\n  <a href=\"https://images.pexels.com/photos/175696/pexels-photo-175696.jpeg?cs=srgb&amp;dl=fashion-man-person-175696.jpg&amp;fm=jpg\" download><\/a>\n  <button class=\"js-like js-like-175696 btn-like btn-like--small photo-item__info\" data-photo-id=\"175696\">\n    <svg viewBox=\"0 0 100 100\" class=\"icon-heart\"><use xlink:href=\"#iconHeart\"><\/use><\/svg>\n  <\/button>\n  <button class=\"js-collect js-collect-175696 btn-like btn-like--small btn-like--collect photo-item__info\" data-photo-id=\"175696\">\n    <svg viewBox=\"0 0 30 30\" class=\"icon-plus\"><use xlink:href=\"#iconPlus\"><\/use><\/svg>\n  <\/button>\n<\/article>\n<article\n  class=\"photo-item photo-item--overlay\"\n  >\n  <a class=\"js-photo-link\" title=\"Black Microphone\" href=\"/photo/black-microphone-64057/\">\n\n    <img srcset=\"https://images.pexels.com/photos/64057/pexels-photo-64057.jpeg?auto=compress&amp;cs=tinysrgb&amp;h=350 1x, https://images.pexels.com/photos/64057/pexels-photo-64057.jpeg?auto=compress&amp;cs=tinysrgb&amp;dpr=2&amp;h=350 2x\" width=\"525\" height=\"350\" style=\"background:rgb(142,106,85)\" class=\"photo-item__img\" alt=\"Black Microphone\" data-big-src=\"https://images.pexels.com/photos/64057/pexels-photo-64057.jpeg?auto=compress&amp;cs=tinysrgb&amp;h=750&amp;w=1260\" data-large-src=\"https://images.pexels.com/photos/64057/pexels-photo-64057.jpeg?auto=compress&amp;cs=tinysrgb&amp;h=650&amp;w=940\" data-pin-media=\"https://images.pexels.com/photos/64057/pexels-photo-64057.jpeg?auto=compress&amp;cs=tinysrgb&amp;fit=crop&amp;h=1200&amp;w=800\" src=\"https://images.pexels.com/photos/64057/pexels-photo-64057.jpeg?auto=compress&amp;cs=tinysrgb&amp;h=350\" />\n<\/a>    <a href=\"/@freestocks\" class=\"photo-item__photographer\">\n      <img class=\"photo-item__avatar\" height=\"30\" width=\"30\" src=\"https://images.pexels.com/users/avatars/592/pawel-malinowski-908.jpeg?w=60&amp;h=60&amp;fit=crop&amp;crop=faces\" alt=\"Pawel malinowski 908\" />\n      <span class=\"photo-item__name\">freestocks.org<\/span>\n    <\/a>\n  <a href=\"https://images.pexels.com/photos/64057/pexels-photo-64057.jpeg?cs=srgb&amp;dl=talk-microphone-speech-64057.jpg&amp;fm=jpg\" download><\/a>\n  <button class=\"js-like js-like-64057 btn-like btn-like--small photo-item__info\" data-photo-id=\"64057\">\n    <svg viewBox=\"0 0 100 100\" class=\"icon-heart\"><use xlink:href=\"#iconHeart\"><\/use><\/svg>\n  <\/button>\n  <button class=\"js-collect js-collect-64057 btn-like btn-like--small btn-like--collect photo-item__info\" data-photo-id=\"64057\">\n    <svg viewBox=\"0 0 30 30\" class=\"icon-plus\"><use xlink:href=\"#iconPlus\"><\/use><\/svg>\n  <\/button>\n<\/article>\n<article\n  class=\"photo-item photo-item--overlay\"\n  >\n  <a class=\"js-photo-link\" title=\"Photo from Concrete Structures\" href=\"/photo/photo-from-concrete-structures-920024/\">\n\n    <img srcset=\"https://images.pexels.com/photos/920024/pexels-photo-920024.jpeg?auto=compress&amp;cs=tinysrgb&amp;h=350 1x, https://images.pexels.com/photos/920024/pexels-photo-920024.jpeg?auto=compress&amp;cs=tinysrgb&amp;dpr=2&amp;h=350 2x\" width=\"525\" height=\"350\" style=\"background:rgb(113,115,117)\" class=\"photo-item__img\" alt=\"Photo from Concrete Structures\" data-big-src=\"https://images.pexels.com/photos/920024/pexels-photo-920024.jpeg?auto=compress&amp;cs=tinysrgb&amp;h=750&amp;w=1260\" data-large-src=\"https://images.pexels.com/photos/920024/pexels-photo-920024.jpeg?auto=compress&amp;cs=tinysrgb&amp;h=650&amp;w=940\" data-pin-media=\"https://images.pexels.com/photos/920024/pexels-photo-920024.jpeg?auto=compress&amp;cs=tinysrgb&amp;fit=crop&amp;h=1200&amp;w=800\" src=\"https://images.pexels.com/photos/920024/pexels-photo-920024.jpeg?auto=compress&amp;cs=tinysrgb&amp;h=350\" />\n<\/a>    <a href=\"/@kevinmenajang\" class=\"photo-item__photographer\">\n      <img class=\"photo-item__avatar\" height=\"30\" width=\"30\" src=\"https://images.pexels.com/users/avatars/324989/kevin-menajang-679.jpeg?w=60&amp;h=60&amp;fit=crop&amp;crop=faces\" alt=\"Kevin menajang 679\" />\n      <span class=\"photo-item__name\">Kevin Menajang<\/span>\n    <\/a>\n  <a href=\"https://images.pexels.com/photos/920024/pexels-photo-920024.jpeg?cs=srgb&amp;dl=light-building-wall-920024.jpg&amp;fm=jpg\" download><\/a>\n  <button class=\"js-like js-like-920024 btn-like btn-like--small photo-item__info\" data-photo-id=\"920024\">\n    <svg viewBox=\"0 0 100 100\" class=\"icon-heart\"><use xlink:href=\"#iconHeart\"><\/use><\/svg>\n  <\/button>\n  <button class=\"js-collect js-collect-920024 btn-like btn-like--small btn-like--collect photo-item__info\" data-photo-id=\"920024\">\n    <svg viewBox=\"0 0 30 30\" class=\"icon-plus\"><use xlink:href=\"#iconPlus\"><\/use><\/svg>\n  <\/button>\n<\/article>\n<article\n  class=\"photo-item photo-item--overlay\"\n  >\n  <a class=\"js-photo-link\" title=\"Silhouette Photography of Person Standing on Green Grass in Front of Mountains during Golden Hour\" href=\"/photo/silhouette-photography-of-person-standing-on-green-grass-in-front-of-mountains-during-golden-hour-746386/\">\n\n    <img srcset=\"https://images.pexels.com/photos/746386/pexels-photo-746386.jpeg?auto=compress&amp;cs=tinysrgb&amp;h=350 1x, https://images.pexels.com/photos/746386/pexels-photo-746386.jpeg?auto=compress&amp;cs=tinysrgb&amp;dpr=2&amp;h=350 2x\" width=\"592\" height=\"350\" style=\"background:rgb(129,120,105)\" class=\"photo-item__img\" alt=\"Silhouette Photography of Person Standing on Green Grass in Front of Mountains during Golden Hour\" data-big-src=\"https://images.pexels.com/photos/746386/pexels-photo-746386.jpeg?auto=compress&amp;cs=tinysrgb&amp;h=750&amp;w=1260\" data-large-src=\"https://images.pexels.com/photos/746386/pexels-photo-746386.jpeg?auto=compress&amp;cs=tinysrgb&amp;h=650&amp;w=940\" data-pin-media=\"https://images.pexels.com/photos/746386/pexels-photo-746386.jpeg?auto=compress&amp;cs=tinysrgb&amp;fit=crop&amp;h=1200&amp;w=800\" src=\"https://images.pexels.com/photos/746386/pexels-photo-746386.jpeg?auto=compress&amp;cs=tinysrgb&amp;h=350\" />\n<\/a>    <a href=\"/@simonmigaj\" class=\"photo-item__photographer\">\n      <img class=\"photo-item__avatar\" height=\"30\" width=\"30\" src=\"https://images.pexels.com/users/avatars/233851/simon-migaj-572.jpeg?w=60&amp;h=60&amp;fit=crop&amp;crop=faces\" alt=\"Simon migaj 572\" />\n      <span class=\"photo-item__name\">Simon Migaj<\/span>\n    <\/a>\n  <a href=\"https://images.pexels.com/photos/746386/pexels-photo-746386.jpeg?cs=srgb&amp;dl=dawn-landscape-mountains-746386.jpg&amp;fm=jpg\" download><\/a>\n  <button class=\"js-like js-like-746386 btn-like btn-like--small photo-item__info\" data-photo-id=\"746386\">\n    <svg viewBox=\"0 0 100 100\" class=\"icon-heart\"><use xlink:href=\"#iconHeart\"><\/use><\/svg>\n  <\/button>\n  <button class=\"js-collect js-collect-746386 btn-like btn-like--small btn-like--collect photo-item__info\" data-photo-id=\"746386\">\n    <svg viewBox=\"0 0 30 30\" class=\"icon-plus\"><use xlink:href=\"#iconPlus\"><\/use><\/svg>\n  <\/button>\n<\/article>\n<article\n  class=\"photo-item photo-item--overlay\"\n  >\n  <a class=\"js-photo-link\" title=\"\" href=\"/photo/woman-eyes-eye-beauty-110321/\">\n\n    <img srcset=\"https://images.pexels.com/photos/110321/pexels-photo-110321.jpeg?auto=compress&amp;cs=tinysrgb&amp;h=350 1x, https://images.pexels.com/photos/110321/pexels-photo-110321.jpeg?auto=compress&amp;cs=tinysrgb&amp;dpr=2&amp;h=350 2x\" width=\"586\" height=\"350\" style=\"background:rgb(116,119,124)\" class=\"photo-item__img\" alt=\"Free stock photo of woman, eye, see, close-up\" data-big-src=\"https://images.pexels.com/photos/110321/pexels-photo-110321.jpeg?auto=compress&amp;cs=tinysrgb&amp;h=750&amp;w=1260\" data-large-src=\"https://images.pexels.com/photos/110321/pexels-photo-110321.jpeg?auto=compress&amp;cs=tinysrgb&amp;h=650&amp;w=940\" data-pin-media=\"https://images.pexels.com/photos/110321/pexels-photo-110321.jpeg?auto=compress&amp;cs=tinysrgb&amp;fit=crop&amp;h=1200&amp;w=800\" src=\"https://images.pexels.com/photos/110321/pexels-photo-110321.jpeg?auto=compress&amp;cs=tinysrgb&amp;h=350\" />\n<\/a>    <a href=\"/@fotios-photos\" class=\"photo-item__photographer\">\n      <img class=\"photo-item__avatar\" height=\"30\" width=\"30\" src=\"https://images.pexels.com/users/avatars/26735/lisa-fotios-879.jpeg?w=60&amp;h=60&amp;fit=crop&amp;crop=faces\" alt=\"Lisa fotios 879\" />\n      <span class=\"photo-item__name\">Lisa Fotios<\/span>\n    <\/a>\n  <a href=\"https://images.pexels.com/photos/110321/pexels-photo-110321.jpeg?cs=srgb&amp;dl=woman-eye-see-110321.jpg&amp;fm=jpg\" download><\/a>\n  <button class=\"js-like js-like-110321 btn-like btn-like--small photo-item__info\" data-photo-id=\"110321\">\n    <svg viewBox=\"0 0 100 100\" class=\"icon-heart\"><use xlink:href=\"#iconHeart\"><\/use><\/svg>\n  <\/button>\n  <button class=\"js-collect js-collect-110321 btn-like btn-like--small btn-like--collect photo-item__info\" data-photo-id=\"110321\">\n    <svg viewBox=\"0 0 30 30\" class=\"icon-plus\"><use xlink:href=\"#iconPlus\"><\/use><\/svg>\n  <\/button>\n<\/article>\n<article\n  class=\"photo-item photo-item--overlay\"\n  >\n  <a class=\"js-photo-link\" title=\"Two Girls Using Iphone\" href=\"/photo/two-girls-using-iphone-669005/\">\n\n    <img srcset=\"https://images.pexels.com/photos/669005/pexels-photo-669005.jpeg?auto=compress&amp;cs=tinysrgb&amp;h=350 1x, https://images.pexels.com/photos/669005/pexels-photo-669005.jpeg?auto=compress&amp;cs=tinysrgb&amp;dpr=2&amp;h=350 2x\" width=\"257\" height=\"350\" style=\"background:rgb(139,122,101)\" class=\"photo-item__img\" alt=\"Two Girls Using Iphone\" data-big-src=\"https://images.pexels.com/photos/669005/pexels-photo-669005.jpeg?auto=compress&amp;cs=tinysrgb&amp;h=750&amp;w=1260\" data-large-src=\"https://images.pexels.com/photos/669005/pexels-photo-669005.jpeg?auto=compress&amp;cs=tinysrgb&amp;h=650&amp;w=940\" data-pin-media=\"https://images.pexels.com/photos/669005/pexels-photo-669005.jpeg?auto=compress&amp;cs=tinysrgb&amp;fit=crop&amp;h=1200&amp;w=800\" src=\"https://images.pexels.com/photos/669005/pexels-photo-669005.jpeg?auto=compress&amp;cs=tinysrgb&amp;h=350\" />\n<\/a>    <a href=\"/@rawpixel\" class=\"photo-item__photographer\">\n      <img class=\"photo-item__avatar\" height=\"30\" width=\"30\" src=\"https://images.pexels.com/users/avatars/91955/rawpixel-com-856.png?w=60&amp;h=60&amp;fit=crop&amp;crop=faces\" alt=\"Rawpixel com 856\" />\n      <span class=\"photo-item__name\">rawpixel.com<\/span>\n    <\/a>\n  <a href=\"https://images.pexels.com/photos/669005/pexels-photo-669005.jpeg?cs=srgb&amp;dl=fashion-vacation-love-669005.jpg&amp;fm=jpg\" download><\/a>\n  <button class=\"js-like js-like-669005 btn-like btn-like--small photo-item__info\" data-photo-id=\"669005\">\n    <svg viewBox=\"0 0 100 100\" class=\"icon-heart\"><use xlink:href=\"#iconHeart\"><\/use><\/svg>\n  <\/button>\n  <button class=\"js-collect js-collect-669005 btn-like btn-like--small btn-like--collect photo-item__info\" data-photo-id=\"669005\">\n    <svg viewBox=\"0 0 30 30\" class=\"icon-plus\"><use xlink:href=\"#iconPlus\"><\/use><\/svg>\n  <\/button>\n<\/article>\n\n\n');options='appended'
rowGrid(container,options);UTIL.triggerEvent('new-photos');document.querySelector('.js-pagination').innerHTML='<div class=\"pagination\"><a class=\"previous_page\" rel=\"prev\" href=\"/?dark=false&amp;format=js&amp;page=22&amp;seed=2018-05-15+01%3A36%3A22++0000\">&#8592; Previous<\/a> <a href=\"/?dark=false&amp;format=js&amp;page=1&amp;seed=2018-05-15+01%3A36%3A22++0000\">1<\/a> <a href=\"/?dark=false&amp;format=js&amp;page=2&amp;seed=2018-05-15+01%3A36%3A22++0000\">2<\/a> <span class=\"gap\">&hellip;<\/span> <a href=\"/?dark=false&amp;format=js&amp;page=19&amp;seed=2018-05-15+01%3A36%3A22++0000\">19<\/a> <a href=\"/?dark=false&amp;format=js&amp;page=20&amp;seed=2018-05-15+01%3A36%3A22++0000\">20<\/a> <a href=\"/?dark=false&amp;format=js&amp;page=21&amp;seed=2018-05-15+01%3A36%3A22++0000\">21<\/a> <a rel=\"prev\" href=\"/?dark=false&amp;format=js&amp;page=22&amp;seed=2018-05-15+01%3A36%3A22++0000\">22<\/a> <em class=\"current\">23<\/em> <a rel=\"next\" href=\"/?dark=false&amp;format=js&amp;page=24&amp;seed=2018-05-15+01%3A36%3A22++0000\">24<\/a> <a href=\"/?dark=false&amp;format=js&amp;page=25&amp;seed=2018-05-15+01%3A36%3A22++0000\">25<\/a> <a href=\"/?dark=false&amp;format=js&amp;page=26&amp;seed=2018-05-15+01%3A36%3A22++0000\">26<\/a> <a href=\"/?dark=false&amp;format=js&amp;page=27&amp;seed=2018-05-15+01%3A36%3A22++0000\">27<\/a> <span class=\"gap\">&hellip;<\/span> <a href=\"/?dark=false&amp;format=js&amp;page=99&amp;seed=2018-05-15+01%3A36%3A22++0000\">99<\/a> <a href=\"/?dark=false&amp;format=js&amp;page=100&amp;seed=2018-05-15+01%3A36%3A22++0000\">100<\/a> <a class=\"next_page\" rel=\"next\" href=\"/?dark=false&amp;format=js&amp;page=24&amp;seed=2018-05-15+01%3A36%3A22++0000\">Next &#8594;<\/a><\/div>';

Answer 4

那个网站也没有加载完毕。
它用的是惰性加载。
就是你没有看到的图片其实并没有加载，你滚动到那里或者快到那里的时候才加载。

看得到的地方，也可以先加载压缩后的图片，然后再加载高清图片，加载完成后替换掉模糊的图片。

Answer 5

首先呢，你给的网站他并不是一下子把图片加载完的，它是滚动的时候加载的，边滚动边加载，不行你可以打开network看看。所以你可以参考它的做法，并不需要一下子将图片加载完毕，按需加载。

Answer 6

lazyload

Answer 7

网站不错。。

Answer 8

压缩图片啊，首页的图片不用加载大图。

Answer 9

https://www.nginx.com/blog/re...
推荐使用nginx Image‑Filter module，performance不错哦！

Answer 10

1.压缩图片
2.CDN
3.设置cache，优先从memory/disk的cache加载图片。

Answer 11

图片3-4m 这本身就是问题