Перед початком
Працюйте з копією. Для фотографії 4000 × 3000 px, яку показуватимуть завширшки 800 CSS-пікселів, підготуйте варіанти 800 і 1600 px. Більший стане в пригоді екранам із високою щільністю, але його не потрібно завантажувати кожному відвідувачу.
Текстове пояснення схеми
4000 × 3000 → 1600 × 1200 → 800 × 600. Зменшення з 4000 × 3000 до 1600 × 1200 скорочує кількість пікселів із 12 млн до 1,92 млн — на 84%. Файл не обов’язково стане меншим рівно на 84%: це залежить від вмісту й кодування.
Як зробити
- Відкрийте Image → Image Size. Увімкніть зв’язок сторін і Resample, якщо змінюєте кількість пікселів. За ширини 1600 px фотографія з пропорцією 4:3 матиме висоту 1200 px.
- Збережіть робочий документ окремо, потім експортуйте копію для сайту. Для фото почніть із JPEG або WebP. Порівнюйте якість у масштабі 100%, особливо волосся, літери й тонкі лінії.
- Відкрийте експортований файл знову. Перевірте розміри, колір, різкість і фактичну вагу. Під’єднайте варіанти через srcset і задайте width/height, щоб браузер зарезервував місце.
<img src="photo-800.jpg" srcset="photo-800.jpg 800w, photo-1600.jpg 1600w" sizes="(max-width: 800px) 100vw, 800px" width="1600" height="1200" alt="Описание фотографии">Розгляньмо приклад
Зменшення з 4000 × 3000 до 1600 × 1200 скорочує кількість пікселів із 12 млн до 1,92 млн — на 84%. Файл не обов’язково стане меншим рівно на 84%: це залежить від вмісту й кодування.
Перевірте результат
Перевірте вузький екран і дисплей високої щільності. У Network подивіться, який файл справді вибрав браузер. Мініатюри редактора недостатньо для оцінювання експорту.
Де легко помилитися
Зміна 300 ppi на 72 ppi без перерахунку пікселів не зменшує вебзображення. PPI пов’язує пікселі з друкованим розміром; для браузера передусім важливі піксельні розміри.
Джерела й продовження
Схема й приклади: редакція Web Article. Схема пояснює принцип і не є знімком інтерфейсу або результатом випробування програми.