Оптимизация изображений на сайте в Adobe Muse

Уроки и воркхаки для работы в Adobe Muse

Узнавать новости первым

Автор: Pro100Muse

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

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

ВАЖНО: ПЕРЕД ЛЮБЫМИ МАНИПУЛЯЦИЯМИ ПЕРЕСТРАХУЙТЕСЬ И СДЕЛАЙТЕ КОПИЮ ОРИГИНАЛЬНЫХ ФАЙЛОВ, ПУСТЬ ЛУЧШЕ БУДЕТ!

1) Формат и размер изображения

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

2) Еще раз про размер изображений

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

3) Сначала думаем, потом делаем

Тут ну никак не уместить все в 1 пункт, поэтому смотрим и разбираемся: 

Пример 1:

Пример №1

2 одинаковых изображения на сайте, но разница в 40%, почему? 

1 изображение - это png картинка с прозрачным фоном, а 2 - jpg с фоном заливки на заднем плане 

Отсюда правило: не используйте png и прозрачный фон там, где он не нужен 

Пример 2:

Пример №2

опять же, различие минимально, но вес меньше на 35% 

1 изображение - jpg с примененным к нему эффектом прозрачности в 50%, а 2ое - jpg, которое сохранено сразу с белым фоном на заднем плане и прозрачностью 50% 

Отсюда еще 1 правило: если есть возможность прозрачность сделать заранее в фотошопе - ее нужно делать заранее в фотошопе. 

Ну и по этому принципу думаю все понятно - в зависимости от положения изображения на сайте есть множество способов сделать их меньше по весу, не изменив при этом внешний вид 

4) Тени - это новое изображение

Как, собственно, и все эффекты (кроме прозрачности). Если вы добавляете к png картинке тень - знайте, что создается еще 1 изображение, которое будет весить совсем не мало. Лучше сделать это самому заранее (либо через css). 

5) Ширина шапки - максимум 1920 пикс

Давайте посмотрим на график разрешений экрана пользователей всемирной паутины

График популярности разрешений экрана

Как видите ширина экрана более 1920 пикс наблюдается только у 2% пользователей, соответственно использование картинок на всю ширину сайта более 1920 пикс не имеет никакого смысла. Тогда зачем заставлять посетителей скачивать лишние килобайты и тратить лишнее время на загрузку? 

6) Фон на сайте не должен тормозить весь сайт

Не используйте изображения 1920х1080 для фона, не нужно так делать. Фон - тот элемент, который должен грузиться мгновенно, а не загружать сайт! Ищите подходящие паттерны без швов и используйте их. Вот пару сайтов с паттернами: subtlepatterns.com , pattern4site.ru  

7) Сохраняйте изображения правильно

Уверен, что 90% из вас работают в фотошопе, в котором есть специальный метод сохранения для web изображений. Файл - Сохранить для web. Качество я обычно ставлю 65%, для меня это самый оптимальный вариант. 

8) Сжимайте изображения без потери качества

Некоторые, оказывается, даже не догадываются, что изображения можно уменьшить в весе, при этом не теряя качества. Выигрыш в среднем 7-10% веса, немного, но приятно. Как это делать c помощью программы FileOptimizer буквально в 3 действия я описывал в этой статье. Почему именно FileOptimizer - эта программа не показывает лучшие результаты, но зато она универсальна, т.е. жмет все форматы, и жмет хорошо, да к тому же еще и бесплатная.  

9) Прописывайте Alt к изображениям

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

Вместо эпилога:

Пара слов о качестве самих изображений. Многие, оказывается, не знают, что изображение "портится" не только при увеличении размера, но и при уменьшении. До меня это уже миллион раз расписывалось, поэтому не буду повторяться, а лишь поделюсь способом, как увеличить резкость изображений при уменьшении их размера. skitalets-san.livejournal.com вот тут все подробно расписано, как работает метод, как пользоваться и т.д. Автором данного этого экшена для фотошопа является Владимир Калюжный, за что ему большое спасибо от всех нас. 

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

Следите за обновлениями

Наша группа в ВК
Наш канал в Телеграмм
Наш бот в Телеграмм
Подписка на EMail рассылку
Канал на YouTube
Мы в twitter

Посмотрите так же

Цех оптимизатора
Цех оптимизатораmore_vert
Цех оптимизатораclose

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

Время работы
Время работыmore_vert
Время работыclose

Виджет отображает время работы на каждый день, при этом определяет и выводит дату и день недели

Посмотреть все виджетыВсе способы покупки