Зміна розміру та оптимізація зображень онлайн

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

Нижче наведено кілька рекомендацій щодо зміни розміру зображення, які будуть вам корисними.

Адаптуйте розмір відповідно до вашого контенту

Завжди змінюйте розмір зображень відповідно до розміру контенту або ширини контенту. Наприклад, якщо область вашого контенту обмежена 650 пікселями завширшки, то немає жодної вимоги розмір зображення перевищувати 650 пікселів, оскільки ваша сторінка відображатиме лише до 650 пікселів. Якщо властивість розміру зображення менша або більша за контейнер, якість відображення погіршиться.

Адаптуйте роздільну здатність зображення для веб-сторінок

У жодному контурі веб-сайту не буде жодного враження «на дюйм». PPI, тобто пікселі на дюйм, та DPI, тобто точки на дюйм, не мають жодного значення, коли ви редагуєте або змінюєте розмір зображення для будь-яких цілей, таких як надсилання електронною поштою, блог або поширення в соціальних мережах. За винятком друку, відображення на екрані, ви не зможете побачити жодної різниці у характеристиках чи якості зображення.

Це особливо стосується PDF-файлів , уникайте надання доступних для читання в Інтернеті PDF-файлів, які містять зображення з роздільною здатністю вище 72 dpi. У цьому випадку ImageRecycle , оптимізувавши PDF із зображеннями 300 dpi всередині, ви можете заощадити 98% розміру PDF-файлу з ідеальною якістю для читання в Інтернеті.

Найкраща якість експорту JPG з ImageRecycle

Використовуючи Photoshop, рекомендація для веб-сайтів полягає в тому, щоб зберігати зображення JPEG з максимальним ступенем стиснення 20%. Ви також можете провести деякі тести з різними параметрами JPEG, які найкраще підходять для вас. Застосування глобального стиснення – це питання балансу між розміром та якістю.

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

Майте на увазі: чим менше стиснене оригінальне зображення, тим краща буде оптимізація та розмір.

У наведеному нижче прикладі я експортував 4 зображення jpg за допомогою Photoshop з рівнем якості: 60% | 80% | 90% | 100%.
Потім я оптимізував зображення за допомогою ImageRecycle , ось результат розміру. Щодо якості, то 90/100% трохи кращі, ніж 2 інші. Висновок такий: експортуйте свої зображення jpg якомога менш стиснутими, ImageRecycle зробить все інше!

Оптимізуйте кінцеві зображення

Залежно від веб-сайту, який ви використовуєте, одні й ті ж зображення можуть відображатися на різних сторінках різних розмірів. Зазвичай це можна знайти в інтернет-магазинах зі слайдером, списках товарів, деталях товарів тощо.
Процес зміни розміру зазвичай виконується онлайн-бібліотекою PHP, такою як GD. Переконайтеся, що якість та вагу ваших ОРИГІНАЛЬНИХ та ФІНАЛЬНИХ зображень користувачів відповідає якості. Не довіряйте онлайн-бібліотекам та генераторам кешу, інакше у вас можуть виникнути проблеми з якістю та розміром. Якщо ваше оригінальне зображення вже оптимізовано на вашому боці (шляхом точного налаштування якості, кольорів, стиснення) для економії пропускної здатності та завантаження сторінки, то з деякими бібліотеками зміни розміру веб-розширень ви можете втратити все це!

Рішення:

• Застосуйте оптимізацію до зображення, яке відображається у вашому кінцевому клієнтському браузері. Ви можете зробити це вручну для кожного зображення та для кожного розміру або скористатися нашим API чи розширенням CMS ImageRecycle , щоб вибрати папку, де зберігаються ваші кінцеві зображення. Потім запустіть автоматичну оптимізацію.
• Використовуйте наш інструмент зміни розміру для оригінальних зображень. Ви можете заощадити місце на сервері, швидше маніпулювати зображеннями, і зазвичай вам не потрібні зображення шириною більше 1600 пікселів на кінцевому екрані

Що далі: HTML5 та<picture> елемент

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

The<picture> Елемент HTML5 намагається вирішити цю проблему. Перевагою власно оптимізованого ресурсу зображень є час завантаження, що особливо важливо для користувачів з повільнішим мобільним інтернет-з’єднанням.<picture> роблять можливою справжню динамічну зміну розміру, просто надавши браузеру HTML-інструкцію.

Уривок коду:

Обмеження на даний момент полягає в тому, що для належної роботи потрібна найновіша версія Chrome (39) та деякий JS. У найближчому майбутньому, завдяки поєднанню цієї технології з оптимізатором зображень, ми можемо очікувати найкращого часу завантаження веб-сайту.