- Поисковые системы
- Практика оптимизации
- Трафик для сайтов
- Монетизация сайтов
- Сайтостроение
- Социальный Маркетинг
- Общение профессионалов
- Биржа и продажа
- Финансовые объявления
- Работа на постоянной основе
- Сайты - покупка, продажа
- Соцсети: страницы, группы, приложения
- Сайты без доменов
- Трафик, тизерная и баннерная реклама
- Продажа, оценка, регистрация доменов
- Ссылки - обмен, покупка, продажа
- Программы и скрипты
- Размещение статей
- Инфопродукты
- Прочие цифровые товары
- Работа и услуги для вебмастера
- Оптимизация, продвижение и аудит
- Ведение рекламных кампаний
- Услуги в области SMM
- Программирование
- Администрирование серверов и сайтов
- Прокси, ВПН, анонимайзеры, IP
- Платное обучение, вебинары
- Регистрация в каталогах
- Копирайтинг, переводы
- Дизайн
- Usability: консультации и аудит
- Изготовление сайтов
- Наполнение сайтов
- Прочие услуги
- Не про работу
Маркетинг для шоколадной фабрики. На 34% выше средний чек
Через устранение узких мест
Оксана Мамчуева
Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий
Часто делаю адаптивные дизайны для своих проектов.
Обычно в тексте использую уменьшенные версии изображений (миниатюры), поэтому такой проблемы не возникало.
Но сейчас делаю сайт, в материалах которого идут изображения по 600px.
Используя правило media, начиная с 600px изображениям задана ширина 100%.
Проблема в том, что проверка сайта сервисом Google Insight дает мне критическую оценку и предложение оптимизировать изображения на 60 и более процентов.
Я не знаю общеизвестно это или нет, но я считаю, что результат этой проверки влияет на ранжирование. Косвенным подтверждением этого является надпись, которая появляется при несоблюдении "правил" оформления мобильной версии.
В общем, вопрос. Как вы, господа, поступаете с большими изображениями, сжатыми до размеров окна мобильного гаджета?
Генерировать отдельные миниатюры для телефонов не предлагать :)
Генерировать отдельные миниатюры для телефонов не предлагать :)
Это и есть решение.
Это и есть решение.
Довольно ресурсоемкое решение.
Возможно, как-то можно подменять значения истиной ширины и высоты скриптом? Если это реально, конечно
В чем ресурсоемкость заключается? У вас же картинки не 3000x3000 пикселей.
Не совсем понял, в чем именно проблема. У меня все картинки изменяют размер на мобилах под размер экрана. Удобство для пользователей (мобилы) 96 из 100. Проверка mobile-friendly "Отлично! Страница оптимизирована для мобильных устройств."
Из рекомендаций гугла
Изменение размера и сжатие изображения по адресу ***.jpg уменьшит его на 89,5 КБ (86 %).
Изменение размера и сжатие изображения по адресу ***.jpg уменьшит его на 46,4 КБ (91 %).
Во-первых, их очень много.
Ну а во-вторых, стоит горизонтально положить устройство и ширина картинки уже увеличивается процентов на 30. При этом разрешение у телефонов отличается, не говоря уже про планшеты.
Получается, что изображения нужно уменьшать до какого-то среднего размера, поэтому такое решение скорее подходит для статичных сайтов.
Из рекомендаций гугла
Изменение размера и сжатие изображения по адресу ***.jpg уменьшит его на 89,5 КБ (86 %).
Изменение размера и сжатие изображения по адресу ***.jpg уменьшит его на 46,4 КБ (91 %).
Скорее всего, чем больше картинок на странице, тем сильнее они опускают оценку.
---------- Добавлено 04.03.2015 в 18:09 ----------
Удобство пользования у меня 99%.
А вот скорость всего 66
Скорее всего, чем больше картинок на странице, тем сильнее они опускают оценку.
Другая страница. Около 40 картинок. (одна из слишком громоздких страниц)
Удобство для пользователей 99 из 100.
Но оценка скорости красным горит). Оптимизируйте следующие изображения, чтобы уменьшить их размер на 1,6 МБ (83 %). 42 из 100.
Но проверка mobile-friendly дает Отлично! Страница оптимизирована для мобильных устройств.
Это к...
Эта страница может не пройти проверку на удобство для мобильных устройств.
Во-первых, их очень много.
Ну и что с того?
Генерить разные размеры желательно при загрузке. Но при этом ничто не мешает перегенерировать 1 раз(!) уже загруженные.
И показывать нужные уже в зависимости от разрешения экрана.
Получается, что изображения нужно уменьшать до какого-то среднего размера, поэтому такое решение скорее подходит для статичных сайтов.
Делается 2-3 типоразмера. А необходимость "немного ужать при выводе" решается html/css.
АПД. Стоит почитать.
Делается 2-3 типоразмера.
А не разумней резиновые картинки?
А не разумней резиновые картинки?
Что имеешь ввиду? Вектор? Так он не решает проблемы с объёмом, а создаст новые.
Что имеешь ввиду? Вектор?
Я имею ввиду средствами css подстраивать размер картинки под размер окна браузера. Не знаю, как объяснить, я не кодер и не особо силен в терминах)) width:100%;max-width:***px