Динамическое изменение размера изображения в облаке для адаптивного веб-сайта

Question

У меня есть адаптивный (RWD) веб-сайт, который нормально работает на мобильных устройствах. Моя проблема в том, что на смартфонах картинки "тяжелые" и бесполезно большие на старых телефонах. Я знаю, что существует множество инструментов, работающих как в автономном, так и в онлайн-режиме (например, http://www.resizeyourimage.com/) для изменения размера изображений, и я знаю, что могу создать свой собственный инструмент для изменения размера изображений с помощью GD и т. П. (Здесь PHP), но Мне было интересно, знает ли кто-нибудь здесь о способе автоматического изменения размера изображений. Например, передав их через прокси-сервер, например:

http: // cloudservice / w_320 / http: //myserver/mypic.jpg "/>

Бесплатный сервис очень предпочтителен.

Таким образом, мне не нужно было бы модифицировать старые изображения, и при этом нет необходимости предоставлять несколько версий одного и того же изображения.

Я надеюсь, что мой вопрос имеет смысл...

Answer 1

Вы должны проверить WURFL Image Tailor. Работает в значительной степени, как вы описываете. Вы передаете изображения через прокси, как это:

    <img src="//wit.wurfl.io/[full-url-to-your-image]">

Затем прокси определит размер экрана пользовательского агента и соответствующим образом изменит размер изображения. Этот сервис также принимает некоторые аргументы, которые позволяют явно установить высоту, ширину и процент от размера экрана.

Answer 2

Есть много таких услуг, и подобный вопрос был задан ранее.

Все надежные решения также потребуют немного JavaScript-кода на стороне клиента. Куки-файлы не работают при первой загрузке страницы (а это большинство из них), и сниффинг дает бесполезные данные, если вы выполняете RWD с точками останова. За исключением slimmage (и решений с тегами

Я предпочитаю DRY & CSS-friendly Slimmage.js, как его автора, но есть также Picturefill для тех, кто хочет поддержки художественного направления (и готов справиться с возникающей сложностью разметки). Оба могут использоваться с любым RIAPI-совместимым модулем на стороне сервера, таким как ImageResizer (здесь также применяется отказ от авторства).

Если у вас есть доступ к серверу Windows (или Linux/ Mono), рассмотрите возможность самостоятельного размещения.

Продукты SaaS с динамическим отображением появляются и выходят из строя на регулярной основе, поэтому создайте план резервного копирования для замены URL-адресов, если ваш SaaS не соответствует RIAPI. Если ваш HTML не динамический или не может быть постобработан, вы будете... веселыми.

---

Несколько услуг (бесплатно или в бета-версии):

• CDNConnect (RIAPI-совместимая служба третьего уровня на основе ImageResizer)
• BoxResizer (бесплатно, но работоспособность не гарантируется)
• Sqish
• Resizor

Некоторые несвободные (и не соответствующие) услуги

• http://www.resrc.it/pricing/us
• https://responsive.io/plans
• https://www.maikoapp.com/
• http://www.thumbr.io/plans_and_prices

Answer 3

Один из сервисов изменения размера изображений, который вы можете использовать, - https://gumlet.com/. Вы можете использовать любой источник изображения и изменять его размер в соответствии с вашими потребностями.

Например, чтобы получить ширину изображения 300 пикселей, вы можете написать

https://subdomain.gumlet.com/image.jpg?width=300

PS Я работаю на Gumlet.