Самый эффективный техпроцесс для достижения ТОП 1 в Google в 2024 году Получить
logo
💥SEO-продвижение под Google в любых тематиках
💥Вывод в ТОП 1-3 от 1 недели👇
💥https://t.me/AleksSergienkoSEO
👉 Или свяжитесь со мной через форму обратной связи.
 

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

Как оптимизировать изображения для сайта

Здравствуйте, друзья! Давненько я не писал, но на то свои причины, не лень уж точно. В общем оптимизирую свой блог по полной программе и до написания статей руки не доходят.  Вот я и решил вам написать статейку, как оптимизировать изображения для сайта вордпресс правильно и зачем это вообще нужно.

Оптимизация картинок просто необходима вашему сайту! Вот посмотрите, что у меня было до оптимизации:

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

Зайдите к себе на хостинг, либо через Total Commander или Filezilla откройте папку на своём сайте wp-content/uploads и сравните со скриншотом. Если у вас тоже самое, то читайте дальше.

То есть, мы видим, что одна  та же картинка копировалась  несколько раз в разных расширениях. Эти изображения вообще не нужны, они только занимают лишнее место и тормозят блог при загрузке. А это плохо, так как поисковиками учитывается время загрузки сайта при ранжировании.

А размер? Посмотрите на размер картинок, что вы там видите? Сколько кб одна, 100, 200, а быть может все 300 кб? Если у вас такие цифры, то срочно проводите оптимизацию картинок, уменьшайте их вес, ведь чем больше вес картинок, тем дольше грузится сайт, и соответственно, меньше вероятность попадания в заветный ТОП.

Но прежде чем говорить о том, как нам избавиться от всего этого мусора и как уменьшить размер картинок без потери качества, нам нужно для начала предотвратить размножение картинок, а между прочим, при добавлении на хостинг картинки, она копируется 3 раза!

Как предотвратить размножение картинок

Итак, чтобы предотвратить размножение картинок необходимо:

  1. Навести курсор в административной панели сайта на «Настройки» —>»Медиафайлы«;
  2. Во всех размерах изображений поставить нуль; также необходимо убрать галочку «Обрезать миниатюру точно по размерам«.

Предотвращение копирования картинок

Ладно, с этим разобрались. Поехали дальше.

Как оптимизировать картинки на сайте

Для начала вам необходимо удалить все картинки с расширением 150х150, 170х170 и т.д.

Это делается так:

  1. Либо вы заходите на свой хостинг и скачиваете папку uploads, либо пользуетесь Total Commander и переносите эту папку к себе на компьютер. Второй вариант попроще будет на мой взгляд;
  2. Далее удаляете все файлы с указанным выше расширением. Эти файлы будут иметь названия, в которых будут указано соответствующее расширение, вот их и удаляете.

Теперь нам нужно уменьшить размер картинок. Для этого воспользуемся программой Adobe Photoshop CS3 либо аналогичную более поздней версии.

Выполняем следующие действия:

1. Открываем программу;

2. Нажимаем «Файл»—>»Открыть«:

Открытие файла через фотошоп

3. Выбираем необходимый файл с большим размером:

Выбор файла

4. Далее нажимаем «Файл«—> «Сохранить для веб-устройств«:

Оптимизация изображения

5. После этого выбираем необходимый качество после оптимизации (40 для jpeg) и нажимаем кнопку «Сохранить«:

Выбор размера оптимизированного файла

6. Смотрим размер файла после оптимизации:

Результат оптимизации

Вес картинки уменьшился на 170 кб! Неплохо, да?! При этом качество изображения не изменилось.

И последний пункт для вышеперечисленных операций — это удаление старой папки uploads и закачки новой, с оптимизированными картинками на хостинг.

 Ну вот и всё, теперь скорость загрузки страниц вашего сайта должна увеличиться.

Кстати, я так и не отправил денежный приз в размере 150р. Его выиграл в нелёгкой схватке Юрий Жук, набрав 61 комментарий против 60 комментариев Александра. Поздравляю, Юрия!

Новость №1

Как я уже сказал, я начал оптимизацию своего блога, и она уже даёт свои первые плоды. Трафик с поисковых систем увеличивается понемногу, о том как я это сделал — буду писать в следующих статьях.

Новость №2

На прошлой недели ездил поступать в аспирантуру. Короче, приехал и узнал, что на следующий день нужно экзамен уже сдавать :) . Я у них на сайте прочитал, что экзамены с 25 июля по 25 августа, а оказывается с 15 июля по 25 июля. Пока сдал реферат по научной работе, нашёл руководителя-ушёл 1 день. Экзамен был по-английскому и я его сдал на 3. Но этого для поступления мало! Всего 2 бюджетных места и многие имеют научные работы, которые при равных оценках дают преимущество.

В общем на другой экзамен я не пошёл. Я понял, что сейчас не готов, да ещё суды эти… Об этом я позже расскажу, в одной из статей. В общем  нужно отдохнуть, что ещё дополнительная нагрузка тяжело поддастся мне, перенёс всё это дело планово на следующий год.

Ну вот и всё, что я хотел вам сказать. Всем пока!

А вы уже подписаны на обновления блога?

С Вами был Александр Сергиенко, автор блога int-net-partner.ru

Alexandr-Sergienko

Читай этот блог и ты узнаешь много полезного! Читай и ты!
Поделитесь с друзьями:
Комментарии пользователей ( 69)
  1. Артём Черкасов
    в 19:47

    Это очень важная тема, у многих ребят из-за этого на хостинге место заканчивается =)

    Ответить
    • Александр Сергиенко
      в 17:05

      Это факт!

      Ответить
  2. Антон Холкин
    в 15:02

    Спасибо за статью. очень полезная информация. добавлю, что для пакетной обработки файлов удобно использовать программу ACDsee pro.

    Ответить
    • Александр Сергиенко
      в 17:10

      И Вам спасибо, посмотрю эту программу.

      Ответить
  3. Николай
    в 16:42

    Актуальная тема, порою приходится слегка принебречь качеством картинки, зато скорость загрузки страниц остается на уровне. Я фотки сохраняю размером до 50 кВ

    Ответить
  4. Валентина
    в 21:44

    Александр! Как хорошо, что ты написал эту статью. Вот я даже и не думала, что картинки так возрастают в количестве. И зачем это все делается? Спасибо, пойду настраивать их, как ты рассказал. Только вопрос: а как быть с теми, что уже опубликованы? Или они автоматически все придут в норму при налаживании настройки?

    Ответить
    • Александр Сергиенко
      в 17:26

      В статье я написал, что нужно сделать.

      Ответить
  5. Валентина
    в 02:43

    Александр, что-то не так с твоими советами. Я обрадовалась, что избавлюсь от многих копий ненужных и сделала все, как ты написал. Везде вместо цифр поставила 0, убрала галочку с обрезать миниатюру. Сохранила изменения. Просмотрела и чуть не грохнулась: там, где всегда были в конце поста в схожие статьи, вместо миниатюр выстроиллся какой-то непонятный забор из начальных слов названий статей. Я быстрее возвратилась, поставила опять галочку с обрезанием миниатюр, но оно все не возвращается на место. А цифры я возвратить не могу, я же их не помню. Я так поверила тебе, что не записала их на всякий случай. Понимаешь, здесь перепутать что-то я просто не могла. Несколько простых понятных операций. Саша, что мне делать? Подскажи, пожалуйста.

    Ответить
    • Александр Сергиенко
      в 18:00

      Так Вы плагин вывода похожих статей отключите и всё будет нормально. Сейчас у Вас посмотрел, всё в порядке.

      Ответить
  6. Валентина
    в 20:41

    Александр, не все в порядке. Ты смотрел на блоге, я и сама удивилась, почему это так. В админке, там где у меня сохраняются все мои записи, все похожие записи, которые делаются автоматически, теперь без миниатюр, а просто, как дровишки наложены одна на другую, только стоя. Что делать? я в отчаянии. Если я уберу плагин вывода похожих статей, и что будет нормально? Они все не будут им выводиться и мне что-то нужно будет что-то придумывать самой? И почему тут все нормально, а в админке нет? Как мне все это восстановить?

    Ответить
    • Александр Сергиенко
      в 15:52

      Ну так и должно быть, Вы же убрали миниатюры, поставили 0 везде! Отключите плагин вывода миниатюр и всё.

      Ответить
  7. Валентина
    в 03:14

    Александр, я все время с ужасом заглядываю на мой блог, не появится ли такое безобразие, как в посте в админке, некоторые изменения, как я поняла, происходят постепенно. Ну и вот. Посмотри теперь и ты. Последний пост мой, Урок 29. Точно такая картина, как в том варианте, что в админке. Саша, что мне делать? Как вернуть мне все назад? Я же цифр не помню, которые заменяла 0? Подскажи, пожалуйста, я же абсолютный чайник, сама не разберусь.

    Ответить
  8. Андрей Назыров
    в 23:51

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

    Ответить
  9. Денис
    в 23:53

    Вот как не используемые картинки в разных размерах тормозят сайт?

    Ответить
    • Александр Сергиенко
      в 15:53

      Именно так, Денис!

      Ответить
      • Denis
        в 09:00

        Но они же не подгружаются в сам сайт? Не вижу логики.

        Ответить
        • Tkalexs-bloger
          в 09:24

          Логика в том, что создаются не нужные дубли картинок. Может сейчас у кого то они не несут нагрузку на сайт. Но со временем будет столько не нужных картинок, и объём может дойти до 100 мгб и больше. Лучше сейчас сделать инвентаризацию, чем потом убивать на это время. 8-)

          Ответить
  10. Tkalexs-bloger
    в 21:10

    Александр с Вами полностью согласен, про дубли картинок я тоже писал в у себя на блоге , статья называлось про «Дубли картинок в блоге.Как быть и что именно удалить». А вот во всех размерах изображений поставить нуль даже и не догадался. Простые вроде элементарные задачи для соображения были не под силу ума. Не зря говорят век живи, век учись.

    Ответить
    • Александр Сергиенко
      в 08:02

      Как говорится: «Всё гениальное — просто!»

      Ответить
  11. виктор
    в 21:18

    у меня есть такие признаки

    Ответить
  12. Ковалева Светлана
    в 12:04

    Если много картинок, лучше использовать плагин «DNUI Delete not used image». Главное, не удалить нужное! Для этого надо быть аккуратнее и оставлять картинки подсвеченные темным фоном.

    Ответить
    • Александр Сергиенко
      в 12:21

      Спасибо, Светлана, будем знать!

      Ответить
    • Даниил Привольнов
      в 11:15

      Отличный совет, спасибо. А можно установить, к примеру, почистить что лишнее и снести плагин?

      Ответить
      • Александр Сергиенко
        в 11:28

        Конечно, можно.

        Ответить
  13. Азик
    в 22:28

    А если нужны картинки размером с 150??
    Тогда отключить другие размеры, кроме этого??

    Ответить
    • Александр Сергиенко
      в 06:17

      Загружайте картинки с нужным размером и всё.

      Ответить
  14. Алексей
    в 15:55

    Офигеть. У меня получилось 300 мегабайт места картинки занимают, а всего занято на хостинге 500. Т.е. больше 50% занятого места можно освободить. Погнал заниматься картинками…

    Ответить
  15. Валентина
    в 22:19

    Алексанр, я поняла теперь, в чем моя была ошибка . Я думала, что способ убирать дубли картинок подходит для всех случаев. А ты просто считаешь, что похожие статьи не нужно показывать? Ты совсем не показываешь. Я видела сайты, где просто они текстом пишутся. А есть такие, что с миниатюрами выводятся. И они мне нравятся. И я решила мои возвратить. Наверное, ты должен хотя бы предложением обмолвиться, что такой способ подходит тем, кому выведение похожих статей не имеет значения. То, что я пережила, трудно передать. И все же я тебе очень благодарна. Во-первых я теперь знаю, как убирать дубли картинок, во-вторых, я знаю, что ни в коем случае нельзя забывать о бекапе данных. И в третьих, я сама додумалась, как выйти и из такого положения, когда не сделала бекапа. Я просто попросила скрин странички с параметрами медиафайла у владелица блога с таким же выводов постов с миниатюрами, как у меня. Так что, спасибо. Теперь разобралась. А что не поступил в аспирантуру, не грусти. Зачем она тебе? Что у научных сотрудников такая уж хорошая зарплата? У моих знакомых нет. А из болота писанины не вылезешь. Да и какие твои годы. Захочешь, еще поступишь.

    Ответить
    • Александр Сергиенко
      в 13:45

      Валентина, насчёт миниатюр, то, конечно, они удалятся, если по нулям проставить. Вообще миниатюры — это способ автоматической перелинковки, когда на блоге страниц будет много могут начаться проблемы с загрузкой сайта, сайт станет тяжёлым. Лучше вручную перелинковку делать.

      Ответить
  16. Юрий
    в 15:54

    Александр, вот мой кошелек R262410866758, а я подумал, что ты забыл. А что на счет конкурса по рубрике.

    Ответить
    • Александр Сергиенко
      в 11:27

      Деньги отправил.

      Ответить
      • Юрий
        в 12:07

        Спасибо, получил. ;(

        Ответить
  17. Даниил Привольнов
    в 11:17

    Отличная статья, я теперь начал тщательно подходить к загрузке и оптимизации картинок. А то глянул недавно — 285 мб занято уже, а блогу нет и четырех месяцев. А у меня всего 1 гб по тарифу. Это потому что блог о путешествиях и фоток очень много.

    Ответить
    • Александр Сергиенко
      в 11:29

      А они ещё и копируются…

      Ответить
  18. Никита Волков
    в 20:37

    Полезный материал! Всё оптимизировал. Жесть сколько копий создаётся =)

    Ответить
  19. seoonly.ru
    в 08:09

    Оптимизация прошла успешно! Спасибо! :-)

    Ответить
    • Александр Сергиенко
      в 08:12

      Пожалуйста!

      Ответить
  20. Денис
    в 21:30

    Здравствуйте, можно поинтересоваться кто вам рисовал дизайн сайта? И сколько примерно вы в это вложили средств?

    Ответить
    • Александр Сергиенко
      в 16:29

      Здравствуйте! На блоге есть статья про это.

      Ответить
  21. seoonly.ru
    в 19:43

    Я все оптимизировал! Я шикарен! Спс за статью :)

    Ответить
  22. Юрий Ваценко
    в 18:31

    Александр, только наткнулся на ваш блог, реально крутой. А на счет картинок, то уже свои начал менять, ведь картинки на блоге должны быть уникальными.

    Ответить
    • Александр Сергиенко
      в 16:30

      Спасибо, Юрий! Хотел сделать блог оригинальным, что и получилось, я думаю :)

      Ответить
      • Юрий Ваценко
        в 20:56

        Я бы сказал, что новый Борисов возродился, такой же красивый блог, ну как тут не подписаться. Конечно же, вы мне сумму денег в контакте написали, которую отдали за дизайн, для меня пока это многовато. Хотя в самого дизайн уникальный, но у вас он в разы красивее. Особенно понравилась, идея до и после. В общем, удачи в продвижении.

        Ответить
        • Александр Сергиенко
          в 15:13

          Спасибо, Юрий! И Вас того же!

          Ответить
  23. Игорь Козлов
    в 15:11

    Периодически чищу, удаляя ненужные картинки с хостинга, хотя особой нужды в том нет, места хватает.

    А на счет уменьшать вес картинок — это «обязательная программа». Нехорошо, когда картинки утяжеляют страницу.

    Ответить
    • Александр Сергиенко
      в 16:33

      И это факт! :)

      Ответить
  24. Александр
    в 12:04

    Совсем недавно тоже проводил оптимизацию картинок, скорость загрузки увеличилась в разы и начала увеличиваться посещаемость

    Ответить
  25. Егор
    в 12:38

    Ещё хочу добавить оптимизацию веса картинок с помощью сервисов вроде JPEGmini. Полезная вещь.

    Ответить
    • Александр Сергиенко
      в 13:13

      Не слышал, попробуем.

      Ответить
  26. Омар
    в 10:21

    Очень интересная статья, не придавал особого значения оптимизации картинок но теперь понимаю насколько это важно

    Ответить
    • Александр Сергиенко
      в 15:17

      Очень важно!

      Ответить
  27. ирина
    в 20:58

    Статья полезная и очень кстати.Спасибо вам за такую полезную информацию

    Ответить
  28. Игорь Черноморец
    в 09:13

    Здравствуйте Александр! В принципе вы напмсали все правильно…нужно уменьшать вес картинки и избавляться от дублей, но…вы не упомянулы очень важный момент!!!! Ведь есть много сайтов, у которых установлен плагин для увеличения картинок( например у меня) так как ширина поля для контента узкое и лично я обязан увеличивать их!И если в админке я поставлю все размеры по нолям, то… =)
    Поэтому в моем случае эти ноли не прокатят!Единственный дубль который мне стоит удалить, так средняя величина картинки. И на счет миниатюр Валентина была права…ведь у меня есть два виджета которые выводят статьи с миниатюрами и в этом случае я опять же не могу поставить ноли!
    Что вы скажите по этому поводу? Заранее спасибо!

    Ответить
    • Александр Сергиенко
      в 15:08

      Приветствую, Игорь! Если нужно увеличивать картинку, то,конечно, будет одна с большим размером. А в данном примере показаны бесполезные дубли,которые не нужны, в принципе. Я , например, не пользуюсь увеличением картинок. Но ещё хочу добавить, что не для всех этот метод подойдёт. А насчёт миниатюр — решать Вам, я предпочитаю перелинковку вручную, как более качественную.

      Ответить
  29. Дмитрий
    в 12:20

    Я также, как и многие соприкасался с такой проблемой. Приходилось обращаться к профессионалам, если бы нашёл Вашу статью быстрее, возможно бы разобрался самостоятельно.
    Безусловно в следующий раз так и поступлю) ;(

    Ответить
  30. Диана
    в 10:48

    Вот только вчера как раз читала об этом статью, как сжимать картинки, и как они тоже нагружают блог. А еще то, что картинки надо делать уникальными. По поводу копий картинок, не понимаю, почему блог их копирует у себя? Или это так в настройках поставлено, то есть, если я поставлю Нуль, то копирований больше не будет?

    Ответить
    • Александр Сергиенко
      в 12:37

      Не всегда, у меня вот копирует на блоге, но уже не так много.

      Ответить
  31. Екатерина Худякова
    в 04:14

    Спасибо за полезную статью) Глянула на свои изображения в надежде, что там дублей нет, но не повезло)) Придется теперь избавляться от них)))

    Ответить
  32. Ильдар Тимербаев
    в 23:10

    Спасибо, Александр! У меня блог совсем молодой, но оказалось там столько дублей!!! И это меньше чем за месяц!
    Все сделал, убрал. Теперь будем посмотреть :)

    Ответить
    • Александр Сергиенко
      в 23:33

      Сейчас попрёт Ваш блог в гору :) Вообще это только часть оптимизации блога. Планирую ещё пару статей написать. Так что следите за новостями.

      Ответить
      • Ильдар Тимербаев
        в 23:51

        Буду ждать. И того, когда попрет, и новых статей :)

        Ответить
  33. Андрей
    в 11:38

    Есть программа FileOptimizer, которая сжимает изображения. Её можно использовать вместе с этим способом.

    Ответить
    • Александр Сергиенко
      в 12:44

      Вариант, но к фотошопу привык. Если эту тему изучить, то можно до 10 — 20 кб сжимать без потери качества.

      Ответить
  34. Николай
    в 15:15

    Спасибо, Саша, за познавательную статью. У меня к вам просьба по теме. Как сделать, чтобы картинки были некликабельные, а то они дают дополнительные дубли (выплывает страничка)

    Ответить
    • Александр Сергиенко
      в 16:24

      В настройках изображения, в пункте «Ссылка» нажмите «нет». Теперь картинки будут некликабельными.

      Ответить
  35. Шополнг
    в 12:53

    Александр, огромное Вам спасибо!
    Простая, понятная статья с четким алгоритмом действий.
    У меня блог об интернет-шопинге: обзоры магазинов, товаров — много картинок. А еще больше, как выяснилось, дублей(((
    Уже сижу исправляю. Спасибо! ;(

    Ответить
  36. Рита
    в 19:27

    Александр, здравствуйте! После вашей статьи побежала делать. Когда открыла папку wp-content/uploads, то ужаснулась. У меня там столько дублей. Я удалила размер 150 на 150, а 170 на 170 у меня такого размера нет. За то других размеров пруд пруди. И вот я призадумалась какой же оптимизировать? Может удалить другие размеры и один оставить и его оптимизировать? Подскажите пожалуйста, дело не доделано. А так хочется облегчить свой блог. Тем более что я люблю вставлять картинки. И кстати, удалила я чужие с поисковика полностью и оставила только свои уникальные. Но у них тоже куча дублей. И еще с них были внешние ссылки на мой блог, а я думаю, откуда эти ссылки берутся. Я то все закрыла в статьях. А они с картинок. Жду ответ. Спасибо. ;(

    Ответить
    • Александр Сергиенко
      в 20:19

      Вы оставляйте те картинки, которые вставлены в статью, их и оптимизируйте. Дубли все удаляйте (у них название с расширением 150Х150 и т.д.).

      Ответить
  37. Анатолий
    в 21:10

    Да, это очень важная штука.
    Раньше не придавали этому значение, но тперь это стоит чуть ли ни первостепенной задачей.

    Ответить
Ваше Имя
E-mail (не публикуется на сайте)     Поле обязательно для заполнения
Адрес вашего сайта (если есть)
Текст комментария

Статистика сайта блога Александра Сергиенко