Перейти к содержимому
  • Оптимизация графики для сайта

       (17 отзывов)

    Евгений Зубов
    • 68 4,25,6,20,3,26,27,28,29 4,6,32 https://creatura.club/uploads/monthly_2016_02/5.3_Optimizatsiya_grafiki_ispolzuemoy_na_sayte.mp4.66cf6f242cccf9a29bbf249a8b6fb892.mp4 5 До 5 минут display: none; https://creatura.club/uploads/ Средняя сложность display: none;
      1. Пройдите тестирование для урока
      2. Оцените урок и сдайте задание

      В этом уроке мы поговорим об оптимизации графики, используемой на сайте в программе Adobe Muse. Для того чтобы оптимизировать графику своего сайта, все картинки, которые вы размещаете у себя на сайте, должны оптимизировать под определенный размер и объем файла. Мы уже скачали несколько картинок, которые занимают, например, 290 кб, 1628 кб, 198 кб, 412 кб. Они все a формате .jpeg примерно 1920 на 1200, а остальные даже больше, но уже немного оптимизированы.

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

      • tinypng.com
      • www.optimizilla.ru
      • fotomini.ru
      • webresizer.com/resizer
      • compressor.io
      • tools.dynamicdrive.com/imageoptimizer
      • www.jpegreducer.com
      • www.picresize.com
      • jpeg-optimizer.com
      • www.jpegmini.com/main/shrink_photo
      • tinypng.org
      • www.punypng.com
      • quasimodo.com/ZorroSVG

      Давайте перейдем в браузер, у нас, например, уже открыт сайт 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, прямо в это программе. На этом данный урок закончен. Вам необходимо будет выполнить задание, ответить на вопросы и переходить к дальнейшему обучению.

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


      Жалоба


    Отзывы пользователей


    Genka

    +

    Поделиться отзывом


    Ссылка на отзыв
    Юлия+Коваль

    +1

    Поделиться отзывом


    Ссылка на отзыв
    Гость Падалко Сергей

    Отлично

    Поделиться отзывом


    Ссылка на отзыв
    adel

    супер! нужно знать!

    Поделиться отзывом


    Ссылка на отзыв
    Дмитрий Жуков

    Вот это архи-полезный урок!!!! Экономика должна быть экономной, надо беречь ресурсы сервера!

    Поделиться отзывом


    Ссылка на отзыв
    Артем Литвин

    круто, спасибо за урок!

    Поделиться отзывом


    Ссылка на отзыв
    Андрей А

    Любопытно.

    Поделиться отзывом


    Ссылка на отзыв
    Валерий1234

    Спасибо

    Поделиться отзывом


    Ссылка на отзыв
    gladir1

    Спасибо за урок. Классная функция, а главное все в одном месте прямо в программе.

    Поделиться отзывом


    Ссылка на отзыв
    Aspirantmiha

    Я уже столкнулся с такой проблемой, что сайт становится очень большим и грузится по пол минуты. Здорово, что в Muse есть такая функция. Спасибо за урок! Сегодня же пойду исправлять косяки

    Поделиться отзывом


    Ссылка на отзыв
    YanaZamkova

    здорово!

    Поделиться отзывом


    Ссылка на отзыв
    Sharovich

    Всё понятно. Это очень полезный урок. Оптимизация картинок приводит к уменьшению их размеров, а это благоприятно сказывается на скорости загрузки сайта. Чем быстрее откроется, тем лучше, особенно на мобильных устройствах. Спасибо.

    Поделиться отзывом


    Ссылка на отзыв
    Presniakoff

    Уже пробую. Оказывается все так просто

    Поделиться отзывом


    Ссылка на отзыв
    7dgoni6

    Понятно.

    Поделиться отзывом


    Ссылка на отзыв

×