Всем привет! Сегодня на SEO-Mayak.com мы снова будем говорить о картинках для сайта, но в этот раз речь пойдет не о том, где брать изображения для сайта, а о том как загружать картинки на сайт и как оптимизировать изображения.
Тема уже заезженная, но как я убедился: далеко не все, а особенно начинающие веб-мастера, заботятся о снижении нагрузки на сервер.
Дело в том, что пока на блоге мало статей и посетителей, скорость загрузки страниц вполне нормальная и вроде бы ничего не предвещает проблем, но когда статей станет уже больше 100 и посещаемость возрастет до 1000 уников в сутки, то только тогда блогеры начинают заботится о скорости сайта.
Кто не знает, что такое поведенческий фактор и релевантность, советую подписаться на обновления блога.
Поэтому к подготовке изображений для загрузки на сайт надо относиться со всей серьезностью и уделять этому время.
Как же можно подготовить картинку, ведь она уже и так готовая? Всё верно, только вес картинки не должен превышать 40Kb или быть близким к этой цифре, а размеры (пропорции) изображения надо оптимизировать под ширину страницы сайта заранее.
Как сжать изображение без потери качества
Для наглядного эксперимента воспользуюсь онлайн сервисом для сжатия изображений punypng.com.
Я специально подготовил картинку размером 450х333 пикселя и весом 57,3 kb:
Прохожу несложную процедуру регистрации и загружаю эту картинку:
Какое-то время сервис обрабатывал изображения, но результат превзошел все мои ожидания:
Картинка потеряла в весе аж 43% и стала весить не 57.3 kb, а всего 32.8kb. Просто здорово! Но тут же в голову приходит мысль — «Наверное теперь качество картинки будет отвратительное, надо срочно проверить». Жму на кнопочку — «DOWNLOAD» и скачиваю обработанную картинку на свой компьютер.
Когда я оценил сжатую картинку, то просто влюбился в этот онлайн сервис. Здорово, супер, замечательно, классно — буду теперь всегда им пользоваться 🙂 Вот как выглядит сжатое изображение:
Так вот, дорогие друзья и коллеги. Сжатое, почти в два раза, изображение безусловно снизит время его загрузки, а если одна страница вмешает с десяток таких изображений…
PunyPng — это просто «spa слон» какой-то или «фитнес центр», при частом посещении которого, Ваш сайт будет иметь «самую стройную фигуру» 🙂
Впрочем сервис PunyPng может сжимать одновременно до 15 изображений, что согласитесь очень удобно.
Уверен, что многие веб-мастера призадумаются -«Блин, это что теперь мне надо каждую фотку из всех моих 200 статей прогнать через этот сервис, а потом залить обратно на сервер через редактор Wopdress?»
Могу немного Вас упокоить. Сделать можно все гораздо проще, если Вы конечно умеете пользоваться FTP клиентом Filezilla.
Все фотографии с вашего блога хранятся в папке — «wp-content/uploads», где они разделены по годам и месяцам. Так вот с помощью FTP клиента, скачиваем папочки с изображениями и по 15 штук закидываем их на сервис PunyPng, сжимаем и потом таким же образом помещаем их обратно на сервер. Самое главное при этой операции случайно не изменить формат или название картинки, чтобы WordPress не запутался.
Ладно, с сжатием изображений мы разобрались, теперь надо правильно их загрузить на сайт, чтобы они не оставляли совершенно не нужные дубли.
Как правильно загружать картинки на сайт
К примеру, вы уже оптимизировали изображение, сжали его и подогнали пропорции под вашу страницу. Так, теперь немного подробней о пропорциях.
В среднем ширина страницы блогов составляет 600 пикселей, конечно у кого-то может быть больше или меньше. Дело в том, что если загрузить картинку с пропорциями width (ширина) — 800 пикселей, а height (высота) — 500 пикселей, то конечно такое изображение не поместится на страницу, и чтобы вставить это изображение, придется менять размер непосредственно в редакторе WordPress.
Что же в этом страшного? При открытии статьи, картинка должна изменить свой размер, чтобы отобразится на странице, при этом теряются драгоценные миллисекунды. Считается, что если открытие страницы занимает более 4 секунд, то пользователь покидает сайт.
Итак, мы оптимизировали картинку, заранее подогнали размеры и загрузили ее на сайт. При этом у нас автоматически создалось 3 изображения разных размеров: миниатюра, средний размер и исходный размер.
Если с миниатюрами и исходным размером все понятно и они нужны. А вот для чего нужен средний размер? Я думаю он просто лишний, так как практически не используется и просто занимает место на сервере, тем самым утяжеляет блог.
Про использование миниатюр в wordpress читайте в следующих статьях: похожие записи с миниатюрами без плагина — выводим под каждой статьей, блок популярных записей с миниатюрами без плагина — выводим в сайдбаре, а также использование миниатюр на главной странице.
Для того, чтобы избавиться от, совершенно не нужного, среднего размера картинок заходим в Админ-панель -> Параметры -> Медиафайлы и рядом со строчкой — «Средний размер» ставим нули:
Для некоторых тематик бывает, что не нужны даже миниатюры, так что если есть такая необходимость, то можно таким же образом отказаться и от миниатюр.
Идем дальше.
Как загружать картинки на сайт со сторонних хранилищ
Хотел рассмотреть еще одну возможность загрузки картинок. Это особенно актуально для фотоблогов, т.е сайтов, использующих большое количество фотографий. Дело в том, что существует возможность использовать ресурсы сторонних хранилищ, например таких, как Яндекс фотки и уже оттуда подгружать изображения , тем самым существенно облегчая сам сайт. Чтобы работать с сервисами Яндекс Вы должны быть зарегистрированы — «Регистрация сайта в поисковых системах Яндекс, Google, Bing, Mail.ru и других»
Для того, чтобы загрузить картинку нам надо попасть на Яндекс фотки и кликнуть по кнопке — «Загрузить фотки»:
Далее, откроется следующая страница , где надо будет выбрать изображение с компьютера:
После того, как Вы выбрали изображение, внизу страницы нажимаем кнопку — «Загрузить» и картинка загрузится на Яндекс фотки. Далее выделяем нужное изображение:
Если кликнуть по ссылке — «В другом размере», то можно выбрать исходный или предложенные Яндексом размеры. Далее, кликаем по надписи — «Код для вставки на сайт или в блог», копируем верхний код, от тега <a>, до закрывающего тега </a>, выделенный квадратом и вставляем в редактор WordPress в HTML режиме. Вот та самая фотография, только подгруженная не с самого блога, а с Яндекс фоток:
Обращаю Ваше внимание, что скопированный код изображения с Яндекс фоток является открытой ссылкой и ее необходимо закрыть тегом nofollow, а еще лучше скрыть ссылку с помощью AJAX.
Похожая история со вставкой видео с YouTube. Представляю подробных скриншот:
Это видео с YouTube вставлено посредством скопированного кода, что делает совершенно бесполезным использование плагина Video Embedder, от которого я благополучно избавился.
Надеюсь статья получилось интересной и не менее полезной. Удачи!
С уважением, Виталий Кириллов
Виталик, полезная информация, спасибо. Только я вот не совсем поняла, зачем нули ставить на ненужном размере в редакторе WP? Это что, влияет на скорость загрузки сайта?
А я оптимизирую картинки с простенькой уже встроенной программой Microsoft office 2010 — два клика и все готово, на моем сайте есть показательные фото с примером улучшения качества фото, там же есть и сжатие и изменение размера.
Здравствуйте Виктория, рад Вас видеть на своем блоге! Начнем с вопроса. Если поставить нули на ненужным размере, то он просто не будет создаваться и не будет занимать место на сервере. А насчет оптимизации изображений, конечно программ очень много и я описал всего лишь один сервис. Цель статьи заключалась в самой необходимости оптимизации, так как многие этим совсем не занимаются.
То есть: если я пользуюсь всеми размерами, то их не стоит блокировать? или индивидуально для каждого фото?
Виктория, если Вы используете все размеры, то конечно блокировать их смысла нет. Я например пользуюсь только исходным размером и все остальные у меня «по нулям». Зачем мне лишние kb прибавляеть к весу блога. Мой тариф на хостинге допускает общий размер данных 5GB — хотелось бы поберечь, так как блог у меня не один 🙂
Здравствуйте, Виктория! Могу из собственного опыта рассказать. Примерно до ноября 2011 у меня настройки были в водпрессе с указанными максимальными размерами и если заглянуть в папочку «wp-content/uploads», то там по 4 картинки — 3 копи с разными размерами и оригинал. Плагин вывода похожих постов с картинками у меня имеется. Так вот в ноябре я изменила настройки проставив вообще во всех полях нолики. У меня теперь все обалденно!!! Картинка загружается и в статью именно того размера какого есть на самом деле, т.е. я избавилась от дубля картинок. и плагин вывода похожих постов также выводит миниатюры этих картинок без какого либо затруднения, но размеры 150*150 (как было) больше не плодятся. Так что я рекомендую вообще нолики проставить везде. Еще я убираю из картинки ссылку на нее, т.к. были случаи что картинки индексировались и попадали в выдачу как отдельные страницы. Представьте приходит человек по такой ссылке и видит одну картинку без всяких пояснений — это непорядок. Так что я ссылки удаляю. Мне придется еще заняться удалением дублей картинок, которые создались с марта 2011 по ноябрь — большая работа, но автор Виталий Кириллов дал хороший совет как сделать это быстро, так что мне остается только выбрать время, посидеть некоторое время и избавится от баласта.
Это вы вещь сказали! Иногда в комментариях можно очень полезную информацию прочитать!
Спасибо!
Виталий, спасибо за ценную информацию! С сервисом мне пока не повезло. Или слабо сжимает или качество теряется, потому что исходники (сделанные фото бисерных работ) некачественные и малейшее сжатие влияет на цвет картинки — я думаю он хорош для таких качественных картинок ка кв примере показано. Еще, если зарегистрироваться на этом сервисе, то пишут что будет больше возможностей. Надо зарегистрироваться.
Да Наталья, если зарегистрироваться сервис предоставляет дополнительные возможности.
Спасибо,Виталий, за советы. Я, например, пользуюсь фотошопом, для того чтобы «подогнать» картинку до нужного объема.
Здравствуйте Елена! Фотошоп не всегда сохраняет качество картинки, при сжатии, но возможно есть что-то, чего я не знаю 🙂
Хорошие рекомендации у Вас в статье!
Спасибо Александр, рад видеть Вас на своем блоге!
Лучше поздно, чем никогда. Спасибо за хорошие советы, особенно по сжатию. В кулинарном сайте- одни картинки.
Наталья, рад видеть Вас на блоге! У меня тоже есть кулинарный блог. Сжатие необходимо для скорости загрузки страниц.
Виталий, спасибо! Замечательная, обширная информация. Все время над этим задумывалась, как закачивать картинки на сайт. Всегда много вопросов возникало.
Пожалуйста Валентина, заходите еще!
Да, как всегда нужная и полезная информация. Тем более — подробно все описано и рассказано до самых малых деталей. Легко после этого самой разобраться во всем
Спасибо Анна!
Классная информация. У меня на хостинге 2 сайта. Оба с большим количеством фотографии. В начале, я считала, что чем больше и качественнее фото, тем лучше. Через 6 месяцев работы я практически исчерпала весь ресурс. Из 1 гигибайта занято было более 800. Схватившись за голову и определив, что автоматом сохраняется аж 4 копии, стала искать выход. Мне подсказали редактор, который грузит фото прямо на хостинг. Но, переделав статьи (до сих пор еще не все) столкнулась с тем, что они не попадают в библиотеку медиафайлов и не показываются как картинкав похожих статьях. Снова стала искать выход. Пошла на компромисс — загружаю крошечные миниатюрки. То,что можно было сразу вбито нолики, даже не подозревала. Возможно не понадобилось грузить редактор. Спасибо. Мне эта статья очень поможет.
Здравствуйте Наталья Я рад, что моя статья Вам помогла, надеюсь Вы еще зайдете почитать другие статьи блога.
Отличная, полезная статья!) Я уже давно сжимаю фотографии перед тем, как загружать на сайты/блоги, но пока предпочитаю установленную на ПК программу. По опыту с ЖЖ знаю, что онлайн-сервисы имеют свойство пропадать/глючить/изменяться не в лучшую сторону. Но если человек работает не дома или в кабинете, а на отдыхе, то это идеальный вариант!)
Здравствуйте мой постоянный читатель Sasha! Про все программы сказать не могу, но многие из них не возвращают первоначальное состояние картинки после сжатия, т.е не имеют функции отменить действия. Наталья Вам об этом лучше расскажет, если захочет конечно.
Читательница.
Чтобы не было проблем, с функцией отмены действия, нужно просто называть редактируемый файл по-другому, чтобы оригинал сохранился. А вообще, кнопка «отменить действие» есть практически в каждой программе). Здесь вопрос скорее удобства: сидя дома, имея под рукой все файлы и программы, время, можно не лезть в онлайн-сервисы. А если время ограничено, с собой только нетбук или другой девайс, флешка, то, конечно, стандартными путями вопрос не решишь
Sasha, разве слово «Читатель» не может относится к женскому роду? Возможно я был не прав, извините. Я с вами не собирался спорить, по поводу удобства установленных на ПК программ. Я ждал от Вас, что вы поделитесь с нами какие Вы программы используете, чтобы например у Натальи не возникало больше таких проблем.
)))А я из вашего сообщения поняла, что Наталья объяснит, почему в программах неудобно работать.
Я пользуюсь небольшой, но довольно неплохой программой под названием PhotoFiltre. Причем пользуюсь очень давно), никаких проблем с ней не было
Я так поняла, что о моей проблеме речь зашла. Рассказываю как дело было. У меня косячок вышел с одной программкой. Я начала сжимать пачкой уже обработанные фотографии (вернее подготовленные и с нужными мне размерами) программа называется Microsoft office Picture manager-+ пргораммка классная, с одним НО. Сжав пачку я потеряла размеры выставленные, но картинки очень сильно похудели. Однако возвратной операции когда пачку сжимаешь нет и называть каждый файл ,когда сжимаешь их пачкой тоже нет возможности — они так же под своими названиям и и сохранились. Качество оригинала неважное и потому при сжатии размера произошло сильное искажение фоток. пришлось заново сидеть в ФШ резать, клеить, накладывать рамки и прочее. Часа три потеряла, зато теперь ученая )))
Спасибо Наталья за поучительную историю!
ой, это всегда так в начале бывает? все эти ваши умные словечки меня прямо иногда в ступор вводят.
Фиалка, уточните пожалуйста, про какие словечки идет речь? Я постараюсь вывести вас из столь не конформного состояния.
Отличное открытие,про онлайн сервис. на счет видео,плагин какой нибудь все равно наверное нужен,даже с кодом. А вот видео из контакта,можно вставлять и без плагина. В контакт можно добавить любое видео из YouTube. Для этого нажимаем на белый уголок в верху видео,а когда появится кнопки,нажать ВК ,ниже поставить галочку-добавить в мои видеозаписи. Дальше,зайти в свои видеозаписи,Открыть видео и поделиться .т.е. взять код и вставить его на сайт. Кстати многие запрещенные на YouTube видео,прекрасно можно взять ВК.
Здравствуйте Надежда, рад видеть Вас на блоге! Никакого плагина для вставки видео с YouTube не надо. Достаточно вставить код, который показан на скриншоте в редактор WordPress в режиме HTML.
Так,что каждый код в редактор вставлять? Я просто в статью вставляю. Но без плагина код просто кодом и отображался.
Именно так Надежда, код вставлять в редактор WordPress в HTML режиме без всяких плагинов! В редакторе WordPress есть вкладка «Визуально», а рядом вкладка «Текст», вот код вставляется во вкладку «Текст».
Всем привет!
Я часто беру фото из Яндекса — как узнать что ссылка открытая????
и что если даже фотка личная она может быть открытой и ее нужно закрывать???
Спасибо за полезную инфу. С ув. Т.С
Здравствуйте Татьяна, ссылка ведущая на другой ресурс и не закрытая тегам rel=»nofollov» или будет считаться открытой. Ссылкой может считаться и фотография, если при нажатии на нее вас перемешает на другой сайт.
Здравствуйте, Виталий. сразу же хочу сказать огромное СПАСИБО за совет.
У меня оказалось по несколько копий одной и той же фотографии, удаляла несколько дней. Сайт стал легче. спасибо. Заношу Ваш сайт в закладки, буду заходить за новыми советами.
Здравствуйте Светлана, рад видеть Вас на своем блоге! Приятно осознавать, что мои статьи помогают людям решать проблемы.
Ну вот, как мне срочно нужно облегчать вес картинок… Ужооос! Представить даже не могу, как их вес уменьшать оптом, читаю об этом — тёмный лес,туууупая))) Опять, видимо, буду сидеть и по одной уменьшать вес,удалять ссылки — ух — работёнка предстоит))) Хорош также совет от Натальи, сейчас же везде проставлю в настройках медиафайлов нули. Ох, уж эти дубли страниц и вес их… Хорошо, что у Вас подробно и доступно написано об этом.Уже попробовала сжимать изображение на сервисе PunyPNG — классно! Поставила себе в закладки Ваш сайт, думаю, буду частой гостьей)) Но для меня, действительно — китайская грамота — работа с FTP клиентом Filezilla.Очень сложно))) Жму на все кнопчки, что найду у Вас. С теплом, Людмила
Хорошая статья, а главное — все понятно.
А Вы, Виталий не планируете написать статью как загружать видео на сайт?
Наталья, видио на сайт грузить не стоит. Гораздо разумней загрузить видео на YuoTube и вставить код на сайт, тем самым Вы сэкономите место на сервере.
Спасибо Вам за статью! Вы мне очень помоги — у меня получилось загрузить видео!!! СПАСИБО
Пожалуйста Наталья!
Виталий, может Вы подскажете, что можно сделать?А то я в легкой панике.
До сих пор у меня стоЯл плагин Dean’s FCKEditor For WordPress. С его помощью без проблем заливались фото прямо на хостинг. На днях на сайте пришло уведомление, что то ли прошел апдейт плагина, то ли он просто не работает. Не разобралась толком. Но дана была ссылка на новый редактор CKEditor for WordPress. Я первый отключила, второй активировала. Но… о ужас! у него нету этой функции- загрузка на хостинг. Есть блок картинка, но там нужен готовый урл. Короче я вообше сейчас не могу вставить картинку в статью. Попробовала через Я- фотки, но мне не нравится, когда при увеличении фото, выкидывает на их ресурс. Я совсем недавно поставила только плагин, который открывает картинки в статье.
Теперь просто в растерянности. Что и как сделать.
Наталья, а что мешает фотки через редактор WordPress вставить? Объясните причину, почему Вы пользовались плагинами для загрузки изображений на хостинг?
А причина такая, что несмотря на то, что я как Вы советовали поставила нули на среднее изображение, у меня на хостинге сохранялись все равно 4 копии. Да, я пользуюсь CK Editor. Он очень удобен. Но прошло обновление и старая версия не работала. Пришлось ставить новую. Но я разобралась. Нужно было поставить галочку в настройках. Методом тыка нашла ее. Так что сейчас все ок.
Виталий, случайно попала к вам на сайт, а уйти трудно, все интересно. Появилась ли у вас статья с выводом картинок для оптимизации статей на сайте? Я становлюсь вашим ПЧ, Жду новых и интересных статей.
Здравствуйте Валентина, маленько не понял вопроса, уточните пожалуйста.
Привет, Виталий! У меня с миниатюрами то ли «глюк» какой-то, то ли я не так что-то сделал… Определяю миниатюру для статьи, задаю. Но … действует это только для Релайтид постс! Там действительно выводятся миниатюры. А вот в новом шаблоне вместо миниатюры вверху поста выводится картинка в том размере, в каком она загружена!
Поэтому в настройках медиафайлов поставил нули и для миниатюр. Делаю миниатюру из картинки, обзываю ее с добавкой mini в названии файла. Гружу. А при определении миниатюры уже задаю ее — размером 150 на 150.
Здравствуйте Александр! Если я правильно понял, Вы задаете миниатюру, а у Вас выводиться исходный размер. По умолчанию в WordPress миниатюры не выводятся и их надо включить. Как это делается Вы можете почитать в моей статье Как вывести похожие записи с миниатюрами на WordPress без плагина.
Если, что будет не понятно, спрашивайте.
Я. в принципе, приспособился уже вроде… Все равно картинку нужного размера создаю обычно на одном из онлайн-редакторов (заодно обычно сильно сжимается). Поэтому просто создаю картинку для миниатюры плюс к основным картинкам. И в качестве миниатюры задаю уже ее.
Можно и так конечно…
Но статью надо как следует изучить!
Здравствуйте Виталий! Зашла к вам по одному поводу а выхожу по другому.
Прочитала еще раз вашу статью и проверила настройки — у меня все ОК!Средние -00.
Но у меня вопрос — ссылки с Ютуба — тоже нужно закрывать??.Спасибо.С ув. Т.С
Татьяна, закрывать ссылки надо только те ссылки, которые заключены в тег:
[php]href="http…"[/php]
А в коде видео с Ютуба ссылк идет после тега:
[php]src="http…"[/php]
Если добавить nofollow, то просто исчезнет изображение.
Виталий, пробовала сжать изображение в вашей программе( по ссылке) с мышонком — сжимает почему-то 2-3 процента от общего изображения.Смысл в чем?
Сжатые изображения еще раз сжать будет сложно. Когда сжимается фото с фотоаппарата или просто произведение фотошопа, то эффект до 50%. Вот и смысл.
Виталий гляньте пожалуйста — я правильно вставила теги на закрытие ссылки, не могу разобраться
[php]<!—noindex—><a href="http:// fotki.yandex.ru/users/rasputinanyura/view/839574/" rel="nofollow"></a>rel="nofollow"<a href="http:// fotki.yandex.ru/users/rasputinanyura/view/839574/" rel="nofollow">Посмотреть на Яндекс.Фотках</a><!—/noindex—>[/php]
Анна, извините за задержку с ответом, были причины. Правильно будет так:
[php]<!—noindex—><a href="http:// fotki.yandex.ru/users/rasputinanyura/view/839574/" rel="nofollow"><img src="Путь до картинки"/></a><!—/noindex—>[/php]
Я наверное не туда вставила не могу разобраться куда тулить rel=»nofollow»
вот пример
[php]<!—noindex—><a href="http:// fotki.yandex.ru/users/rasputinanyura/view/839574/" rel="nofollow"></a><a href="http:// fotki.yandex.ru/users/rasputinanyura/view/839574/" rel="nofollow">Посмотреть на Яндекс.Фотках</a><!—/noindex—>[/php]
Анна, правильно будет так:
[php]<!—noindex—><a href="http:// fotki.yandex.ru/users/rasputinanyura/view/839574/" rel="nofollow"><img src="Путь до картинки"/></a><!—/noindex—>[/php]
Если Вы хотите сделать ссылкой словосочетание «Посмотреть на Яндекс Фотках», то ее надо прописать отдельно.
Методом тыка нашла куда вставить, спасибо вы мне очень помогли, картинки сильно нагружают сайт и яндекс картинки — это выход
Виталий, а подскажите пожалуйста. У вас на всех изображения водяные знаки. Как вы их добавляете? я всегда раньше делала это через фотошоп, а так как у меня очень много фото на сайте, это занимает много времени. Есть ли возможность чтобы ко всем загружаемым фото добавлялись водяные знаки? без плагина желательно.
Анна, можно ускорить процесс добавления водяного знака в фотошопе, но с «волшебным» кодом для WordPress я не сталкивался.
Я пробовала коды с разных сайтов, у меня ничего не получается 🙁 а плагин не хотелось бы устанавливать. Ну ладно, буду по привычке фотошопом)
В программе FastStone с пакетной обработкой изображений (хоть пару тысяч за раз) есть опция «добавить водяной знак». И вообще программа очень удобна для обработки изображений
Анна, а в чем сложность вставить знак в ФШ? Заранее его готовите, открываете в программе и просто копируете на те фотографии (так же открытые в ФШ), куда надо установить. Делов то на 30 секунд.
Наталья, я так вообще для вставки водяных знаков в ФШ пользуюсь горячими клавишами — 1 сек.
CTRL + C …. CTRL + V 😉
Не совсем так, Горячие клавиши я назначаю сам, например СTRL + F1 и при этом не надо копировать изображение водяного знака. Если дружно попросите, я напишу статью с инструкцией по теме.
Ну.. не знаю, как насчет «дружно». Наверно, было бы интересно узнать. Думаю, что как вариант, можно сохранить водяной знак, как кисть (только сейчас идея пришла). Тогда вообще никаких горячих клавиш не нужно будет.
Наталья, просто тема не совсем для моего блога, попробую объяснить в 2 словах. Включаем запись действий -> назначаем горячие клавиши -> файл -> поместить -> масштабируем -> сдвигаем в нужное место -> останавливаем запись.
Я поняла. Вы имели ввиду запись экшена. На самом деле, не все умеют это делать. Думаю, что идея с кистью будет более удобна. Но про экшен, поняла. Спасибо. Просто я знаю это теоретически, а сама ни разу не писала- не было нужды.
Конечно, не все умеют, а функция очень полезная, да и не сложная. Попробуйте с кистью, тоже очень интересный вариант. Надеюсь потом поделитесь результатом эксперимента.
Конечно. Думаю, что напишу статью по этому поводу. Как сделать кисть, я уже написала, а вот что можно использовать для постановки водяного знака только сегодня пришла идея. Пока ни у кого такого не видела.
Удачи, в поставленной задаче!»
Здравствуйте, Виталий!
Хочу выразить вам огромную благодарность за статьи. Читаю сегодня, буквально безвылазно с утра… (и сразу делаю). Ну не оторваться. У меня небольшой сайтик вот уже пару лет, сколько я перелопатила информации в свое время, чтобы сделать его самой — словами не описать. Но нигде не было столь подробных, чайникоустойчивых и действенных описаний. А сколько нового! Это просто Эльдорадо.
Только не бросайте это дело! )) Спасибо Вам!
Здравствуйте Алла! Ну столько лесных слов в мой адрес, спасибо! Блог изначально был задуман, как учебное пособие для новичков или как Вы выразились — «чайникоустойчивых» 🙂 Но акже я публикую информацию, предназначенную уже для более продвинутых веб-мастеров, чтобы Вы через пару лет также смогли на блоге, полезную для себя информацию.
Бросать блог не собираюсь! Был перерыв, связанный с автомобильной аварией и дальнейшем периодом реабилитации, но теперь вроде все нормально.
Алла, если что непонятно, спрашивайте, всегда отвечу.
Одно время на одном из сайтов, где в основном одни картинки практиковала вставлять их по ссылке, например с того же яндекса,как писалось выше в этом посте, экономя тем самым место на хостинге, но потом прочитала, что поисковики лучше относятся к тем сайтам, картинки которых расположены не по ссылке, а на самом хостинке во-первых тогда картинка быстрее грузится при открытии страницы (а для нас это очень важно), а во-вторых раз сайт имеет достаточно средств и места что бы хранить картинки у себя, значит он более уважаемый.
Олеся, конечно лучше хранить картинки на сервере, но есть некоторые служебные фото, которыми будут пользоваться посетители сайта, то такие картинки лучше хранить на сторонних ресурсах, чтобы не нагружать свой сервер.
Например я опубликовал скрипт стрелок вверх/вниз, в код которого, для удобства пользователей, били уже заложены изображения стрелок, так если этот скрип скачает пара десятков тысяч веб-мастеров, то нагрузка на мой сервер будет колоссальная, а мне это надо? Вот для этого в основном и применяются сторонние хранилища.
Виталий, спасибо за полезную статью!
Но я не могу понять пару моментов:
1. Если я хочу на странице отобразить картинку в уменьшенном размере (50-70%) и выставляю эти параметры в редакторе, то это влияет на скорость загрузки страницы? Дело в том, что есть большие картинки, которые нельзя целиком выводить на странице, но по клику они должны открываться в полном размере.
2. Можно в Крупных размерах картинки поставить нули? В комментариях пишут, что можно. У Вас на скриншоте стоят стандартные цифры. Как быть?
Ирина, если изменить размеры изображения в редакторе, то серверу придется сжимать или расширять картинку во время отправки в браузер пользователя, что конечно влияет на скорость загрузки страницы.
Если картинка большая, то не стоит ее сжимать в редакторе. Надо просто создать отдельный размер, который будет отображаться на странице, а ссылку в нем сделать на большую картинку.
В WorsPress предусмотрено 4 размера изображений: миниатюра, средний, крупный и исходный. Если поставить нули в крупных размерах, то они создаваться не будут. А крупный размер как раз предназначен для вставки картинки на страницу, чтобы не сжимать исходный.
Надеюсь понятно объяснил.
Виталий, по первому пункту всё понятно: буду создавать две картинки — маленькую и большую, если мне нужно, чтобы пользователи могли просмотреть большое изображение. Плагин для увеличения картинок прекрасно подтягивает большое изображение. Спасибо за подсказку!
Насчёт второго пункта. Я оптимизирую картинки, поэтому крупный размер для всех изображений мне не нужен, так что поставлю нули. Я так поняла, эта функция нужна тем, кто закачивает очень большие изображения, а потом уже выбирает, какой размер картинки нужно вставить в пост. Правильно? Или я что-то путаю?
Ирина, Вы все правильно поняли!
Виталий,
спасибо за полезный материал, как раз искал такой!
Немного не понял как это: Надо просто создать отдельный размер, который будет отображаться на странице…
Я все картинки храню на сервере и использую плагин Auto HighSlide для увеличения
картинок, чтобы картинки при клике увеличивались их необходимо немного сжать в редакторе. Я пробовал вставлять картинку в исходном размере и тогда эффект увеличения не виден, а сжатие в редакторе замедляет загрузку.
В основном использую такие размеры 720х480; 453х638; 540х360, которые немного сжимаю в редакторе, чтобы был эффект увеличения.
Как сделать так, чтобы и не сжимать и эффект увеличения был?
Спасибо
Здравствуйте Виталий! Очень сложно Вам объяснить ситуацию в рамках комментария. Но я попытаюсь) Посоветую Вам прочитать мою статью, и если останутся вопросы, буду готов выслушать.
Здравствуйте Виталий!
Спасибо за ответ и Вашу рекомендацию! Приятно общаться с профессионалом!!!
Для себя я понял, что для начала нужно обязательно избавиться от плагина Auto HighSlide, так как он действительно очень тормозит сайт.
Постепенно попробую разобраться сам. Если будут вопросы обязательно задам Вам. Теперь я постоянный читатель Вашего сайта. Спасибо за Вашу такую нужную работу!!!
Вот пока писал, возник вопрос по поводу удаления плагинов, где-то читал, что даже при полном удалении, плагин оставляет свой «след», который также замедляет загрузку сайта и этот «след» нужно будет вычищать потом.
Если знаете как это сделать и в каких файлах, прошу объяснить. Думаю, что это будет интересно не только мне.
С уважением,
Здравствуйте Виталий! Почитайте мою последнюю статью, я там вскользь упомянул, где оставляют свой след плагины.
Спасибо, Виталий!
Как я понял, нужно зайти в БД и искать таблицы с названием удалённый плагинов и удалять их, правильно?
С уважением,
Да, Виталий все правильно!
Здравствуйте Виталий! С Новогодними Вас праздниками и всяческих успехов в 2016 году. Я закончил оптимизацию картинок и текста. На следующем этапе я бы хотел почистить БД от «следов», которые оставили удалённые плагины, чтобы увеличить скорость загрузки сайта, но к сожалению, мой уровень не позволяет выполнить данную операцию. Смогли бы Вы почистить базу данных моего сайта? Если да, сообщите, что Вам для этого надо и сколько эта работа стоит?
С уважением,
Виталий
Здравствуйте Виталий. Напишите мне через форму обратной связи и пообщаемся.
Виталий, здравствуйте!
Внедряю Вашу статью в жизнь, удаляя дубли картинок из /public_html/wp-content/uploads/. Просто супер!!! Значительно облегчает сайт, удаляя ненужный мусор. Огромное Вам спасибо!
Вот возник вопрос относительно вставки видео из youtube. Интересные видео будут привлекать и задерживать посетителей на сайте, но вес видео не будет ли он тормозить загрузку, увеличивать вес самого сайта и создавать другие проблемы?
Да и ещё, не совсем понял как именно закрывать ссылки с youtube, например эту или подобные:
Так?
Спасибо за помощь и полезные статьи!
С уважением,
Виталий
Здравствуйте Виталий! Видео с youtube вы не закроете.
Виталий, здравствуйте!
Вот начал оптимизацию картинок согласно Вашей статьи и сразу возник вопрос:
1. Ни в Вашей статье, ни в комментариях, ни разу не упоминалось про файл .listing, который присутствует в каждой из папок с картинками.
Что с ним делать? Нужно ли его править и обратно заливать на сайт?
Начал оптимизацию с первого поста. Установил всё «0» на всех размерах.
Скачал с сайта папку с 13 картинками + файл .listing., вес папки был 97,9КБ.
В результат оптимизации картинок стало 6 картинок и вес папки 36,3 КБ, файл .listing я назад на сайт не закачивал, т.к. не знаю что с ним делать.
Прошу помочь разобраться с этим файлом, спасибо.
Результаты оптимизации я проверял на сервисе webpagetest.org/result/150916_SB_6N2/
До оптимизации было:
время загрузки: 3.281s, запросов -30, вес — 392 KB
После оптимизации стало:
время загрузки: 2.986s, запросов -30, вес — 243 KB
Спасибо за помощь и Вашу нужные и интересные статьи.
С уважением,
Виталий
Здравствуйте Виталий! Все шаблоны разные и вслепую я не могу сказать, что это за файл и за что отвечает.
Здравствуйте.
Решил заняться оптимизацией сайта и начать с картинок. И тут же столкнулся с проблемой.
К примеру:
Изначально картинка на сайте «весит» 650kB, после оптимизации в фотошоп’е она «худеет» до ~40-60kB, отличный показатель. Но далее полная непонятка начинается. После загрузки на сайт, в свойствах картинки показывает нормальный размер, то есть исходный после оптимизации и с разрешением к примеру 594×396. Но если картинку скачать непосредственно со страницы, то размер и разрешение меняется, она уже «весит» 105kB и разрешением 580х400. Если же ее открыть в фотошоп’е там показывает все те же 650kB. Хотя видно, что оптимизация проведена (ставил макс. сжатие, чтобы видеть разницу.) И еще, при нажатии на картинку на странице сайта, чтобы глянуть свойства, там нет размера (нет данных), только разрешение, причём, изменённое с 594х396 на «свои» 580х400. Не подскажите, что не так происходит?
Александр.
Александр, 60 kb вполне нормальный размер, для изображений. На счет размеров (разрешения) изображения, я точно сказать не могу, надо смотреть настройки.
Картинки перед загрузкой на сайт можно сжать еще и в онлайн-сервисе JPEGmini. Ссылку не даю — не знаю, как отнесется к ней Виталий. Можно легко найти через поиск. Сервис весьма прост, но он англоязычен. Самое лучшее — использовать браузер Гугл Хром со встроенным переводчиком. Зайдя на главную, нужно нажать клавишу Try It Now, затем клавишу загрузки Drop Foto Here.
Фотка грузится и сжимается (иногда почти в два раза). Без видимого ущерба качеству. Загружаешь 65 кб, на выходе получаешь около 30 кб. Остается лишь скачать. Ну, переименовать — к Вашему названию файла сервис добавит _mini
Спасибо Александр, я обязательно познакомлюсь с данным сервисом.
Вот сервис сжатия. Бесплатный. Быстро, удобно, качественно. Авторы применяют свой алгоритм сжатия. Интересно если потом такой файл открыть в фотошоп’е, то картинка половина почти черно-белая в полосках, другая всеми цветами радуги, хотя на сайте всё отлично. Сжимает очень сильно — рекомендую. Если автор посчитает нужным, то оставит ссылку для всех желающих.
Александр.
Ссылку то забыл дать -) Вот:
http://compressjpeg.com/У меня на сайте очень много картинок.
Сейчас я вставляю картинку в небольшом размере, а потом при нажатии на нее,она открывается в другом окне в натуральном размере. Это нагружает сайт и перегружает сервер??
Если «да», значит мне нужно поудалять лишние картинки?
Ольга, если Вы изменяли размер изображения в редакторе WordPress, то да, это нагружает сервер, причем прилично!
Здраствуйте, Виталий. Скажите, а дубли картинок нужно удалять прямо из FileZilla?
Здравствуйте Евгений! Конечно нужно, только аккуратнее, не удалите лишнего. Хотя в крайнем случаи фотки можно снова загрузить.
Спасибо, конечно буду делать аккуратно и сравнивать с каждой картинкой с поста.
Виталий, у меня на хостинге несколько резервных копий сайта, которые я делал в разное время, скажите, как удалить старые файлы – они, наверно, тоже не слабо весят?
Евгений, наверное лучше задать этот вопрос в службу поддержки хостинга.
ОК, потом рассказать?
Если будет желание, то расскажите)
На хостинге ответили, что резервные копии на скорость не влияют и дисковое пространство не занимают, сайтом не обрабатываются.
Все верно! Просто есть разные резервные копии. Те, которые хостинг делает автоматом для всех обслуживаемых сайтах, обычно за последныее три дня на выборю. И те, которые делают сами веб-мастера, данные копии не должны хранится на сервере и обычно скачиваются на компьютер или отсылаются на почту. Вы какие копии делали?
У меня копий сделанных вручную шесть штук.
Евгений, я понял, так Вам же ответили в службе поддержки, что данные копии хранятся в другом «отсеке» сервера.
Я их делал на хостинге.
в медиафайлах изменила все размеры на 0. С хостинга удалила все дубли изображения, оставив только оригинал, далее перезагружаю и эти дубли всех размеров появляются опять, попробовала на одной картинке уже три раза. Может быть еще где-то в какой то функции вордпресса нудно что-либо изменять?
Олеся, такие полномочия может взять на себя функция set_post_thumbnail_size(); Проверьте файл functions.php на наличие данной функции.
Что-то не пошла у меня PunyPng. Сорри, дескать, поменяйте формат или размер. А у меня джипег в 100 Кб. А ведь пишут: «Supports: JPG, GIF and PNG». Нашла неплохую замену: TinyJPG — из 100 в 45 Кб.
Спасибо Пиполанка! Обязательно попробую этот сервис.
Здравствуйте! Вот такой вопрос? А влияет ли величина картинки и писанина ссылок на этих самых картинках на маленькую посещаемость сайта? Не отбрасывают ли поисковые системы далеко назад в результатах выдачи такие сайты?
Так-то, мой сайт работает и переключается быстро. Нужно ли что-то менять в картинках?
Здравствуйте Игорь! Менять или не менять дело каждого! Пока у Вас посещаемость 20 человек в сутки, будет небольшая нагрузка на сервер, а когда посещалка перевалит за 1000, то нагрузка обязательно даст о себе знать.
Спасибо за полезную статью.
Виталий, спасибо за полезную статью. У меня к Вам вопрос: я обычно перед загрузкой на сайт картинки уменьшаю в программе Paint и задаю конкретные размеры, иногда больше, иногда меньше. На сайте эти размеры не меняю. Если я сейчас проставлю нули на миниатюры и средний размер и оставлю только большой, у меня картинки на сайте сохранятся в прежнем виде? Я раньше загружала разные размеры и увеличит ли это скорость открывания страниц (я имею ввиду, что страницы будут медленнее открываться, потому что сайту придется картинки преобразовывать до нужных размеров). И второй вопрос: чтобы удалить лишние картинки, надо их искать в корневой папке сайта? В библиотеке медиафайлов кажется только оригиналы или я ошибаюсь?
Светлана, если размер исходной картинки будет меньше, чем крупный размер, проставленный в настройках, то тот самый крупный размер создаваться не будет. Исходная же картинка естественно загрузиться в тех же пропорциях, в которых она было создана до загрузки на сайт.
Чтобы удалить ранее созданные миниатюры и средний размер картинок, надо воспользоваться ftp клиентом FileZilla или зайти на хостинг и удалить их вручную. Только они хранятся не в корневом каталоге, а в папке uploads, что находится в папке wp-content.
Спасибо, Виталий, за столь полезную статью. У меня вечная проблема с уменьшением веса картинок. Пользуюсь Riot, но изображения становятся корявыми. Сейчас начинаю наполнять новый сайт, где будет много фото, и ваши наработки очень пригодятся! Статью взяла в закладки. Удачи вам во всех делах!
Виталий, вот код для вставки моей фотки с яндекс-фоток:
<a
href="https://fotki.yandex.ru/next/users/profit-80/album/482393/view/1136845"rel="nofollow"></a>Добавьте, пожалуйста, код rel=»nofollow». Обещаю запомнить сей образец! Спасибо.
Петр, так Вы все правильно вставили)! Так правильно.
код изображения с Яндекс фоток является открытой ссылкой и ее необходимо закрыть тегами*
А что означает фраза «открытая ссылка» и что значит «закрыть ссылку тегами»? Закрыть от чего или от кого?
Петр, во-первых здравствуйте!
Открытая ссылка — это ссылка по которой передается статический вес с той страницы, на которой эта ссылка проставлена.
Чтобы вес не передавался можно закрыть ссылку тегом noffolow, но лучше вообще убрать ссылку в скрипт.
Здравствуйте. Очень интересный и познавательный сайт. Не сочтите за дерзость, но пока читала вашу статью, увидела небольшую опечатку
«Похожу» несложную процедуру регистрации и загружаю эту картинку
Я сама только решала завести свой блог, и поэтому читаю как настроить WordPress. Блог будет кулинарный — пошаговыми рецептами с фото. И ваша статья мне очень пригодится. А попала к вам пока искала — «Правильная настройка плагина All in One Seo Pack», так и зависла тут )))
Здравствуйте Ирина! Спасибо за внимательность, ошибку уже исправил.
Успехов в ведении сайта!
Спасибо, Виталий! Вдохну поглубже и пойду удалять эти лишние картинки, знать бы сразу об этой заразе))) Вот только не могу понять зачем нужно оставлять крупный размер? Для чего он нужен? Если я использую только тот размер который загружаю в медиафайлы, то можно обнулить и крупный размер???
И еще вопрос, если удалять лишние картинки из хостинга, то это нужно вручную делать? Боюсь напутать и удалить нужные. Вобщем наваяла я Вам вопросов)) Спасибо заранее за ответ!
1. Ирина, можно не оставлять.
2. Да, удалять картинки надо вручную. По названиям будет понятно, какие удалять, а какие нет.
Вот наконец я это сделала: почистила все папки и удалила все лишние картинки. На сайте все ОК! ничего не нарушилось, А вот в библиотеке медиафайлов в панели вордпресс исчезли все миниатюры которые показывают список картинок, и невозможно сразу видеть как выглядит картинка, которая загружена. например чтобы выбрать ее для вставки в статью. При этом все картинки, которые я загружала в библиотеку медиафайлов после чистки на хостинге в списке присутствуют как ни в чем не бывало, хотя размер 150х150 отключен. Как такое может быть?
Изображения не отображаются ни в записях, ни в виджетах, ни в заголовке.
Отображаются лишь alt=»»
Всё очень сложно — время — экономика — не хватка его = нет экономики!!!
Виталий добрый день! Подскажите при вставке уже заранее оптимизированной картинки в библиотеку медиафайлов происходит увеличение приблизительно в 1.5 раз веса этой же картинки! И смысл оптимизации теряется!Это особенность WP или этой мой косяк в настройках?Подскажите!
С уважением Алексей
А что лучше или хуже для вставки видео на сайт: iframe или шорткод
Если Вы про видео с ютуба, то в редактор можно вставить обычный урл, например:
https://www.youtube.com/watch?v=l0md-YScA_MСпасибо за статью, но разрешите вопрос, возможно немного не в тему.
Как можно загрузить миниатюру на сайт, не загружая её на свой сервер? Тот же яндекс даёт прямые ссылки на фото, можно ли как то вставить именно ссылку на фото, а не проходить стандартную процедуру — загрузить в библиотеку с компьютера.
Спасибо
Можно.
Для сжатия картинок я использую сервис Compress JPEG.
Здравствуйте. С недавнего времени у меня вдруг перестали отображаться в статьях некоторые картинки. Причем они есть, если по ним кликнуть, то они открываются, а в тексте пустая — рамочка. Не знаете, с чем это может быть связано? Может — с обновлением движка? Спасибо.
По этой же теме. Когда редактирую статью и вставляю картинку, то в папке образуется еще одна картинка (дубликат) с разрешением 768Хна сколько-то там, которая так и называется «название картинки-768Х1…». Вот она-то на сайте и показывается, а по клике на нее открывается родная картинка. Не знаете откуда берется дубликат? В настройках «медиафайлы» везде стоят нули. Спасибо.
Дополнительные размеры изображений могут создаваться функцией add_image_size(), как в самом шаблоне, так и в некоторых плагинах.
Спасибо за полезную информацию. Тоже уже надо в ближайшем будущем начинать потихоньку сжимать фотографии, а то сайт начинает уже долго загружаться.
А как оптимизировать 40.000 изображений которые на сайте уже,кто знает хороший плагин?
21 век на дворе,нужно автоматизировать процесс сжатия,а не оптимизировать каждое изображение по отдельности.
Загрузил на сайт-плагин оптимизировал и все -автоматизировать,не все нужно руками делать,цените время друзья !
Здравствуйте. А что означает пункт «Отношение: attachment wp-att-3606» в «Параметры изображения»? Спасибо.
Здравствуйте Сергей! Можно подробней, где вы увидели этот «пункт».
Здравствуйте. У меня сейчас нет этого перед глазами, с Вашего позволения по памяти. В визуальном редакторе открыта статья для редактирования, есть картинка, наступаем на нее (в смысле — выделяем), появляется меню, выбираем пункт с «карандашом» (типа редактировать), ближе к низу есть строчка «Тайтл», под ней — вот эта. Спасибо.
Сергей, у меня ничего подобного нет, видимо это действие одного из плагинов.
Здравствуйте. Еще вот проблемка «нарисовалась». А админпанели в Настройки — Медиафайлы везде стоят нули, так вроде и задумывалось. Но мне вдруг понадобился определенный средний размер. Но картинок с таким разрешением в базе разумеется нет. Как бы сделать, чтобы все уже загруженные картинки продублировались с нужным разрешением, более того, чтобы именно этот средний размер сам выбрался в настройках отображения картинок? Спасибо.
Сергей, я бы тоже хотел написать такой функционал, и еще хорошо бы было, чтобы картинки сами сжимались при загрузке. В общем такой функционал надо еще изобрести, может когда и получится.
Виталий, добрый день!
Спасибо за статью, заглянул из поиска. Искал решение для того, чтобы разобраться с большим весом уже загруженных на сайт фото, и решение для тех, что еще предстоит загрузить.
Вопрос- а можно ли использовать плагин вроде WP SMUSH для того, чтобы при загрузке изображения автоматически ужимались и хранились на хостинге уже сжатыми? Может что-то посоветуете именно из плагинов для решения такой задачи?
Просто хочется экономить время. Когда пишешь статью, а там штук 15 фото, сделанных на зеркалку, то приходится либо ужимать онлайн (используя что-то вроде TinyPNG) либо офлайн через Фотошоп или Лайтрум.
Словом, буду рад если поделитесь каким-то плагином по этой теме, который экономил бы время. Если такой существует, разумеется.
Здравствуйте. А как правильно сохранить картинку когда клиент зарегистрируется на сайте? у меня на сайте при сохранении изображения сохраняется горизонтально а не вертикально как следует.
Заранее Благодарю.