Оптимизация веб-графики

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

Пример 1. Исходный размер изображения из файла Ка­федральный co6op.jpg составляет 2304x3072 пикселя, размер файла — 2,68 Мб. Уменьшите размер изображения до 300x400 пикселей. Сохраните изображение для Web и устройств, определите размер полученного файла.

1. Откройте программу Adobe Photoshop.

2. Загрузите изображение Кафедральный co6op.jpg.

3. В строке меню выберите команду: Image ► Image Size (Изображение ► Размер изображения). В окне Размер изображения установите значение Width (Ширина) 300 пикселей. Значение Height (Высота) изменится пропорционально.

4. Выполните команду File ► Save for web (Файл ► Сохранить для Web и устройств). В появившемся окне на вкладке 4-up (4 варианта) получаем четыре изображения, одно из которых — оригинал, а три других можно изменять настройками (рис.).

5. В поле Settings (Настройки) выберите вариант JPG, сразу под ним станут доступны в нижнем окошке варианты показателей качества: Low (Низкое), Medium (Среднее), High (Высокое) и т. д. Перебирая эти варианты, следите за изменением объема файла. Стремитесь к максимальному уменьшению файла, но при этом качество изображения должно оставаться приемлемым.

6. Выберите подходящее качество и нажмите Save (Сохранить). Сохраните оптимизированное изображение в вашей рабочей папке.

7. Определите размер получившегося изображения.

Пример 2. Откорректируйте изображение из файла Кафедральный co6op.jpg, удалив с переднего плана изображения фигур случайных прохожих.

1. Откройте в программе Adobe Photoshop оптимизированное изображение из файла Кафедральный co6op.jpg.

2. Выберите инструмент Рамка Crop (Кадрировать) на панели инструментов. По краям фотографии появятся границы кадра.

3. Нарисуйте новую область кадрирования. Зона будущей обрезки будет затемнена (рис.).

4. Чтобы выполнить кадрирование, нажмите клавишу Enter. Изображение обрежется по контуру.

5. Сохраните изображение в вашей рабочей папке.

Пример 3. Оптимизируйте изображение из файла Пожарная каланча.jpg.

1. В программе Adobe Photoshop загрузите файл Пожарная каланча.jpg.

2. Выделите из фотографии изображение пожарной каланчи, обрезав изображения рядом стоящих домов (рис.).

3. Установите ширину изображения 200 пикселей при включенном флажке Сохранить пропорции.

4. Сохраните изображение в вашей рабочей папке, выполнив команду File ► Save for web (Файл ► Сохранить для Web и устройств), выбрав средний показатель качества.