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

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

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

Адаптуйте розмір відповідно до вмісту

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

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

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

Особливо це стосується PDF-файлу , уникайте надання PDF-файлу для читання в Інтернеті, що містить зображення з роздільною здатністю вище 72 dpi. У цьому випадку ImageRecycle PDF-файлу 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 і елемент

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

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

Витяг коду:

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