Некоторое время назад я решил, что хочу, чтобы внизу моего веб-сайта был красивый визуальный список статей моей публикации на Medium. Удобно, что большая часть информации, которая мне нужна для этого, содержалась в ленте моей публикации.
Для многих публикаций Medium фид можно найти так:
https://medium.com/feed/[your publication alias]/
Для других, таких как Hackernoon, это больше похоже на следующее:
https://hackernoon.com/feed
С точки зрения PHP это довольно простой вопрос - просто выполнить file_get_contents (), а затем проанализировать информацию для отображения. На моем сайте это выглядит примерно так, после того, как все красиво оформлено на CSS:
Я думал, что все в порядке (технически так и было), пока мне не довелось запустить несколько тестов скорости на своем сайте (на GTmetric.com, где выполняется множество полезных тестов). Оказывается, мне рекомендовали сжать мои изображения.
Хм ... как я могу сжать эти изображения для более быстрой загрузки страниц, если я не могу их контролировать?
Затем я заметил, что изображения поступают из CDN Medium с таким URL-адресом:
Интересно, а? В этом случае загружаемое изображение находится по адресу:
https://cdn-images-1.medium.com/max/1024/1*6LjCRY5BJ9YK3xDmszW69Q.jpeg
… Или, чтобы показать это визуально:
Однако интересной частью этого адреса изображения является «1024», поскольку он довольно четко представляет ширину в пикселях изображения (хотя тот, который показан выше, был автоматически изменен Medium, чтобы соответствовать этому).
По прихоти я подумал: «Хм, а что, если я попробую тот же URL, только я изменю 1024 на какое-то другое (меньшее) измерение? Может ли это сработать ??? "
Удивительно… да! Похоже, он в принципе может принимать любое измерение (хотя я пробовал только разумные ... не уверен, что произойдет, если вы поместите туда «1000000000» или что-то безумное - надеюсь, это не взорвет Интернет!).
Итак, очевидно, существует какой-то механизм через Medium и / или его CDN, который изменяет размер и сохраняет изображения на основе этого значения в адресе для изображений.
Последствия / Полезность
Для тех, кто заинтересован в создании визуальных каналов, подобных показанному, это означает, что вы можете запросить точно размер изображения, необходимый для вашей ситуации. И это довольно круто, потому что на картинке выше по умолчанию 1024 пикселя составляет 208 КБ. Когда я изменил его до нужного мне размера (ширина 336 пикселей), изображение уменьшилось до 30 КБ.
Следовательно, для меня это означало, что я экономлю где-то около 178 КБ на картинку и загружаю 9 на свою страницу, что дает экономию более 1,6 МБ на загрузку страницы. Неплохо!
✍🏻 Джим Ди ведет свой личный блог Хоторн Кроу и блог веб-дизайна Веб-дизайнер | Журнал веб-разработчиков . Он также участвует в различных публикациях Medium.com. Найдите его на JPDbooks.com, на его странице авторов Amazon, Facebook, Twitter, Instagram, LinkedIn, Medium или по электронной почте на сайте Jim [at] ArrayWebDevelopment.com. Его последний роман CHROO доступен на Amazon.com. Если вам нравятся юмористические литературные сказки, возьмите копию!
