Энтони Нг
Как разработчики и дизайнеры, наша обязанность обеспечить наилучший пользовательский опыт. И вы знаете, какая огромная часть этого опыта? Изображений.
Но многие из нас слишком заняты, чтобы дать изображения много мысли, кроме добавления SRC Собственность и некоторые размеры пикселей.
Это руководство покажет вам некоторые распространенные проблемы с использованием изображения и как их исправить.
Я также построил Сайт С живыми примерами, чтобы проиллюстрировать все эти проблемы. Сделайте жесткие обновления, измените размер вашего браузера, и вы быстро посмотрите, что я имею в виду. ?
О, и вы можете найти весь исходный код здесь на Github Отказ
Давайте начнем.
Вырежьте изображения до размера
Когда вы посещаете веб-сайт, HTML-страница отправляется в ваш браузер. Затем браузер должен загрузить любые активы, которые HTML-страница включает в себя. Ваш браузер должен загрузить любые файлы JavaScript, таблицы стилей – и, конечно же, изображения – которые использует страницу. Каждое из этих активов требует времени для загрузки. Чем больше файл, чем дольше это займет.
Мы передаем наши файлы JavaScript, чтобы удалить ненужное bloat и получить меньший размер файла. Мы должны сделать то же самое с нашими изображениями.
Один из способов избавиться от изображения «Bloat» – убедиться, что размеры разумны. Нет причин оставлять изображения какие-либо больше, чем они должны быть.
Если максимальная ширина изображения на вашем сайте будет 960px, то нет необходимости использовать файл изображения, который ширина 1800px. Время загрузки вашего сайта пострадает. Особенно на более медленных соединениях. И вы заставляете своего пользователя загружать больше байтов, чем им нужно.
Когда вы знаете размеры ваших изображений, используйте программу, которая может изменить размер фотографий размеру, которые вам нужны. Я обычно использую Эскиз или Аффинно дизайнер Отказ
В нашем примере здесь Изображения имеют ширину 960px. Однако оригинальная фотография имеет ширину 5183 пикселей. Там нет необходимости иметь изображение с такими большими размерами, если мы не будем использовать его.
После сокращения размеров фотографий имеют ширину 960px, мы видим снижение уровня файла на 90%, причем 6-секундный улучшение в течение всего времени нагрузки на WiFi.
А также, Конечно, время загрузки варьируется в зависимости от скорости сети.
Если мы используем инструмент разработчика Chrome, чтобы включить подключение к регулярному 4G-соединению, мы видим колосную 16 секундное улучшение времени загрузки.
Используйте сжатие
Уменьшение размеров нашего изображения – отличное начало уменьшения общего размера файла, но мы можем сделать больше. Мы можем сжать наше изображение, чтобы дополнительно уменьшить размер файла изображения, с небольшим (если есть) уменьшение качества изображения.
Сжатие удаляет ненужный мусор с нашего изображения, такого как метаданные, встроенные миниатюры, комментарии и ненужные профили цвета.
Я использую приложение под названием ImageOPTIM для сжимания моих изображений. Чтобы использовать его, все, что вам нужно сделать, это перетащить свои изображения в приложение и … Вот и все. Новое сжатое изображение заменит ваш старый. Если вы хотите автоматизировать сжатие изображений, вы можете использовать заданный бегун, такой как Grunt, чтобы минимулировать ваши изображения при создании вашего проекта.
В нашем примере здесь , мы видим уменьшение размера файла на 13% после сжатия, причем 100 миллисекундных (12%) улучшения нагрузки в течение подключения WiFi.
100 миллисекунд может показаться небольшим, но эти сбережения имеют значение, когда у вас есть несколько изображений на той же странице, пытаясь сражаться с помощью слабой сети 3G на iPhone.
Используйте средства массовой информации, чтобы сделать изображения отзывчивыми
Теперь у нас есть уменьшенный файл изображения, который быстро загрузится на вашу HTML-страницу. Пользовательский опыт определенно лучше, но наша работа еще не закончена. Мы должны убедиться, что изображение выглядит хорошо на дисплее всех размеров. Это должно быть отзывчиво.
Есть сайты, где изображение не полностью помещается в дисплей. Вы должны прокрутить слева и вправо – или даже увеличить – для просмотра всей фото. Это не лучший пользовательский опыт.
Давайте использовать средства массовой информации для стиля наших изображений, когда дисплей является определенным размером. На небольших дисплее мы будем использовать «Макс-ширину: 100%» для стиля наших изображений.
В нашем примере здесь Всякий раз, когда мы выделяем размер страницы, мы видим, что наше отзывющее изображение всегда будет полностью вписываться в дисплей. Пользователю не нужно прокручивать или масштабировать, чтобы просмотреть полное изображение.
Спроси арт-директор
Наш пользовательский опыт определенно улучшается. Наше изображение легкое и отзывчивое. Однако это масштабированное изображение может быть не именно то, что мы хотим на нашем сайте.
Например, наш веб-сайт может быть про предметом империи государственного здания. Когда изображение составляет 960 пикселей, империя государственное здание величественно в центре горизонта, узнаваемого с первого взгляда. Но как только мы разместим наш браузер, чтобы быть шириной 360px, он теряет некоторые из его пиццзы. В этом случае масштабированный образ не то, что мы хотим.
Сделав наше изображение отзывчивым, мы избегаем выпуска пользователей прокручивания и увеличения нашего изображения. Но мы заменяем эту проблему с новым. Пользователи теперь должны увеличить изображение, только чтобы увидеть государственное здание империи Pixelated. Это не лучший пользовательский опыт.
В таких ситуациях наше изображение должно быть изменено более резко. Возможно, вы захотите обрезать изображение или вообще изменить изображение. Делать это называется «художественным направлением».
Чтобы использовать разные изображения, мы можем использовать
В нашем Пример , мы будем использовать разные изображения на основе размера нашего дисплея. Теперь, когда вы разместите сайт, вы сможете увидеть государственное здание империи во всей его славе.
Используйте сервисных работников на деньги в кэшировании
Отзывчивый веб-дизайн – относительно новая концепция. Мы должны разработать наши сайты, чтобы хорошо выглядеть, независимо от того, на каком отображении они находятся. Теперь есть новая тенденция для веб-сайтов, чтобы почувствовать больше похожи на собственные приложения. Среди прочего, это означает, что наши сайты должны функционировать даже без подключения к Интернету.
Что это значит для наших изображений? Для изображений, которые являются статическими и не будут обновляться часто (например, логотипы), мы должны кэшировать их. При кешировании активов эти активы сохраняются в клиентском браузере.
При кешировании активов эти активы сохраняются в клиентском браузере. Преимущество этого заключается в том, что когда пользователь посещает наши веб-сайты в будущем, он сначала будет искать любые активы в нашем кеше, прежде чем запрашивать с сервера. Наше изображение будет загружаться еще быстрее, потому что извлечение из кэша обычно быстрее, чем сделать HTTP-запрос. Другим преимуществом является то, что мы можем даже получить доступ к нашему образу даже без подключения к Интернету!
Давайте пользоваться услугами работников, чтобы кэшировать наши активы. Работники обслуживания являются мощными новыми технологиями, которые действуют как промежуточное программное обеспечение между вашим браузером и Интернетом. Это позволяет нам полностью функционировать веб-страницы в автономном режиме!
В нашем Пример Если вы выключите свой интернет и обновите страницу, вы увидите наш веб-сайт, все еще функционирующий, как раньше.
Доступное изображение – это дружеское изображение
При использовании тега HTML, не имейте в виду д т он недвижимость.
Многие люди с нарушениями зрения используют инструменты, называемые считывателями экрана, которые вслух читают все содержимое веб-страницы. Они будут читать свойство ALT любого изображения, которые они встречаются, и пропускают любые изображения, которые не имеют свойства ALT. Таким образом, альта свойства имеют решающее значение для этих людей, чтобы понять изображения.
Кстати, каждое изображение должно иметь свойство ALT, но если изображение чисто для украшения (или четко объяснено выше), вы можете оставить это пустым.
Таким образом, наши изображения могут быть поняты всеми – даже люди, которые их не видят.
Это все! Есть какие-нибудь советы для лучшего использования изображений? Оставьте комментарий ниже!
Хотите узнать больше о услуге работников? Проверьте это Введение на странице разработчика Google.
Хотите узнать больше о создании лучших пользователей через более быстрые веб-сайты? Проверьте это книга Отказ
Оригинал: “https://www.freecodecamp.org/news/you-need-to-stop-making-these-6-mistakes-with-your-img-s-e242c02d14be/”