За последние несколько лет популярность отзывчивого веб – дизайна значительно возросла. И все больше веб – сайтов в настоящее время разрабатывается с учетом принципов отзывчивого веб – дизайна.
Однако, как и у любого подхода у отзывчивого веб-дизайна есть свои трудности, с которыми приходиться сталкиваться разработчикам в процессе своей работы. Одна из самых распространенных проблем – это уменьшение размера файлов, при написании сайта или приложения для мобильного устройства.
В этой статье мы рассмотрим, как использовать встроенную в WordPress функцию, которая дает возможность вставлять изображения любого размера, что особенно удобно при использовании сайта с мобильных устройств. Избранные изображения, которые иногда называют миниатюрами, функция WordPress, была значительно улучшена, начиная с версии 3. Она позволяет указать признаки изображений для каждой должности и показать, как оно будет выглядеть вмести с другим контентом. Тот факт, что изображение хранится в мета к записанным данным, а не вкладывается в содержание поста, значит, у нас есть множество новых возможностей для использования этого изображения.
Почему стоит беспокоиться о размере изображений?
Множество людей, используют свое мобильное устройство для серфинга в интернете, сидя на диване, и подключившись к Wi-Fi, при этом одним глазом они смотрят в телевизор, а другим на экран мобильного телефона. Многие ищут информацию о том, что недавно услышали от друзей или знакомых. И пользователей такого типа все больше. Даже вы, возможно, сейчас таким же образом читаете эту статью.
Но есть и другой тип пользователей, который использует интернет с мобильного устройства посредством 3G, при чем даже если сигнал нечеткий и пропадает, или если у них невыгодный тарифный план. И хотя в настоящее время покрытие сети становится лучше, тарифные планы дешевеют и большое появляется мобильных устройств с поддержкой Wi-Fi, пользователей этого типа все еще достаточно много, чтобы их игнорировать. Наоборот, с ними приходиться считаться.
Эти пользователи не будут благодарны вам за создание сайта с изображениями огромных размеров, которые будут медленно загружаться на их телефоны, постепенно съедая их деньги. В большинстве случаев такие пользователи не дожидаются медленной загрузки, они просто закрывают ваш сайт. А это может оказать значительное влияние на рейтинг вашего сайта в поисковых системах. Все вышесказанные факторы являются вескими причинами для уменьшения размера изображений на вашем мобильном сайте.
Отзывчивые изображения, что это такое?
Если у вас есть опыт в разработке сайтов, и оптимизации их под мобильные устройства, то вы представляете себе принципы работы отзывчивого веб- дизайна.
В начале использования отзывчивого веб-дизайна, нужно воспользоваться CSS с этим кодом:
img {
max-width: 100%;
}
Это позволяет вашим снимкам выглядеть аккуратно, а их размер сократить в соответствии с макетом. Но в действительности с размерами файлов ничего не происходит, что может привести к появлению файлов большого размера на вашем мобильном сайте. И как результат ваш сайт будет медленнее работать. Отображение изображений больших размеров, которые сократились при помощи CSS не рекомендуется W3C, особенно на мобильных устройствах.
Когда разработчики создают отзывчивый веб-дизайн сайта, то, как правило, они используют некий способ, чтобы сделать фактический размер изображения меньше.
Если у вас есть опыт в разработке веб – сайтов, то вы знаете, что на сегодняшний момент существует несколько способов отображения картинок. Вот некоторые из этих методов:
Первый способ звучит следующим образом. Заменить изображения в разметке с фоновыми изображениями, используя изображения различных размеров в зависимости от мобильного устройства. Этот метод имеет серьезные SEO недостатки, потому что изображения не имеют alt теги для чтения с экрана. Также при использовании подобного метода создаются определенные трудности для поисковых систем для индексации вашего сайта.
Второй способ предлагает нам использование меньшего изображения в разметке и более крупного изображения в качестве фона для отображения сайта со стационарного компьютера. Также же в этом методе используется CSS, чтобы скрыть меньшее изображение на больших экранах. Этот метод, подробно описывается Гарри Робертс на сайте CSS Wizardry. Он лучше чем первый, но требует ручного создания изображений, а также определение фонового изображения для каждого основного изображения в таблице стилей. Не знаю, как вы, но у меня нет, ни времени, ни терпения на это.
Третий вариант предлагает JavaScript-решение, которое использует URL параметры или атрибуты данных. Это позволяет избежать монотонной работы, описанной выше во втором способе, но этот способ включает в себя больше обработки и может замедлить загрузку сайта. А это не входит в наши цели.
Еще один вариант, это использование отзывчивых изображений, которые сделают все работу за вас. Это самый удобный вариант, который я видел, но он требует, отделить изображения, которые вы хотите изменить от тех, которые вы хотите оставить. А это в свою очередь, потенциальные проблемы при передаче управления сайтом клиенту или редактору.
Тот факт, что отзывчивые изображения используют PHP, заставило меня задуматься о том, как это может поместиться в WordPress, который, в конце концов, написан на PHP. Есть ли способ использовать встроенные функции WordPress для доставки изображений таким образом, что клиент не сможет своими действиями помешать этому процессу?
Да, оказывается, это возможно. Вы сможете это сделать, добавив всего один плагин.
Отзывчивые изображения и
Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров