У цій статті я поясню як оптимізувати зображення для Інтернету -. З чого воно складається? Що ж, пристосовуючи розмір кожного зображення до розміру нашого веб-сайту (зараз ми побачимо, що це) і зменшуючи його роздільну здатність до що зображення "важить" менше. Тобто зменшіть його розмір у пікселях та в байтах. Тепер, коли ми це зрозуміли, Підемо до безладу!

Розмір зображень впливає на швидкість та позиціонування нашого веб-сайту

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

У цій статті мого друга Хесуса А.Ф. ви можете знайти інструменти та поради, які допоможуть вам покращити швидкість вашого веб-сайту.

Час завантаження зображення в основному залежить від двох факторів:

  • Розмір зображення в байтах. Цей розмір тим більший, чим більше зображення (у пікселях) і чим вища роздільна здатність (у крапках на дюйм або dpi).
  • Якщо розмір у пікселях (ширина та висота) точно відповідає контейнеру зображення

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

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

  1. більший розмір в байтах робить завантаження браузера займає більше часу. Тоді ми побачимо конкретні цифри, про які ми говоримо.
  2. Якщо він розмір зображення в пікселях (ширина та висота) зображення не відповідає елементу, що його містить, браузер користувача (будь то Internet Explorer, Mozilla Firefox, Google Chrome, Safari, Opera чи будь-який інший) повинен буде зробити розрахунки, щоб зменшити розмір зображення та правильно його відобразити. Це перетворюється на час процесу, який змушує показ нашого веб-сайту тривати довше.

Як оптимізувати зображення для Інтернету

Ми можемо використовувати безліч інструменти для зміни розміру та параметрів роздільної здатності зображення, але завдяки розмові у Facebook я виявив чудовий інструмент, який називається FastStone Resizer.

Ця проста програма дозволяє дуже просто оптимізувати зображення для Інтернету. І це також дозволяє пакетну роботу, тобто застосовуючи однакові налаштування до кількох зображень одночасно.

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

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

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

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

Як дізнатись розмір контейнера зображення на нашому веб-сайті

З дозволу Офелії Гарсії дель Кастільо я взяв за зразок кілька зображень з її блогу (http://castillomendia.blogspot.com.es/). Також тут ви маєте їхню сторінку фан-сторінок у Facebook, а тут (http://www.castillomendiamadrid.com/) - їх веб-сайт та Інтернет-магазин.

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

розмір

Якщо ми клацнемо правою кнопкою на зображення Інтернету і виберемо опцію "Перевірити елемент", Ми можемо отримати доступ до HTML-коду. Ви можете натиснути на зображення, щоб побачити його в оригінальному розмірі.

На наступному скріншоті ми це бачимо фактичний розмір зображення (1200 пікселів х 899 пікселів) та той, який ми бачимо в Інтернеті (320 пікселів х 239 пікселів), не збігаються. Ви можете натиснути на зображення, щоб побачити його в оригінальному розмірі.

І які наслідки це має на нашому веб-сайті?

Той факт, що він не збігається фактичний розмір зображення та розмір, з яким він з’являється в Інтернеті карає нас в очах Google.

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

Тепер, коли ми знаємо, чого хочемо, давайте це зробимо

Використання інструменту ретушування FastStone Resizer ми зменшимо розмір наших зображень поки це не влаштовує до розміру, який ми побачимо в Інтернеті.

Виберіть зображення, які ми хочемо зменшити

Після того, як програма відкрита, першим кроком є ​​вибір зображень, які ми хочемо ретушувати.

Ми повинні пам’ятати, що зображення, які потрібно ретушувати, мають бути на нашому комп’ютері.

За допомогою цієї програми ми не можемо редагувати зображення, які вже є на нашому веб-сайті.

Використання кнопок "Додати"Y"Додати все”Ми можемо вибрати фотографії одну за одною або всі одночасно.

Не можна забувати і вибрати вихідний шлях (де вони будуть збережені) за допомогою кнопки "Перегляньте".

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

На даний момент ми можемо змінити формат вихідного зображення серед найбільш використовуваних, таких як JPG, але ми можемо вибрати інші, такі як PNG і навіть BMP (не рекомендується 😉). Насправді Хоакін Віллалон Браво з "Соціальних істот" рекомендував використовувати формат PNG.

Наступним кроком є ​​натискання кнопки "Розширені опції”Повідомте програмі, який розмір та роздільну здатність ми хочемо для наших зображень. Ви можете натиснути на зображення, щоб побачити його в оригінальному розмірі.

Вкажіть ширину для наших зображень

У вікні, яке відкриється при натисканні на "Розширені опції"Спочатку потрібно вибрати вкладку"Змінити розмір".

Тут ми маємо кілька можливостей.

  • Ми можемо обирати змінити ширину та висоту зображення
  • Ми можемо обирати змінити розмір залежно від ширини або висоти, а інша сторона обчислюється автоматично. Якщо ми збираємось налаштувати зображення на повний стовпець (найпоширеніший), це буде вибір. Наприклад, для мого веб-сайту ця ширина становить близько 795 пікселів. Висота байдужа, оскільки зображення можна розширити вниз без серйозних проблем з регулюванням.

Ви можете натиснути на зображення, щоб побачити його в оригінальному розмірі.

Вкажіть крапки на дюйм (dpi/dpi) для наших зображень

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

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

Наскільки ми зменшили свої зображення? Ну, багато, багато

Нарешті, після натискання кнопки “Гаразд"І"Перетворити", Програма починає конвертувати.

По закінченню ми можемо побачити в резюме вихідний розмір, остаточний розмір, відсоток відносно початкового розміру та КБ, який ми зберігаємо. Ви можете натиснути на зображення, щоб побачити його в оригінальному розмірі.

Як бачите, цей відсоток коливається від 2 до 10% порівняно з початковим розміром.

Це означає, що фотографія розміром 1 МБ (приблизно 1000 КБ) зменшена до 20-100 КБ.

І це багато КБ і багато часу, який ми отримали, завантажуючи наш веб-сайт.

Як побачити зображення, яке ми зменшили до початкового розміру

До цього моменту ми вказали, як зменшити зображення, яке відображається в Інтернеті, але Щоб відобразити зображення в оригінальному розмірі та у високій якості, ми повинні зв’язати велике зображення з малим так що, натискаючи на останню, вона показує нам зображення у всьому його блиску. Крім того, варто пам’ятати, що ми повинні включити атрибут target = "_ blank", щоб він відкривав зображення в новому вікні.

Будь-яка пропозиція? І якщо вам сподобалось, поділіться!

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