Блог

Главная - Вопросы по программированию - лучшая практика генерации миниатюр?

лучшая практика генерации миниатюр?

#php #image #resize-image #phpthumb

#php #изображение #изменение размера изображения #phpthumb

Вопрос:

Я создаю социальную сеть, в которой пользователи загружают изображение своего профиля.

Это изображение будет использоваться на странице их профиля размером 150/150 пикселей.

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

Что было бы лучшей практикой для этого

  1. Изменение размера изображения на лету (timthumb).
  2. Измените размер и сохраните изображение на сервере.

Комментарии:

1. Измените размер и сохраните изображение на сервере, уменьшите накладные расходы

2. итак, мне нужно больше инвестировать в серверное пространство….

3. пространство на сервере будет иметь важное значение, для быстрого реагирования рассмотрите возможность использования cdn

4. Обычно пространство стоит меньше, чем процессор.

Ответ №1:

При загрузке фотографии создайте необходимый набор эскизов и сохраните как [имя_изображения]thumb[имя_размера].jpg или около того:

 uploaded: file.jpg
medium: file_thumb_150x150.jpg
small: file_thumb_75x75.jpg

Соглашение об именовании зависит от вас, но таким быстрым способом вы получаете легкий доступ к необходимым вам данным. Нет необходимости использовать сервер для генерации на лету или масштабирования в браузере.

Комментарии:

1. Также у вас мог бы быть только один большой палец — например, только 150 пикселей, и уменьшите его до 75 пикселей с помощью простого CSS. Браузеры могли бы сделать это легко.

2. Да, но это было бы накладно на пропускную способность. 150×150 — это изображение в 4 раза больше, чем 75×75. Если бы ваше утверждение было правдой, мы могли бы использовать исходное изображение и не генерировать миниатюр [при условии, что соотношение ширины и высоты приемлемо]

3. @Tomasz, мы также не t know is this a bad or good way, as in different situations we can have unlimited bandwidth. Another option, that you offer, just live original is too extreme. For example, I took your avatar, and resize it to 150 and then to 75 px. It используем не в 4 раза больше, а только в 2 раза 🙂 поскольку 150/75 будет равно 2. Также по размерам файлов (я сделал с помощью простого ms office resizer): 8,40 КБ (8 603 байта) против 3,67 КБ (3 765 байт), всего 2,28 соотношение.

4. Итак, если вы должны подумать о пропускной способности, то 2 изображения, но если о дисковом пространстве сверх пропускной способности — тогда только 1.

5. @gaRex: Это 4x, потому что это 2D, а не 1D. 150×150 = 22500, 75×75 = 5625, соотношение = 4. Что касается размера файла, я согласен, это не такой прямой способ.

Ответ №2:

Я некоторое время работал над этой проблемой и наткнулся на 3 основных способа сделать это:

  1. Создавайте эскизы изображений в момент загрузки в качестве фонового процесса.
  2. Генерируйте изображения по запросу через основное приложение
  3. Генерируйте изображения по запросу, используя URL в качестве API

У каждого подхода есть свои плюсы и минусы.

  1. Этот подход является наиболее ограничительным, вы должны заранее знать все виды использования и размеры эскизов, чтобы вы могли сгенерировать их сразу после загрузки. Главное преимущество заключается в том, что изображения могут эффективно обслуживаться с помощью сервера, подобного nginx, и ничем не отличаются от любых других статических ресурсов.
  2. В Django есть библиотека под названием sorl-thumbnail, которая предоставляет тег шаблона для создания эскизов всех видов по мере необходимости. Он использует быстрое хранилище ключей / значений для отслеживания того, какие эскизы были сгенерированы, и автоматически аннулирует устаревшие сгенерированные изображения, если обнаруживает, что исходное изображение было изменено. Затем тег шаблона возвращает URL для сгенерированного изображения, которое может быть отправлено непосредственно из nginx без прохождения уровня сценариев. Более гибкий, чем 1, но вы не можете (например) сгенерировать URL изображения с помощью JavaScript и ожидать, что он существует, это должно быть сделано с помощью внутреннего кода веб-сайта или шаблонов.
  3. Полностью динамичный и гибкий, вы можете получить любую версию изображения, которую хотите, просто изменив URL, Amazon использует этот метод, как и все сайты по созданию изображений-заполнителей. Может генерировать URL-адреса в JavaScript и делать все, что угодно. Сам веб-сайт не нуждается в каких-либо знаниях о слое создания эскизов, за исключением, возможно, нескольких вспомогательных методов для генерации URL-адресов для вас. НО, очевидно, что это самый ресурсоемкий способ выполнения задач, и вам нужно убедиться, что ваша архитектура может справиться с нагрузкой. Вам нужно использовать все приемы из книги, чтобы своевременно аннулировать кеши, избежать ненужных обращений к скрипту изменения размера и т.д.

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

Комментарии:

1. я был на пути к завершению моего приложения. я не могу изменить свой фреймворк.

Ответ №3:

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

Ответ №4:

Если пространство на сервере и пропускная способность являются проблемой, вам следует рассмотреть возможность использования cdn.

У Amazon хороший сервис,