Каков наилучший способ создания эскиза из существующего изображения

Question

У меня есть столбец изображений в базе данных, содержащий пути к изображениям в моей таблице сообщений, я использую этот столбец в двух разных местах, один для одной страницы сообщения шириной 800 пикселей и высотой 400 пикселей, на странице моего блога. Я хочу использовать эти изображения, но на этот раз с различной шириной и высотой (миниатюры для сообщений) .. У меня есть два варианта, и я не уверен, какой из них лучше! Первым я вызываю функцию с путем изображения, шириной и высотой, поэтому она возвращает оптимизированную версию, и, если честно, я не пытался это сделать, и я не знаю, что происходит за кулисами, я думаю, что это создание миниатюрной версии на сервере?

<img src="{{ resizeImage( url('images/posts/' . $post->image) ), '400', '250') }}" />

Второй - когда я загружаю изображение поста, я сделал вторую версию для миниатюр и назову его, например, THUMBNAIL_1562572708.jpg.

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

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

Answer 1

Ответы на этот вопрос могут быть очень самоуверенными, но вот мои два цента.

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

• Миниатюры должны быть сгенерированы только один раз (генерация миниатюр на основе запроса вызывает большую нагрузку и потенциальную проблему производительности)
• Хранение дешево и быстро

Идентификация thumnails может быть выполнена путем сохранения имени файла миниатюры или, как вы уже предложили, с помощью некоторой логики для разрешения миниатюр на основе исходного файла. Лично я хотел бы использовать структуру папок, которая позволяет создавать различные эскизы, например ::

.

 images/
    original/
       123456789.jpg
    thumbnail/
       100x100/
          123456789.jpg
       200x200/
          123456789.jpg

Имена каталогов 100x100 и 200x200, конечно, могут быть изменены на то, что вам подходит. Использование предложенных вариантов означало бы для меня, что миниатюра не шире, чем 100 пикселей, и не выше, чем 100 пикселей. Это не означает, что каждая миниатюра имеет размер 100x100 пикселей, хотя вы также можете реализовать такой генератор миниатюр, если вам нужно.

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

---

Кстати, если вы внедрите генератор миниатюр, вы также можете рассмотреть возможность использования оптимизатора изображений. Большинство изображений можно минимизировать, чтобы пользователи не заметили (существенную) разницу. Стоит ли такая система или нет, зависит от количества отображаемых изображений и объема трафика на вашем сайте. Для интенсивно используемых сайтов это может быть хорошей идеей для экономии трафика. Существующее решение для этого - spatie / image-optimizer (я никак не связан с spatie).