Old

Про оптимизацию изображений

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

На хабре нашла отличную статью по оптимизации загрузки страниц, в которой была ссылка на Smush.it. Загружаете картинку, ждете, на выходе оптимизированый размер, от 15 до 40% меньше объем оригинала. Т. к. фотошоп даже при safe for web прописывает экзифы, копирайты, а этот сервис вычищает даже такую мелочь. Для сайтов на вордпрессе есть одноименный плагин. Для винды — PictureBeaver, для мака — Image Optim. В посте на хабре есть еще 20 разных прог, на любой вкус.

Кстати, еще интересное наблюдение, фон у меня градиентный, сохранен джепегом в 370 кб. Треть мегабайта для картинки это многовато, решила задрочиться и свести хотя бы до сотни. Если сохранять джепегом в процентах, то уже при 60% видны заметные артефакты. В итоге проблему решила гифом в 4 (!) цвета, которая практически не отличалась от первоночального джепега. В итоге бэкграунд в 1500 пх вышел размером 113 кб и с отличной глубиной цвета. Такой прием работает далеко не всегда, но когда размер критичен, можно и в гиф сохранять. Кстати, тем кому важно отображение сайтов на ИЕ, хочу заметить, что пнг-24 там отображается с черным фоном, гиф в 256 цветов решает эту проблему. Мы делали редиректы, для юзеров с ИЕ подгружали гифы, для нормальных юзеров — пнг.

И да, всегда прописывайте картинкам альты.

You Might Also Like