Блог Мудрого Кота
Советы и уроки для вебмастера, монетизация сайта и немного о SEO
Главная - Сайтостроение - Стоит ли оптимизировать изображения для сайта или блога?

Стоит ли оптимизировать изображения для сайта или блога?

Рано или поздно каждый вебмастер сталкивается с такой вещью, как оптимизация изображений для своего сайта.
Многие всё ещё не понимают в чём же плюсы оптимизации изображений, и сегодня я бы хотел рассказать об основных плюсах оптимизации изображений.
Итак, я нарисовал в Photoshop пример для нашей статьи, на котором мы рассмотрим основные плюсы оптимизации.
Пожалуй, начнём наш урок.

Для начала рассмотрим пример моего изображения:

Формат: .jpg;
Размер: 200х200;
Вес: 47,1 КБ;

Такое изображение будет грузиться долго (в загрузке сайта каждая секунда имеет значение).
Поэтому мы будем оптимизировать его под наш сайт.
Для этого мы будем использовать всё тот же Photoshop.
Для того чтобы оптимизировать данное изображение нам нужно всего лишь поменять формат с .jpg на .gif.
Для этого мы будем сохранять его при помощи пункта «Сохранить для web и устройств».
После того как мы это сделали, посмотрим на него, и его характеристики:

Формат: .gif;
Размер: 200х200;
Вес: 3,78 КБ;

Как видите, вес изображения значительно изменился.
Теперь оно будет загружаться намного быстрее.
Ну а теперь поставим на наше изображение «копирайт».

Примеры изображений с «копирайтом» вы можете посмотреть в этих статьях:

Как заработать на посещаемости сайта?
Как получить прямую ссылку на flash игру?
И т.д.

Отлично, «копирайт» поставили.
Ну а теперь будем оптимизировать изображение, которые мы скачаем из Интернета.
Для примера я решил использовать изображение огромного размера.
Я нашёл его на сайте с обоями для рабочего стола.
Изображение вы можете посмотреть по ссылке:

Ссылка на изображение

Его характеристики:
Формат: .jpg;
Размер: 1920×1200;
Вес: 977 Кб;
Как видите для моего сайта это изображение ну никак не подходит.
Оно затруднит загрузку и мало того оно даже на страницу не войдёт.
Самый подходящий размер изображений для моего сайта это:
566 px.
Я говорю про ширину.
Так как высота значения не имеет главное, чтобы графика не портилась.
Итак, загружаем данное изображение в Photoshop, корректируем его под нужную нам ширину и подгоняем высоту для более корректного отображения.
Сохраняем с форматом .gif.
И смотрим, что у нас получилось:

Теперь характеристики оптимизированного изображения:
Формат: .gif;
Размер: 566×354;
Вес: 108 Кб;

Чувствуете разницу?
Ставить «копирайт» на чужие изображения не рекомендуется, так как они всё-таки не ваши.
Но если вы будете корректировать его и добавлять новые объекты, то «копирайт» лишним не будет.
«Копирайт» служит для того, чтобы ваши изображения не украли.
Основные виды копирайта:

Лёгкий:

Средний

Жёсткий:

Ну, вот и всё, что я хотел сказать об оптимизации изображений.
Помни:
Оптимизируешь изображения? — Заботишься о пользователях!
Искренне ваш «Мудрый кот».

Подпишись и получай новые записи первым!

Подписаться вы можете с помощью или , но самый удобный способ это:

Ещё по теме:
Какие права на файлы и папки нужно поставить, чтобы не было беды (WordPress)
Блокнот убивает WordPress
Как добавить новые кнопки в WordPress
Отслеживаем неправильные (битые) ссылки при помощи плагина и избавляемся от них
Что делать если не работает загрузчик изображений в wordpress
Информация о статье:
Опубликовано: 11 августа 2011, в рубрику Сайтостроение.
Теги: .

Поделись статьёй с друзьями:

Оставляя комментарий - вы автоматически принимаете участие в конкурсе комментаторов, и имеете возможность выиграть очень, классные призы!
I место - Сквозняк!
II место - Заметка!
III место - 200 Рублей!
Подробнее о конкурсе тут.

Оставь коммент, не будь бякой!

  • NMitra
    11.01.2012

    Я в PNG перебрасываю. Чересстрочный. Можно в Фотошопе убрать лишние цвета, для глаза это не заметно. Получилось 2,12 КБ

    [Ответить]



:wink: :twisted: :roll: :oops: :lol: :evil: :cry: :arrow: :?: :-| :-x :-o :-P :-D :-? :) :( :!: 8-O 8)

*


Подпишись на обновления блога:

RSS    twitter    e-mail


124 подписчика

98 фолловеров


Подробно:

Как создать сайт с онлайн фильмами
Как создать сайт с онлайн фильмами
Создание

Раскрутка

Монетизация



Как создать шаблон и дизайн для сайта
Как создать шаблон и дизайн для сайта
Макет

Разметка

Вёрстка


  • Лучшее
  • Советую
  • Новое

Я читаю:

Записки ночного блогера
Blogger.omg-linux