Мобильные устройства и скорость интернета прошли долгий путь. Прошли те времена, когда был один Wi-Fi-бар и мечта, молиться, чтобы песня iTunes 3.1K за 99 центов, которую вы только что купили, для вашего нового блестящего iPod mini 8G, загрузится менее чем за час. Если вообще.

Сегодня веб-разработчики создают дорогие красивые веб-приложения с использованием профессиональных фотографий высокого разрешения. Но даже с учетом того, как далеко продвинулись мобильные устройства, высококачественные изображения, снятые с помощью приличной камеры телефона, могут легко достигать 5–6 МБ, что не только замедлит рендеринг мобильных изображений до сканирования, но и для многих настольных веб-приложений может быть излишним. .

Оптимизация изображений для настольных компьютеров и мобильных устройств требует только базовых знаний о Photoshop, некоторых JS-файлов и базового понимания того, как изображения развертываются с помощью вашей Front End Framework. Но выгода от оптимизированного освещения и быстрых высококачественных изображений будет стоить затраченных усилий.

Для этого урока я буду использовать программу редактирования изображений с открытым исходным кодом Gimp версии 2.10 и Vue.js - мой любимый интерфейсный фреймворк. Давайте начнем с этого высококачественного изображения беспорядочного рабочего стола, сделанного моим телефоном OnePlus 5 с камерой на 16 МП.

На этой фотографии очень много деталей, и я хочу сохранить каждый лист, независимо от того, какое устройство я использую. Это фото имеет размеры 4608x3456 пикселей и весит колоссальные 5,6 МБ.

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

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

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

// my_vue_app/src/assets/images/
     |__ desktop/
     |__ mobile/

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

Чтобы оптимизировать наши изображения, откройте исходное изображение в GIMP. Чтобы масштабировать изображение в GIMP, выберите Инструменты ›Инструменты преобразования› Масштаб.

Когда инструмент «Масштаб» станет активным, щелкните изображение, и появится диалоговое окно, в котором вы можете установить новую ширину и высоту. Я всегда масштабирую высоту пропорционально ширине, это можно сделать автоматически с помощью GIMP, но выбрав значок звена цепи в диалоговом окне масштабирования. Установите ширину изображения на 1600 пикселей, и высота будет обновляться автоматически.

После масштабирования изображения до размеров рабочего стола 1600 x 1200 пикселей скопируйте изображение, удерживая Cmd + C или Shift + C на компьютерах с Windows и Linux.

Затем создайте новый файл изображения GIMP с помощью Файл ›Новый. Установите для нового файла GIMP ширину и высоту 1600 x 1200 пикселей и нажмите "ОК". После загрузки нового файла GIMP просто вставьте масштабированное изображение из буфера обмена в новое изображение GIMP с помощью Cmd + V или Shift + V.

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

Чтобы выделить вертикальную часть исходного изображения, перейдите в Инструменты> Инструменты выделения> Прямоугольное выделение в GIMP. После того, как инструмент прямоугольного выбора станет активным, перетащите его по исходному изображению, пока не найдете портретное выделение, которое вам нравится. Получив его, масштабируйте выделение до 500 x 750 пикселей, скопируйте масштабированное выделение, создайте новое изображение GIMP размером 500 x 750 пикселей и вставьте выделение в новый файл.

Наконец, нам нужно экспортировать (не сохранять) наши оптимизированные изображения в наше приложение Vue. В GIMP выберите Файл> Экспортировать как и выберите каталог изображений для мобильных устройств и компьютеров, в который вы хотите экспортировать новые изображения. После того, как вы выбрали свое местоположение, откроется другое диалоговое окно GIMP, чтобы убедиться, что вы в порядке с настройками экспорта. Примечание. Мне всегда везло с настройками по умолчанию, и я всегда был слишком нетерпелив, чтобы вернуться к кодированию, чтобы слишком глубоко погрузиться в то, что делает каждый из этих параметров, но если вам интересно, погрузитесь прямо сейчас.

Когда наши оптимизированные изображения экспортированы в соответствующие каталоги, у вас должен быть такой каталог изображений.

// my_vue_app/src/assets/images/
     |__ desktop/cocora_valley.jpg [ 981 KiB ]
     |__ mobile/cocora_valley.jpg [ 376 KiB ]

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

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

Затем создайте <Picture /> компонент

Единственный интересный момент в этом компоненте - это <img :src="require(getOptimizedImage)", который динамически загружает изображение из большого или маленького каталога на основе isMobile().

Давайте запустим наше приложение, чтобы увидеть нашу работу в действии!

Краткое примечание об общем размере сборки и способах развертывания ресурсов.

Когда вы создаете свое приложение, веб-пакет, скорее всего, выдаст вам несколько предупреждений о том, что изображения вашего рабочего стола больше, чем предлагаемый максимальный размер актива, равный 244 КиБ.

asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
  This can impact web performance.
  Assets:
    assets/image/desktop/cocora_valley.jpg (981 KiB)
    assets/image/mobile/cocora_valley.jpg (376 KiB)

Расслабьтесь, webpack, мы здесь профессионалы.

Очевидно, что эти высококачественные изображения значительно увеличат размер нашей папки производственных сборок, но более крупная папка сборки не обязательно означает более медленную загрузку. Чтобы понять это, нам нужно понять, как структурировано развернутое приложение, созданное с помощью Vue CLI (приложение create-response-app структурировано аналогичным образом).

Когда мы запускаем yarn build, создается папка dist со следующей структурой, содержащая все, что нужно пользователю для взаимодействия с нашим веб-сайтом, изображения, стили, наш внешний код и зависимости.

Папка dist, созданная с помощью Vue CLI, будет выглядеть так:

drwxr-xr-x   4 ethan  staff   128B Jul 12 14:22 css/
-rw-r--r--   1 ethan  staff   4.2K Jul 12 14:22 favicon.ico
drwxr-xr-x  29 ethan  staff   928B Jul 12 14:22 img/
-rw-r--r--   1 ethan  staff   857B Jul 12 14:22 index.html
drwxr-xr-x   8 ethan  staff   256B Jul 12 14:22 js/

Когда этот каталог развертывается на сервере и браузер посещает наш сайт, в браузер возвращается файл index.html, который содержит тег ‹script›, загружающий наш app.bundle.js. После рендеринга index.html и тега скрипта приложения в браузере Vue берет на себя все свое волшебство!

Только после рендеринга нашего <Picture /> компонента <img :src="require(getOptimizedImage)" инициирует сетевой запрос для нашего изображения.

В отличие от всего прочего, стили, изображения и JS-код объединены в один массивный файл app.bundle.js. Так работали некоторые инструменты сборки Front End. * хм * не называя имен, я уверен, что в то время это имело большой смысл.

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

Наслаждаться!