Оптимизация изображений

[btrotsky]

Всем привет. Переношу сайт с престы на опенкарт, появилась проблема с изображениями. Все они весят реально по 5-15 мб (сайт на престе весит 13 гб), я взялся переносить на опенкарт и ужимаю вручную изображения, но все равно старый сайт грузится быстрее. Я посмотрел в гугловском пейдж спид и он показывает что на старом сайте картинки грузатся до 100кб, как так получется и можно ли это сделать на опенкарте? 

 

Старый сайт

 

Новый сайт

[markimax]

А зачем вы грузите оригиналы изображений с такими размерами?
Меньше размеры делайте
Оригиналы не должны быть больше 100 кб и размеры в районе максимума 1000px
К примеру 3686px на, 2073px
Понятное дело с такими размерами и "вес" изображений очень большой
ЗАЧЕМ?
Достаточно в 3 раза меньше размер
Что там пользователи будут "разглядывать"?

 

Спойлер

 

Плюс потом поставите для ужимки модуль от @sitecreator

 

Он хорошо ужимает

 

 

[btrotsky]

1 час назад, markimax сказал:

А зачем вы грузите оригиналы изображений с такими размерами?
Меньше размеры делайте
Оригиналы не должны быть больше 100 кб и размеры в районе максимума 1000px
К примеру 3686px на, 2073px
Понятное дело с такими размерами и "вес" изображений очень большой
ЗАЧЕМ?
Достаточно в 3 раза меньше размер
Что там пользователи будут "разглядывать"?

 

  Показать контент

 

Плюс потом поставите для ужимки модуль от @sitecreator

 

Он хорошо ужимает

 

 

 

Как раз таки они должны быть такими. Чтобы можно было рассмотреть все детали, так сказал заказчик, чтобы к примеру можно было рассмотреть все на предмет царапин, потертостей и т.д., вообщем это должно быть.

 

Суть в том что старый сайт грузит их все по минимуму и загрузка сайта не более 1.5-2 сек, нужно мне сделать чтобы было не хуже

 

Модуль на 3 версию опенкарта вижу нету

Змінено 21 березня 2019 користувачем btrotsky

[sitecreator]

15 минут назад, btrotsky сказал:

Чтобы можно было рассмотреть все детали

 

Так про потерю качества речь то не идет.  Вес файла можно уменьшить без потери качества.

Вы можете также перейти на webp формат.

 

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

 

на сайте у вас максимальный размер какой?

1200х1200, например?

[btrotsky]

19 минут назад, sitecreator сказал:

на сайте у вас максимальный размер какой?

1200х1200, например?

 

нет, сейчас на сайте все фото в 4000х2000 примерно

[markimax]

5 минут назад, btrotsky сказал:

 

нет, сейчас на сайте все фото в 4000х2000 примерно

Зачем такой ГРОМАДНЫЙ размер?
Что вы потом "хотите", понятное дело что размер изображений будет тоже ГРОМАДНЫМ

[btrotsky]

11 минут назад, markimax сказал:

Зачем такой ГРОМАДНЫЙ размер?
Что вы потом "хотите", понятное дело что размер изображений будет тоже ГРОМАДНЫМ

 

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

[lexxkrt]

возможно изображения закэшируются будут быстрее открываться

[lexxkrt]

2 minutes ago, btrotsky said:

 

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

всмысле быстро, картинка по вашей ссылке открывается раза в 3 дольше чем на опенкарте 3

[markimax]

3 минуты назад, btrotsky сказал:

 

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

Потому что там КОСТЫЛИ data:image/png;base64 data-src fansybox подгрузки

[btrotsky]

5 минут назад, lexxkrt сказал:

возможно изображения закэшируются будут быстрее открываться

 

будут, но клиенту это не походит, изначально нужно сделать загрузку не долгой

 

4 минуты назад, lexxkrt сказал:

всмысле быстро, картинка по вашей ссылке открывается раза в 3 дольше чем на опенкарте 3

 

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

[btrotsky]

2 минуты назад, markimax сказал:

Потому что там КОСТЫЛИ data:image/png;base64 data-src fansybox подгрузки

 

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

 

[markimax]

1 минуту назад, btrotsky сказал:

 

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

 

Сократите размер изображений
Вот так надо делать а не костылями data-src "обманывать" Google

В вашем варианте просто различная реализация галереи товаров
Поставьте другую галерею .. с data-src подгрузкой
fansybox это делает по типу Lazy но по клику

 

[btrotsky]

Только что, markimax сказал:

Сократите размер изображений
Вот так надо делать а не костылями data-src "обманывать" Google

В вашем варианте просто различная реализация галереи товаров
Поставьте другую галерею .. с data-src подгрузкой
fansybox это делает по типу Lazy но по клику

 

 

у меня вообще стоит меджик зум, я так полагаю нужно его и менять на data-src подгрузку ?

[markimax]

4 минуты назад, btrotsky сказал:

 

у меня вообще стоит меджик зум, я так полагаю нужно его и менять на data-src подгрузку ?

Да замените на другу галерею там где есть data-src lazy загрузка по клику

[btrotsky]

12 минут назад, markimax сказал:

Да замените на другу галерею там где есть data-src lazy загрузка по клику

а может вы знаете решения для этого есть?)

[pimur]

 
нет, сейчас на сайте все фото в 4000х2000 примерно

С такими размерами, лучше сразу заказным письмом по почте отпечатанные баннеры слать клиентам.

Отправлено с моего ZB631KL через Tapatalk

[sitecreator]

1 час назад, btrotsky сказал:

нет, сейчас на сайте все фото в 4000х2000 примерно

 

вы это прямо в браузер отдаете?

 

Если так, то какой реакции гугла ждете на это?

 

55 минут назад, btrotsky сказал:

Ну вот же пример  сайта где фото в таком же размере

 

вы наивно полагаете, что есть что-то, что можно разглядеть при таком разрешении?  И при условии, что это снято без профессионального освещения и без проф. камеры?

Кстати, а что там интересного на велосипеде нужно рассмотреть?   Грязный снег и плесень на прошлогодних листьях?

 

Какая цель то?

При том, что четкость фиговая в итоге.

Что там на велосипеде смотреть то, что нужно 4000х2000?

 

[sitecreator]

1 час назад, btrotsky сказал:

Но в этом случает все как-то оптимизировано

 

открывается она несколько секунд.

одна картинка.

 

[sitecreator]

 

 

 

6 Мегов картинка.

как она может "быстро" открываться?

На мобильнике она может минуты грузиться. Вот гугл и намекает на это. гугл не прав?

 

[sitecreator]

@btrotsky , а у вас цель какая? Гугл обмануть или реально сделать быстрый сайт?

 

Кстати, в итоге гугл вы не обманите.  Потому, что он будет делать оценку по фактической скорости загрузки у клиентов.

Когда соберет статистику по сайту.  Пока у гугла нет статистики, то вы можете попробовать обмануть его, но тут вы только себя в итоге обманете.  Ибо для гугла его статистика будет в приоритете чем попугаи, показанные в тесте (эмуляции смартфона).  Он оценит по реальным загрузкам на смартфоны.  Улавливаете?

[OCappLab]

https://prnt.sc/n110g8

https://prnt.sc/n110sx

 

Разница в 3 раза меньше картинка, качество (визуально) почти такое же. При большом увеличении все равно будет пикселизация.

[btrotsky]

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

 

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

[OCappLab]

Используйте Лейзи Лоад или похожие скрипты, для отложенной загрузки изображений