Оптимальні розміри картинок і фотографій для використання на сайтах, зміна розміру і ваги

Оптимальні розміри картинок і фотографій для використання на сайтах, зміна розміру і ваги

Цифрові зображення мають свої розміри і вага. Наприклад, стандартне фото хорошої якості в форматі JPEG може важити 5 MB мега байт і мати розміри 4200х2800 px пікселів ширини і висоти. Стандартне ж дозвіл монітора теж вважається в пікселях. Найпопулярніші розміри - це 1024x768, 1152x864, 1280х960.

Тепер, якщо зіставити дозвіл монітора 1024х768 і розмір картинки 4200х2800, то стає очевидним, що вона більш ніж в 2 рази ширше самого монітора, а значить браузер (Опера, мозила тощо) буде стискати картинку до потрібних йому розмірів, або з'являться повзунки, і доведеться прокручувати її. Залежить від установок сайту. До того ж зміняться тільки видимі розміри картинки.
Ми, звичайно, можемо впіхать в наш сайт подібні габарити, але такі фото займають багато місця на хості тому важать багато. До того ж гальмують браузери і комп'ютер відвідувачів. Все це добро надзвичайно довго відкривається, що відлякує чималу частину відвідувачів. Я, наприклад, довго прогружаются сайти закриваю і Гугл далі.

Як дізнатися оптимальний розмір картинки для тієї чи іншої статті?

В принципі можна і на око, якщо розмір монітора 1024х768, то візьмемо приблизні розміри поля браузера і віднімемо з розміру монітора. Поля сайту теж віднімемо, то отримаємо приблизно 900х700 + - px тобто, фото можна сміливо зменшувати до таких розмірів. А взагалі 600х400 саме воно.

Якщо ви хочете помістити картинку в певне місце на сайті, визначених розмірів, то можна взяти спец. інструмент для веб дізаінеров - лінійка (наприклад mySize) і прям в браузері поміряти місце, куди ви хочете вставити картинку. Це потрібно для того, щоб подивитися пропорції, і якщо треба підрізати фотографію, щоб її НЕ сплюснуло.

Змінити розміри і вага фото можна в фотошопі.

Розмір змінюємо таким чином. Image (Зображення) - Image Size - У полях width і height ставимо потрібні значення в пікселях, і в поле нижче constrain proportions (зберігати пропорції) ставимо галочку. Скрін нижче.

Змінюючи вагу, ми змінюємо якість зображення. Наприклад з 5мb можна сміливо опускати якість до 50-200 кв, і на моніторі це буде не помітно. На деяких картинках і при 15кв особливо не помітні погіршення. Зате місця займають в десятки разів менше. Зліва картинка стисла - 500х630 26,7кб, праворуч немає - 1269х1600 1.35Мб. Вийшло в 6 разів менше. Якщо не чіплятися, то і не помітно.

Як змінити вагу фото або картинки? Все просто. Змінюється вага в фотошопі декількома шляхами. 1) Просто змінити розмір image- image size і якщо недостатньо зменшити. 2) File - Save for web devices. З'явиться віконце з установками параметрів, у верхньому правому буде повзунок Quality (якість). в нижньому лівому показник ваги картинки. Якості ставите Low - низький. стежте на скільки зменшується вага і возюкаете повзунок до потрібного значення. Скрін нижче.

Або можна таким чином. File - save as - з'явиться список форматів, виберіть наприклад Jpeg далі тиснемо "зберегти", з'явиться віконце JPEG options. Там у віконці image option буде повзунок, переміщаючи його побачите праворуч цифри - скільки важить.

Ще один спосіб стиснути картинку разліцних форматів - це спеціальні сайти, веб сервіси наприклад ось tinypng. com