0

Сразу прошу прощения если такие вопросы уже задавались. Мне нужен попытаться узнать конкретно как и что.

Вопрос вытек из проблемы, проблема заключается в том что у меня на сайте есть товары и к ним картинки. Картинки разного размера, и отображаться должны не в одинаковом размере. И я сделал вывод картинок но сайт жутко лагает. Загружается быстро - 2 секунды, (возможно медленно так как нет хостинга) но после загрузки товаров с картинками сайт лагает.

Картинки храню вот так (возможно неправильно):

../../img_product/{id_product}/{много картинок}.jpeg

И вывожу некоторые товары по ajax запросом. Получаю массив товаров, в каждом из них есть массив картинок. После с помощи js вывожу товары, и с помощи тега <img src='../../img_product/{id_product}/{много картинок}.jpeg'> - вывожу картинку. Вообще я не уверен правильно я делаю выводя товары массивом с помощи ajax, а так-же более не уверен в выводе картинок. (Картинки нахожу соответствующему товару с помощи php)

Посмотрел на торговые площадки и магазины. И картинки у них сжаты. Почитал про это. Но я одно не могу понять, как мне сжимать картинку и так-же выводить в <img src>? Получается сжатые картинки где то должны хранится. Можно решить проблему например перед загрузкой картинки сжать её. Но мне нужно немного по другому. Картинка одна и та-же, но отображается она везде по другому, т.е где то она маленькая а где то она большая, где то обрезанная и т.д.

Получается мне нужно хранить сжатые и обрезанные картинки в специальных папках? Или как то можно при выводе их обрезать и отобразить, но не хранить. Прошу помочь!

4
  • 1
    Обычно для этого используется препроцессинг, где, к примеру, у вас есть картинка товара A.jpeg, и её вариации, сделанные для разных размеров - A_128x128.jpeg, A_256x256.jpeg и т.д. Препроцессинг можно делать на лету, либо после загрузки изображений по расписанию. 7 фев 2022 в 14:49
  • Тут много ньюансов и тонкостей может быть, для начала нужно понимать, используете ли вы cms или php-фреймворк на сайте или вы сайт полностью руками написали. Также, вы могли бы указать какого размера у вас картинки, сколько они весят (примеры). Существуют разные сервисы для сжатия изображений, например, Squoosh. Также, нужно понимать, целесообразно ли использовать аякс запрос, сколько времени занимает запрос, объем данных в запросе. Причиной лагов могут быть не картинки, а что-то еще. Опять же сколько товаров отображается, может стоит сделать пагинацию и т.д. 7 фев 2022 в 15:27
  • @DanielProtopopov спасибо за ответ. Такие имя файлов на некоторых сайтах я как раз таки и видел. Буду изучать. Спасибо за наводку!
    – Komend
    7 фев 2022 в 15:40
  • @freestyle_HD спасибо за ответ! Сайт написан с нуля полностью. Картинка размера должна 680x476, и картинки разные, весят по разному. И мне нужно в зависимости где отображается картинка менять размер, где то что то вырезать, а где то сжимать. Что бы например большая картинка в другом блоке была маленькой и весила бы мало. Ajax запросы я вызываю только после прокрутки страницы вниз. И раньше я использовал везде для товаров одну и ту-же картинку, а теперь у каждого товара она своя, и после этого появились лаги. Я пробовал вставлять gif что бы проверить из-за картинок ли лагает или нет.
    – Komend
    7 фев 2022 в 15:44

1 ответ 1

2

Получается мне нужно хранить сжатые и обрезанные картинки в специальных папках?

Да.

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

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

Чтоб не обрезать все картинки вручную, можно использовать сторонние ресурсы, например, tinypng с использованием API.

Либо написать самому скрипт, который сам отрезайзит картинки в нужном разрешении и формате.

Если нужно выводить картинки разного разрешения для разных экранов, стоит использовать тег picture, он позволяет указывать, при каких параметрах экрана какие картинки надо выводить и автоопределяет поддерживаемость новых форматов картинок - webp, jp2 и тому подобное.

1
  • Спасибо за большой ответ! И спасибо за подсказку Если нужно выводить картинки разного разрешения для разных экранов Все таки как вы сказали что это делает нагрузку на сервер, то думаю мне стоит перед загрузкой сжимать или обрезать картинки.
    – Komend
    8 фев 2022 в 14:34

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.