Змінення розміру та оптимізація в Інтернеті

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

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

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

Завжди змінюйте розмір зображень відповідно до розміру вмісту або відповідно до ширини вмісту. Наприклад, якщо область вашого вмісту обмежена 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% трохи кращі, ніж у двох інших. Урок тут такий: експортуйте свої jpg-зображення, як можна менше стискайте, ImageRecycle зробить все інше!

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

Залежно від веб-сайту, який ви використовуєте, однакові зображення можуть відображатися на різних сторінках різного розміру. Зазвичай це те, що ви знайдете в електронній комерції зі слайдером, списком продуктів, деталями продукту,...
Процес зміни розміру зазвичай виконується онлайн-бібліотекою php, як-от GD. Переконайтеся в якості та ваги ваших ORIGINAL та FINAL зображень користувачів. Не довіряйте онлайн-бібліотекам і генератору кешу, інакше у вас можуть виникнути проблеми з якістю та розміром. Якщо ваше вихідне зображення вже оптимізовано з вашого боку (шляхом точного налаштування між якістю, кольорами, стисненням), щоб заощадити пропускну здатність і завантаження сторінки, за допомогою деяких бібліотек для зміни розміру веб-розширень, ви можете втратити все це!

Рішення:

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

Що далі: HTML5 та the елемент

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

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

Витяг з коду:

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