Как оптимизировать изображения для мобильных?

Тема в разделе "Верстка", создана пользователем danneo, 25 ноя 2018.

Информация :
Уважаемые пользователи, прежде чем ответить в теме или создать новую, внимательно ознакомьтесь с Правилами раздела и Правилами форума
Для быстрого поиска ответов на ваши вопросы воспользуйтесь Картой раздела и/или Поиском по разделу
Модераторы: ultra
  1. danneo

    danneo Честный

    Регистр.:
    13 ноя 2007
    Сообщения:
    1.491
    Симпатии:
    114
    Для ПК скорость загрузки 65%. А для мобильных 15%. Гугл советует уменьшить размер и сжать современным форматом.
    Как можно уменьшить размер для мобильных? Если я это сделаю, они же для ПК будут маленькими. Это я не про CSS, если что.
    И как пользоваться сжатием JPEG2000? Попробовал в фотошопе пересохранить, так какая-то фигня сохраняется - мало того, что файл получается в 2 раза тяжелее, дак еще и не открывается ничем.
    Вот что гугл предлагает:
    2018-11-25_13-11-03.png
     
  2. gls

    gls Комбат

    Регистр.:
    11 янв 2007
    Сообщения:
    589
    Симпатии:
    307
    попробуй jpeg-recompress, хорошо оптимизирует изображения
     
  3. zALEHANz

    zALEHANz Постоялец

    Регистр.:
    26 апр 2015
    Сообщения:
    78
    Симпатии:
    31
    для работы с изображениями использую 3 программы: 1 - фотошоп (в объяснении не нуждается); 2 - FastStone Image Viewer (помимо базовой функции просмотра изображений имеет неплохой базовый редактор изображений, а так же достаточно мощную утилиту пакетной обработки изображений); 3 - FileOptimizer (шикарная программа для сжатия не только изображений, но и кучи других форматов).
    Вариантов много. Все свои сайты проверял гуглом, и рейтинг на мобилках получается выше чем на ПК. Максимальный размер фотки, который гружу для любого сайта у меня не превышает 1820х880. Этот размер достаточно четко смотрится как на мобилках, так и на FHD экранах ПК. Чаще использую 2 размера фото, один в качестве превью и он обычно не превышает 300x200px (на больших экранах телефонов просто масштабирую через CSS), а по клику появляется латбокс с большой фоткой (в первую очередь это нужно для ПК), в итоге страница с 10 фотками весит менее мегабайта, в среднем вес одной фотки в разрешении 300x200px получается около 10Kb
     
  4. yoba yoba

    yoba yoba Создатель

    Регистр.:
    19 янв 2016
    Сообщения:
    10
    Симпатии:
    2
    адекватный размер, попробовать различные тулзы для обработки фото из исходника, например pinta сжимает в 2 раза лучше photoshop, но иногда бывают ошибки с цветами. Если нет старья и ios - юзайте webp - оставшийся edge его поддерживает с 10.2018. Сжимается очень годно - 700кб в жипеге, - 70 кб в webp.

    Ну и раньше гугл предлагал после анализа - скачать оптимизированные файлы.
     
    Последнее редактирование: 26 ноя 2018
  5. sam3d

    sam3d Создатель

    Регистр.:
    5 авг 2014
    Сообщения:
    30
    Симпатии:
    2
    для пакетной обработки попробуйте xnview. удобно и оптимизировать и уникализировать и пачку выдает легкую для загрузки.
    я очень большие фотки не грузил и жал все до 200кб
     
  6. danneo

    danneo Честный

    Регистр.:
    13 ноя 2007
    Сообщения:
    1.491
    Симпатии:
    114
    например, фотка 1200х600 (в шапке раздела). И еще загружены картинки разделов (500х300), чтобы на разных устройствах растягивались на весь экран. Как-то так. И выходит, что они и мешают.
    Я их сжал уже как только смог. Например, с 200кб до 80кб. И как было 15% для мобильников, так и осталось 15%.
    А есть ли смысл делать отложенную загрузку скрытых изображений? Как проще всего?
     
  7. zALEHANz

    zALEHANz Постоялец

    Регистр.:
    26 апр 2015
    Сообщения:
    78
    Симпатии:
    31
    Похоже проблема в верстке. Можно взглянуть на сайт? Очень интересно, что это за скрытые изображения.
     
  8. danneo

    danneo Честный

    Регистр.:
    13 ноя 2007
    Сообщения:
    1.491
    Симпатии:
    114

    Но скрытые, гугл подразумевает, я так понимаю, те, что не в 1-м экране
     
  9. zALEHANz

    zALEHANz Постоялец

    Регистр.:
    26 апр 2015
    Сообщения:
    78
    Симпатии:
    31
    Черт ногу сломит:confused:
    Грешу только на слайдер, попробуйте использовать другой и проверьте как отреагирует гугл. А вообще показ слайдеров на смартах отключаю. Этот слайдер, даже мой, не совсем древний процессор не хило нагружает.
    PS а фотки все же стоит оптимизировать. вот например прогнал одну Вашу фотку. Сравните со своей и найдите 10 отличий:), а между тем она в 2 раза легче вышла.
    PPS я джумловод, с WP едва знаком, но обнаружил плагин Autoptimize. Как я понял он должен собирать все разрозненные JS и выдавать их в одном файле. Но на сайте вагон JS, а сам плагин (вернее сгенерированный им JS) выдает ошибку в консоли.
     
    danneo нравится это.