Оптимізація розмірів зображень при верстці web-сторінок

  1. Мінімізація розмірів файлів із зображеннями
  2. Але це ще не все
  3. програма FileOptimizer

Швидкість завантаження сторінки - дуже важливий фактор, що впливає на зручність використання і конверсію сторінки, тому, я вважаю, що необхідно робити хоча б найпростіші дії для зменшення впливу цього фактора

Швидкість завантаження сторінки - дуже важливий фактор, що впливає на зручність використання і конверсію сторінки, тому, я вважаю, що необхідно робити хоча б найпростіші дії для зменшення впливу цього фактора.

Графіка нерідко є однією з найбільш «важких» складових web-сторінок з точки зору розміру даних. Це означає, що її розмір прямо впливає на швидкість завантаження сторінки. Впливає як обсяг переданих даних, так і кількість елементів (кількість запитів до сервера). Обидва ці значення бажано мінімізувати.

Мінімізація розмірів файлів із зображеннями

Зрозуміло, в залежності від зображення, слід підбирати найбільш підходящий формат.

Для багатобарвних складних зображень містять градієнти, наприклад, фотографій, в більшості випадків підійде JPEG з якістю «на око». Зазвичай я збільшую ступінь стиснення для кожного зображення до тих пір, поки не починають з'являтися помітні артефакти або колірні спотворення.

Для більш простих зображень, що містять великі області одного кольору (т.зв. «векторні зображення») або зображень з малою кількістю квітів краще використовувати PNG, тому що цей формат показує відмінні результати стиснення без спотворень. У разі ж, якщо потрібна прозорість, особливого вибору і немає: GIF, PNG. Перший я вважаю застарілим, тому завжди використовую PNG. У будь-якому випадку, ніколи не завадить провести порівняння і вибрати з цих двох варіантів найбільш оптимальний. У більшості випадків цих двох форматів вистачить.

Але це ще не все

Програми обробки зображень далеко не завжди мають на меті видати файл найменшого розміру. Вони додають до корисних даними різну метаінформацію, яку можна без наслідків видалити, і не завжди використовують найоптимальніші алгоритми. У багатьох випадках файли можна полегшити ще на 10-30%.

При бажанні в інтернеті можна знайти безліч різних оптимізаторів для кожного формату окремо. Це не завжди зручно, тому що їх потрібно перебирати і вишукувати кращий варіант.

Хочу розповісти про простому інструменті, який є «комбайном» і використовує відразу безліч різних утиліт, вибираючи найбільш ефективний варіант для кожного конкретного зображення. Будь-який набір графіки за допомогою нього можна оптимізувати в один клік.

програма FileOptimizer

програма FileOptimizer

Досить перетягнути необхідні файли і натиснути на кнопку «Optimize all files»

Представлений набір файлів був збережений за допомогою Photoshop, містить кілька великих фонових зображень і купу дрібних декоративних елементів.

Розмір файлів:
До оптимізації: 966 Кбайт
Після оптимізації: 800 Кбайт

Як видно на скріншоті, FileOptimizer дозволив заощадити 16% від обсягу всіх файлів проекту, що склало близько 166 Кбайт. По-моєму відмінна економія для одного кліка і пари хвилин очікування!

Завантажити програму FileOptimizer можна тут .

Наступним кроком клієнтської оптимізації може бути зменшення кількості запитів до сервера, за рахунок зменшення кількості файлів з зображеннями. Це можна зробити застосувавши техніку CSS-спрайтів. Якщо коротко, то зображення склеюються в одне або кілька великих зображень. Потрібна частина відображається за допомогою CSS-властивості background-position: XY;

Меню сайта
Мини-профиль
  • Регистрация Напомнить пароль?

    Бесплатно можно смотреть фильмы онлайн и не забудьте о шаблоны dle на нашем ресурсе фильмы бесплатно скачать c лучшего сайта
    Опросы
    Топ новости
    Инструкция: как включить подсветку клавиатуры на ноутбуке Asus


    Заблокировалась и отключилась встроенная клавиатура на ноутбуке: как снять блокировку и включить? 


    Ремонт ноутбука ASUS N75S в Санкт-Петербурге (СПб): замена дисплея, замена клавиатуры, ремонт корпуса Асус N75S, замена матрицы
    Услуга Стоимость, руб. Диагностика ASUS N75S Бесплатно (500р при необходимости разбора) Профилактические работы с системой охлаждения + замена кулера 2500 р * Замена чипа (видеочипа) ASUS N75S 6000-6500 Замена

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

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

    Как почистить клавиатуру компьютера
    С появлением компьютера человек все больше времени проводит за ним. Это и рабочий инструмент, и средство развлечения. Поэтому, совсем неудивительно, что определенные устройства, используемые для ввода

    Замена и ремонт клавиатуры для ноутбука, видео-инструкции
    Замена клавиатуры и кнопок ноутбука показано на видео с подробным объяснением процесса. Цена замены в сервисном центре от 200 рублей . Звоните по тел: +7 (812) 640-03-20 . Замена или ремонт

    4 способа, как отключить клавиатуру на ноутбуке
    Если у вас есть ноутбук, то клавиатура и тачпад на нем являются важными составляющими, без которых работа на устройстве будет вызывать сложности. Конечно есть альтернативы в виде клавиатур и мышей, которые

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

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