В этом уроке мы поговорим об оптимизации графики, используемой на сайте в программе Adobe Muse. Для того чтобы оптимизировать графику своего сайта, все картинки, которые вы размещаете у себя на сайте, должны оптимизировать под определенный размер и объем файла. Мы уже скачали несколько картинок, которые занимают, например, 290 кб, 1628 кб, 198 кб, 412 кб. Они все a формате .jpeg примерно 1920 на 1200, а остальные даже больше, но уже немного оптимизированы.
Для того чтобы оптимизировать данные картинки,существует много онлайн сервисов. В интернете мы нашли несколько таких инструментов оптимизации изображений
Давайте перейдем в браузер, у нас, например, уже открыт сайт tinypng.com. Он позволяет оптимизировать .png и .jpeg файлы, достаточно переместить сюда файлы или выбрать картинку из папки. Выберем самую большую картинку, которая занимает 1.58 Мб, нажимаем "Открыть", и происходит автоматическая компрессия картинки. После того, как все закончено, мы видим, что изначальный файл был 1.7 мб, а конечный 225 кб То есть мы на 86% уменьшили объем картинки и сэкономили 1 Мб.
Далее вы можете сохранить эту картинку на dropbox или просто скачать ее, нажав на кнопку "Download". Есть еще другой сервис - fotomini.ru Здесь также перетаскиваете картинку или выбираете из папки. Вы видите, что данный сервис уменьшил объем на 80%. Точно также вы сможете ее скачать и использовать в своих проектах. Но есть еще один очень интересный способ, который есть в самой программе Adobe Muse. Давайте разместим на наш сайт картинку через функцию "Поместить".
Выбираем самую большую картинку, нажимаем "Открыть" и вставляем ее на свою страницу сайта. Немного уменьшим ее до того размера, как нам необходимо. Размер моего сайта 960 пикселей и картинку мы хотим разместить по ширине сайта. Давайте разместим еще пару картинок. Вставим еще раз эту же картинку, изменим размер до 200 пикселей и разместим ее на странице. Третью картинку уменьшим до 500 пикселей и разместим ее рядом в другими картинками.
Далее идем в панель "Ресурсы", выделяем все картинки, зажимая Shift, нажимаем правую кнопку мыши и "Оптимизировать размер ресурса". После выбора данной функции, если вы еще раз нажмете правой кнопкой мыши на данных изображениях, то вы больше не увидите такую функцию. Ресурсы все оптимизированы. Теперь мы выгрузим сайт в HTML через "Экспорт через HTML" и сохраним сайт в папку на рабочем столе с именем "123". Эта папка сейчас пустая. Нажимаем Ок, происходит выгрузка сайта. Автоматически нас перебрасывает в браузер для просмотра.
Давайте перейдем в папку "123" у себя на компьютере и посмотрим, какой размер картинок после оптимизации программой Adobe Muse. И вот, что мы видим, наши картинка 1 самая большая, которая весила 1.7 V, теперь весит всего 162 кб. Это еще меньше, чем мы оптимизировали с помощью онлайн сервиса. Там, как вы помните, было 227 кб. Таким образом, даже не используя онлайн сервисы, вы можете оптимизировать свои изображения, которые размещаете в программе Adobe Muse, прямо в это программе. На этом данный урок закончен. Вам необходимо будет выполнить задание, ответить на вопросы и переходить к дальнейшему обучению.
Скорость загрузки сайта - критически важный параметр для любого сайта. Чтобы иметь над ним власть, нужно уметь оптимизировать графику на сайте. Этот урок научит Вас всем тонкостям этого дела на конкретных примерах.
Заработай!
