前阵子 ,我决定,我想从我的中型出版的文章的很好的视觉房源出现在我的网站的底部。 方便地,我需要完成的大多数信息都存在于出版物的feed中。
对于许多中型出版物,可以按以下方式查找供稿:
对于像Hackernoon这样的其他人,它更像是这样:
在PHP方面,只需执行file_get_contents(),然后解析出要显示的信息,这是一个非常简单的问题。 在我的网站上,它都经过CSS很好的修饰,看起来像这样:
我以为一切都很好(从技术上讲也是这样),直到我碰巧在自己的网站上运行了一些速度测试(在GTmetric.com上运行了很多有用的测试)。 原来建议我压缩图像。
嗯……当我无法控制这些图像时,如何压缩这些图像以提高页面加载速度?
然后,我注意到图像来自Medium的CDN,其URL如下所示:
有趣吗? 在这种情况下,正在加载的图片位于:
…或以视觉方式显示:

不过,该图片地址中有趣的部分是“ 1024”,因为它很清楚地表示了图片的像素宽度(尽管上面显示的图片已由“中”自动调整大小以适合此处)。
一时兴起,我想:“嗯,如果我尝试相同的URL,仅将1024更改为其他(较小)尺寸会怎样? 那可能可行吗??”
令人惊讶的是……是的! 看起来它基本上可以接受任何维度(尽管我只是尝试了合理的维度……不知道如果在其中放置“ 1000000000”会发生什么,或者有些疯狂的事情-希望不会炸毁互联网!)。
因此,显然有某种机制可以通过Medium和/或其CDN来根据图像地址中的值调整图像大小并存储图像。
含义/效用
对于那些对构建可视提要(如所示的提要)感兴趣的人来说,这意味着您可以准确地要求您的情况所需的尺寸图像。 这很酷,因为对于上面的图片,默认的1024px图片为208k。 当我将其更改为所需的确切大小(336px宽)时,该图像减少到30k。
Ergo,对我来说,这意味着我每张图片节省了约17.8万,并且我在页面上加载了9,每页加载超过了1.6Mb的节省。 不错!
Jim Dee 在俄勒冈州波特兰市 领导 Array Web Development,LLC 。 他是《 网页设计师 》的编辑。 Web Developer 》杂志和许多在线出版物的撰稿人。 您可以通过ArrayWebDevelopment.com与Jim取得联系。 上面的照片改编自 佐治亚·雷丁 ( Georgia Reading)的 《 乌龟壳8 》 (Flickr,知识共享)。 如果喜欢(请单击下面的掌声图标), 请阅读本文,因为它可以帮助其他人看到它。