Швидкість завантаження сторінки - дуже важливий фактор, що впливає на зручність використання і конверсію сторінки, тому, я вважаю, що необхідно робити хоча б найпростіші дії для зменшення впливу цього фактора.
Графіка нерідко є однією з найбільш «важких» складових web-сторінок з точки зору розміру даних. Це означає, що її розмір прямо впливає на швидкість завантаження сторінки. Впливає як обсяг переданих даних, так і кількість елементів (кількість запитів до сервера). Обидва ці значення бажано мінімізувати.
Мінімізація розмірів файлів із зображеннями
Зрозуміло, в залежності від зображення, слід підбирати найбільш підходящий формат.
Для багатобарвних складних зображень містять градієнти, наприклад, фотографій, в більшості випадків підійде JPEG з якістю «на око». Зазвичай я збільшую ступінь стиснення для кожного зображення до тих пір, поки не починають з'являтися помітні артефакти або колірні спотворення.
Для більш простих зображень, що містять великі області одного кольору (т.зв. «векторні зображення») або зображень з малою кількістю квітів краще використовувати PNG, тому що цей формат показує відмінні результати стиснення без спотворень. У разі ж, якщо потрібна прозорість, особливого вибору і немає: GIF, PNG. Перший я вважаю застарілим, тому завжди використовую PNG. У будь-якому випадку, ніколи не завадить провести порівняння і вибрати з цих двох варіантів найбільш оптимальний. У більшості випадків цих двох форматів вистачить.
Але це ще не все
Програми обробки зображень далеко не завжди мають на меті видати файл найменшого розміру. Вони додають до корисних даними різну метаінформацію, яку можна без наслідків видалити, і не завжди використовують найоптимальніші алгоритми. У багатьох випадках файли можна полегшити ще на 10-30%.
При бажанні в інтернеті можна знайти безліч різних оптимізаторів для кожного формату окремо. Це не завжди зручно, тому що їх потрібно перебирати і вишукувати кращий варіант.
Хочу розповісти про простому інструменті, який є «комбайном» і використовує відразу безліч різних утиліт, вибираючи найбільш ефективний варіант для кожного конкретного зображення. Будь-який набір графіки за допомогою нього можна оптимізувати в один клік.
програма FileOptimizer
Досить перетягнути необхідні файли і натиснути на кнопку «Optimize all files»
Представлений набір файлів був збережений за допомогою Photoshop, містить кілька великих фонових зображень і купу дрібних декоративних елементів.
Розмір файлів:
До оптимізації: 966 Кбайт
Після оптимізації: 800 Кбайт
Як видно на скріншоті, FileOptimizer дозволив заощадити 16% від обсягу всіх файлів проекту, що склало близько 166 Кбайт. По-моєму відмінна економія для одного кліка і пари хвилин очікування!
Завантажити програму FileOptimizer можна тут .
Наступним кроком клієнтської оптимізації може бути зменшення кількості запитів до сервера, за рахунок зменшення кількості файлів з зображеннями. Це можна зробити застосувавши техніку CSS-спрайтів. Якщо коротко, то зображення склеюються в одне або кілька великих зображень. Потрібна частина відображається за допомогою CSS-властивості background-position: XY;