Адаптация изображения для web

Адаптация изображения для web
14.11.2018
Адаптируй для веб просто

Адаптация изображения для web

По информации Internet World Stats, на август 2018 года 4,157 млрд. человек, стали пользователями интернет сети. Это значит, что электронная сеть развивается в геометрической прогрессии, ведь еще в 2017 пользователей было 3,6 млрд. человек.

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

Чтобы работать в сети, что бизнесмену, что рабочему стоит понимать как работает маркетинг. Ведь главная цель - вовлечение клиентов и получение прибыли. Если дизайнер сделает функциональный сайт, но не подумает о том, что нужно для привлечения клиентов, работа будет напрасной.

Для клиента, да и просто пользователя роль играет время, за которое подгружается страница с контентом. Если в течении 5 секунд страница продолжает загружаться, не подавая признаков жизни, пользователь закрывает и уходит прочь.

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

Причины медленной загрузки страниц:

  • Сетевые задержки - Сетевые задержки, возникающие при передаче информации составляют суммарный показатель latency запроса.
  • Количество передаваемых файлов – Каждая веб-страница состоит из нескольких десятков файлов, которые требуют отдельного запроса к веб-серверу.
  • Размер передаваемых файлов – Bandwidth играет роль только при загрузке больших файлов — например, изображений. Учитывают характеристику сети latency.
  • Загрузка сторонних скриптов – Сторонние скрипты не контролируются владельцами сайта и приводят к задержкам или некорректной загрузке страниц.
  • Дополнительные задержки Wi-Fi- и мобильных сетей – Мобильные и Wi-Fi-сети несут дополнительные сетевые задержки, которые влияют на скорость загрузки сайта.
  • Помимо медленной загрузки страницы, разберем еще один вопрос, который стоит учитывать.
  • Корректное отображение изображения на устройствах (телефон, планшет, монитор, часы).

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

Однако, сегодня расскажу о распространенном варианте медленной загрузки web-страниц – Неадаптированные изображения для web и что с этим делать.

Для чего нужно.

Адаптированное изображение под веб помогает пользователю воспринимать информацию на устройстве.

Люди, которые заходят в интернет с мобильных устройств, редко имеют полное представление о том, как выглядит сайт, адаптированный под мобильные устройства. Тем не менее, они критикуют страницы, если те не понравятся. Пишут негативные отзывы, высмеивают в социальных сетях, среди знакомых. Даже если продукт у компании на высоте, но сайт не отображается на телефоне, планшете как должен это портит впечатление, что снижает покупку через интернет, соответственно и снижается прибыль.

Касательно развлекательных сайтов, ситуация похожа.

Если user посещает с планшета или телефона сайт:

  • Ждет загрузки контента больше 3х секунд
  • Изображения и текст "слиплись" из-за некорректной адаптации
  • Приходится увеличивать заголовки статей и сам текст
  • Приходится попадать с сотой попытке на play в видео ролике и другие кнопки

На такой ресурс просто перестанут заходить.

Можете себе представить не адаптивными сайты:

  • YouTube, RuTube
  • Wikipedia
  • Rozetka

Вот и я не могу.

Для наглядности, перейдите по ссылкам ниже.

Примеры не адаптивности в web:

  • http://forumodua.com/
  • http://today.od.ua/forum/
  • https://forum.pravda.com.ua/
  • https://www.kharkovforum.com/
  • https://rarbgway.org/torrent/w93x8om

Как узнать параметры изображения.

Выяснив, с какой целью проводится адаптация, переходим непосредственно к ней.

Рассмотрим способы, помогающие узнать параметры картинок, фотографий, иллюстраций.

  1. С помощью photoshop, скачиваем выбранное изображение или открываем его. Переносим в программу Photoshop. На панели инструментов ищем окно "Изображения". Нажимаем и в новом всплывшем окне открываем параметр "Размер изображения". В окне видим "Размеры в пикселях", "Размер документа". Смотрим в "Размер документа" на "Ширина", "Высота" и "Раздельная способность".
  2. С помощью "Просмотреть код". Выбираем нужное изображение. Кликаем правой клавишей мыши по картинке. Всплывает окно настроек и в низу нажимаем "Просмотреть код" или комбинацией клавиш "Shift+Crl+I". Нажимаем клавиши "Shift+Crl+С". Стрелочкой наводим на изображение и вверху всплывает иконка с размером изображения.
  3. С помощью "ACDSee Pro". Открываем изображение. Переходим в "Просмотр". Смотрим внизу экрана на вкладку "Сведения о палитре".
  4. С помощью "Paint". Открываем изображение через приложение "Paint". На вкладке "Главная" находим "Изменение размера и наклона"
  5. .
  6. С помощью сайтов:
    • https://www.iloveimg.com/ru/resize-image/resize-png
    • https://www.imgonline.com.ua/size-in-megapixels.php
  7. С помощью "Adobe Bridge". В программе Adobe Bridge размер фотографии в пикселях и сантиметрах в "File Properties" (Свойства файла). Если нет этого раздела или строки "Разрешение в сантиметрах", отображение нужно включить. Для этого зайдите в верхнее меню "Edit" – "Preferences" и в "Metadata" добавьте галочки в строки "Dimensions", "Dimensions (in cm)", "Resolution" (плотность пикселей).
  8. С помощью встроенного приложения "Фотографии". Открываем фотографию через "Открыть изображение с помощью фотографии". Открываем "Подробнее" и кликаем на "Информация о файле". Открывается с левой стороны экрана вкладка с параметрами и узнаем необходимую инфу.
  9. Используем мышку. Наводим мышкой на изображение, ждем 2-3 секунды и видим всплывшую информацию о фото, в которой отображен размер файла. Вместе с размерами проверяем цветовое пространство изображения и формат.

Какие бывают цветовые модели:

Цветовая модель RGB. Изображения в RGB часто видите на экранах телевизоров и мониторах компьютеров. Этот режим используется только устройствами, генерирующими свет. Изображение, выполненное в RGB, подходит для печати только на цифровом принтере.Если хотите, чтобы макет печатался профессионально, придется изменить цветовой режим на CMYK.

Субтрактивные цвета начинаются с белого. Поэтому, чем больше цветов добавляется, тем темнее цвета.

Любое изображение уникально, поэтому величина использованного белого и смешение других цветов в каждой модели будет разным. В результате как RGB, так и CMYK отображаются по-разному.

Например, RGB предлагает широкий диапазон цветов. Поэтому созданный в этой модели файл позволяет использовать яркие, живые цвета. Когда он преобразуется в CMYK, многие из ярких оттенков выглядят тусклыми или мутными.

Уменьшаем размеры и вес.

Для уменьшения веса необходимо:

  • Открыть фотографию в Photoshop
  • Задействовать функцию «Сохранить для веб и устройств» (Save for Web & Devices), которая находится в меню «Файл» (File).
  • В открывшемся окне установить настройки: формат и качество. Снижать качество (quality) более чем на 50% не рекомендуется. В нижней части окна, настройки ширины и высоты, с помощью которых также уменьшается размер.
  • Вес изображения не должен превышать 100 Кбайт, а размер должен быть 800 на 600 пикселей – это связано с тем, что еще остались мониторы, которые плохо ладят с гигантскими картинками.

При уменьшении веса фотографии, могут появиться следы, которые указывают на то, что она была сжата. Чтобы скрыть это, нужно размыть фотографию, воспользовавшись инструментом Blur в фотошопе, установив значение 0,1.

Чтобы достичь точной оптимизации изображения для применения в приложениях веб (например, Adobe® Dreamweaver®), выбираем команду «Сохранить для Web». Диалоговое окно «Сохранить для Web» позволяет осуществлять предварительный просмотр изображения в различных форматах и с разными настройками оптимизации.

В нем можно также задать параметры прозрачности и анимации.

Чтобы получить оптимизированные изображения в основных форматах можно воспользоваться командой «Сохранить как». В зависимости от формата файла можно указать качество изображения, прозрачность фона или подложку (заполнение фоновых областей каким-либо цветом), вариант отображения цветов и метод загрузки.

Сохраняем изображение

При размещении изображения в сети учитывайте размер файла. Размер файла задаем так, чтобы время на загрузку было минимальным, а качество изображения — максимальным.

Итак, изменив размер изображения так, как надо. Теперь пришло время для оптимизации и сохранения в одном из популярных графических форматов, это JPG(JPEG) или PNG. Теперь нажмите на вкладку главного меню "Файл" (File) и выберите из списка пункт "Сохранить для Web..." (Save For Web & Devices) или нажмите комбинацию клавиш Ctrl+Alt+Shift+S.

Это действие открывает в Photoshop большое диалоговое окно "Сохранить для Web", в котором область предварительного просмотра занимает большую часть пространства.

В левом верхнем углу области предварительного просмотра вы увидите серию из четырех вкладок. По умолчанию, выбрана вкладка "Оптимизация" (Optimized), которая означает, что вы не видите исходное изображение. Вместо этого, показан предварительный просмотр того, как изображение выглядит с текущими настройками оптимизации.

Используйте другую вкладку, где в окне предпросмотра показываются сразу два изображения, оригинальное и оптимизированное, это вкладка "2 варианта" (2-Up).

При активной вкладке "2 варианта", теперь мы видим сразу два изображение, оригинальную версию слева и оптимизированную версию справа (если ваша картинка имеет альбомную ориентацию, т.е. её ширина больше, чем высота, то тогда картинки будут показываться одна над другой).

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

Мы можем выбрать из предварительно заданные параметров качества (низкое, среднее, высокое и очень высокое, и наилучшее, в англ. - Low, Medium, High, Very High, и Maximum) в выпадающем списке слева, либо можем ввести определённое значения качества в процентах справа.

Хотя довольно таки заманчиво задать максимальное качество для наших фотографий, оптимизация для интернета означает, что мы должны делать размер файла в мегабайтах как можно меньше, что означает поиск золотой середины между качеством изображения и размером файла. Значение качества "Высокое" почти всегда является оптимальным выбором, оно даёт нам приемлемое качество изображения при относительно небольшом размере файла. Выбор значения "Высокое" автоматически устанавливает значение качества на 60%.

Как только вы выбрали значение качества, убедитесь, что опция "Оптимизация" (Optimized) у Вас включена, т.к. она может помочь ещё несколько уменьшить размер файла. Опции "Прогрессивный" (Progressive) и "Встроенный (цветовой) профиль" (Embed Color Profile) включать не обязательно, т.к. всё-равно большинство веб-браузеров не поддерживают цветовые профили.

Наконец, включите опцию "Преобразовать в sRGB" (Convert to sRGB), если она ещё не активна. Это позволит убедиться в том, что фотография сохраняется в цветовом пространстве sRGB, что, проще говоря, означает, что цвета на фотографии будут корректно отображаться на веб-сайте.

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