Skip to content
 

Редактируем картинки не покидая сайта

редактирование изображения

Здравствуйте, уважаемые посетители блога «Создание и продвижение сайта». Сегодня я расскажу вам о новых возможностях редактирования фотографий и картинок в административной панели WordPress. Часто бывает, что мы второпях загружаем на блог фотографии большого размера, или по неопытности, на первых шагах ведения блога, размещали картинки не оптимизированными (здесь читайте как их оптимизировать). Раньше нужно было удалять такие картинки и фотографии. Редактировать их в программах, затем опять закачивать на сайт. В новом WordPress, добавлена возможность редактирования таких изображений в административной панели сайта.

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

редактирование картинки

Открывается следующее окно редактирования. Вверху над картинкой семь иконок, при наведении курсора всплывают подсказки. Вы можете изображение:

  1. Обрезать
  2. Повернуть против часовой стрелки
  3. Повернуть по часовой стрелке
  4. Отразить по вертикали
  5. Отразить по горизонтали
  6. Отменить действие
  7. Повторить действие

редактирование изображения

Справа ещё колонка для редактирования изображения. Вверху опция — «масштабировать». Изменяем ширину картинки, высота изменяется автоматически. Жмём кнопку «масштабировать».

редактируем картинку

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

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

ОБРЕЗАТЬ 

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

Пропорции области
Пропорции — это соотношение ширины и высоты. При изменении размера выделенной области можно сохранить пропорции, зажав Shift. Укажите желаемые пропорции в полях ниже, например 1:1 (квадрат), 4:3, 16:9 и т.д.

Размер области
Выделив область, можно её отрегулировать, указав размер в пикселях. Минимальный размер области равен размеру миниатюры, заданному на странице «Настройки медиафайлов».

НАСТРОЙКИ МИНИАТЮРЫ 

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

Можно полностью заменить изображение на новое. В окне редактирования кнопка — «заменить». Нажимаете кнопку, выбираете на компьютере, или в библиотеке новое изображение, и старая картинка будет заменена на новую.

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

С уважением, ваша Ирина Баталова.

Я хочу быть в курсе событий на сайте!

Подпишитесь прямо сейчас, и получайте обновления на свой E-Mail:

Ваш E-Mail в безопасности

Google

118 комментариев

  1. Интересно. Пользуюсь только масштабированием. Остальное всё делал заранее. Надо будет как-нибудь попробовать и возможности WordPress. Только вот практически все мои картинки в статьях находятся на сторонних ресурсах. Не думаю, что при этом будет возможность их редактировать в полном объёме… Хотя… надо попробовать…

    • Вот про сторонние ресурсы сказать ничего не могу, мои картинки все на блоге, в библиотеке медиафайлов. Рада видеть вас, Александр, с выздоровлением!

      • @Ирина, на внешних ресурсах выгодно хранить изображения — так как пространство хостинга ведь не безразмерное, рано или поздно об этом задумываются все блоггеры.

        • @Юрий Йосифович, с этой стороны — вы правы. Сама думала об этом. А с другой стороны, как быть с внешними ссылками на сторонний ресурс? Да и сохранность изображений, вдруг ресурс накроется?

          • @Ирина, элементарно! У меня на компьютере стоит папочка например «Блог Йосифовича» в которую ложатся все изображения, которые отправляются сразу же на внешний хостинг (какое благо, что есть программа FastStoneCapture). Если ресурс накроется — копия этих файлов полетит по FTP на любой другой, а уже программой Зеброид или TextKit будет заменено все ссылки одним кликом мыши без лишних телодвижений (ведь только адрес сайта нужно будет изменить — а имена картинок остаются без изменений).
            По поводу внешних ссылок — мне кажется, что если картинки выводятся не Java средствами, то проблем такие ссылки не принесут.
            Более того, я очень часто использую именно такие методы на платных хостингах, где дают всего 10МБ бесплатно (если превышаешь — платишь) — тем самым экономия на большом количестве сайтов колоссальная.
            Если же вы говорите о том, что действительно могут быть проблемы с ссылками — тогда делаем ещё проще — просто нужно сконфигурировать домен третего уровня на этот внешний хостинг — и тогда поисковые системы будут считать эти ссылки внутренними (дела то 2 минуты создать запись A в сервисе управления доменными именами).

          • @Юрий Йосифович, очень удобная программа FastStoneCapture особенно для массового редактирования изображения с интуитивным интерфейсом. Пользуюсь ней уже длительное время.

        • Anna:

          Да, эта тема всегда была интересна для блоггеров…ох уж это пространство хостинга, никуда от него не деться, наверное…С уважением, Анна.

      • @Ирина, Вот только сейчас дошли руки посмотреть. Картинки, хранящиеся на сторонних ресурсах редактировать невозможно. Даже интерфейс этот не отображается. А вот те, что на своём хосте, в библиотеке медиафайлов — пожалуйста.

    • Anna:

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

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

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

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

      • Anna:

        Да редактирование картинок происходит быстро и очень качественно…А вот с отступами что-то они перемудрили…Хотя я как-то вставляла картинку и она вставилась с отступами…Нужно ещё раз перепроверить, возможно, я ошибаюсь…С уважением, Анна. 🙂

  4. Эх, у меня не wordpress, так что придется жить с ошибками.

    • @Иван, переходи на вордпресс, не пожалеешь. Освоишься потом можно и на Джумлу, там еще больше возможностей.

    • @Иван, Да, Иван, я тоже рекомендую вам переходить на вордпресс, это несложно и очень интересно. Если уж у меня, незрячей, всё получилось, то у вас и подавно получится. А если вас останавливает оплата за домен и хостинг, то на самом деле содержать их совсем не дорого, мне 1000 рублей в год за глаза хватает. Только домен в зоне ru берите, он и продвигаься хорошо будет, и стоит всего 99 рублей.

      • @Татьяна Суркова, если будет желание создавать еще один блог, то обязательно сделаю его на вордпрес, а так переносить свой блог не буду.. Это очень хлопотно и долго.

    • Иван, зачем же жить с ошибками, 😉 нужно исправлять их. Правда это займёт немного больше времени. Ну а в идеале, нужно сразу всё делать без ошибок.

  5. Хорошо, что вордпресс совершенствуется, добавляя новые удобные функции. Редактировать картинки из админ-панели, конечно, удобнее, чем туда-сюда их качать.

    • Да, совершенству нет предела, вот ещё бы не убирали возможность ставить отступы текста от картинки, тогда бы я им пять поставила. 😉

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

        • @Юрий Йосифович, я это знаю, просто я имела в виду, что иногда нужно для картинок разные отступы. Бывают такие моменты, когда для картинки нужен отступ больше или меньше. Раньше это легко решалось, а теперь нет. Теперь можно установить в стилях единый для всех картинок отступ. 😡

          • @Ирина, подобная проблема решается присвоения разным отступам разных класов в CSS. А потом просто задаем этот класс для своей картинки.

          • @Юрий Йосифович, таким способом как ты предлагаешь Юрий очень удобно

  6. Надо заняться форматированием изображения для миниатюр 😈 Спасибо, полезная статья.

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

    • Татьяна, многие не обращают внимания. Поэтому я и написала статью.

      • Anna:

        Ирина, а как можно установить водяной знак? Не могу понять пока…Это тоже будет связано с кодами???? Если это возможно,расскажите об этом…С уважением, Анна.

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

          • Anna:

            Ирина, здравствуйте! А у вас случайно, нет такой записи, чтобы прочитать пошаговую инструкцию, как это можно сделать?…С уважением, Анна

  8. Вау, полезный урок! Не знал о таком!
    Да и вообще, я наверно, на выходных выделю время и займусь своими картинками!!
    Оптимизирую, масштабирую, поставлю водяной знак и внесу в рамку)))

  9. Ирина, спасибо, очень полезная статья, я все делаю заранее, о таких возможностях редактирования картинки не знала! Буду знать теперь о таких тонкостях!

  10. Я вот и не заметила о таких изменениях. Пыталась редактировать файл в библиотеке, но потом отказалась от этой затеи — что-то не то получалось. Как всегда полезно, спасибо 🙂

  11. Надо же, а я и не видела, все по старинке в редакторе делаю. Спасибо большое, что показали.

  12. А при таком подходе сайт не будет забиваться дубликатами изображений?

    • Нет, остаётся только изображение после редактирования, а то, которое было до редактирования удаляется навсегда. Хотя наш сайт по любому «забит» не нужными изображениями. Ведь ворд сохраняет три копии одной картинки по умолчанию. Это миниатюра, средний размер и полный размер. Я как раз собираюсь провести генеральную уборку в библиотеке медиафайлов, и по удалять дубликаты. Как раз напишу урок, о том, как правильно это сделать. Это будет полезно тем, у кого много изображений и фотографий.

  13. Информация в статьи очень полезна и новая для меня, я раньше редактировал изображение на ПК а после перекидывал на хостинг, теперь буду делать по новому

    • @Иван Зелинский, в основном так и нужно делать, как делаете вы. А редактировать картинки на хостинге в редакторе можно те, которые давно уже загружены. Бывает, что нужно поменять картинку, или изменить размер. Может быть вы смените тему, и старые картинки не войдут по размеру — вот тогда и пригодится редактор. ➡

      • @Ирина, спасибо за рекомендацию, Вы правы

      • @Ирина, да-да, бывает просто необходимо использовать редактор картинок на хостинге — ведь не всегда под рукой есть специальные программы.

        • @Юрий Йосифович, нужно просто знать, что есть такие возможности в редакторе ворда. А то многие не обращают на это внимание, и ищут специальные программы, скачивают изображения на компьютер, там обрабатывают, а потом загружают назад, иногда забывая удалить прежнее изображение и захламляя тем самым блог. ➡

          • @Ирина, согласен с Вами, что нужно знать и меть применять разные методы — благо, что их есть много. Но мне кажется лучше изначально подготовить материал (изображения) до выбранного стиля а потом публиковать. В последствие таким образом избавляешь себя от множество рутинной работы

          • PS: ворд является текстовым редактором и он не очень то подходит для редактирования изображения

        • Anna:

          Как обычно бывает, что их действительно нет или не работают по какой-то причине…С уважением, Анна.

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

  14. Ира, а какая версия вордпресса у тебя? на моем вордпрессе такой возможности, увы, нет

  15. Здравствуйте!
    Я тоже редактирую картинки до установки на сайт. Но мало ли 😆 , бывают разные моменты. тем более вы хорошо сказали о новичках, хотя я делала это с самого начала (теперь только иногда подправляю в старых картинках размер).
    Спасибо за такой обзор и помощь.

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

      • @Ирина, одни говорят одно, другие утверждают обратное. Я как то с этими пытаюсь разобраться. Если реагировать изображение на сайте, то есть вероятность получить так званый мусор. Я даю предпочтение тому, чтоб изначально подготовить а потом публиковать. На сайте уже предусмотрен должно быть регламентировано в таблицах стилей положение , ориентация изображения

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

  16. Видела я эти функции, пробовала редактировать.. И что-то результата не получила, того. какой хотела.. Поэтому готовлю фото для блога по-старинке, на своем ПК. а потом уже загружаю.

    • Натали, большинство так и делает. Не зависимо от того, как кто делает и в каком редакторе — необходимо знать несколько способов, а под себя тот которые пользователю удобней. Статья очень познавательная не только для новичков но и так званных ГУГУ не помешает вспомнить о таком способе редактирования на стороне хоста

    • Anna:

      Натали, я бы вам порекомендовала вот этот фотошоп онлайн Pixlr — это онлайн редактор, в котором можно делать всё, что угодно с картинками, не захламляя свой сайт. Он заменяет фотошоп, очень простой в использовании и очень качественный…Просто наберите в поиске «фотошоп онлайн Pixlr», и он высветится, а там уже разберётесь, там не сложно…Можно загрузить туда картинку из компьютера своего, можно по ссылке и можно с другого источника даже…С уважением, Анна. 🙂

  17. Я несколько месяцев я только что обновила вордпресс и поняла,что все внутри изменилось,и уменьшить картинку у меня не получилось.Хорошо,что вспомнила про вашу статью,очень помогла

    • @Олеся Сазонова, ведите каким нужным делом Ирина занимается. А на все это нужно время и громадный труд

    • Anna:

      Олеся,в редакторе вордпресс есть такая возможность, вы только внимательно посмотрите…Нажимаете вставить медиафайл,загрузить и в библиотеке, куда загрузится ваша картинка, там вы увидете раздел -РЕДАКТИРОВАНИЕ…Теперь осталось только внимательно всё рассмотреть…С уважением, Анна. 🙂

    • Anna:

      Олеся, у Ирины не блог, а маленькая энциклопедия…Здесь всегда найдёшь ответ на любой вопрос…С уважением, Анна. 🙂

  18. А что, удобно сделали) Иногда просто надо изменить размер картинки, но, я уже привыкла заранее подгонять картинку по нужным размерам. Теперь можно не заморачиваться. Спасибо за обзор, Ирина!) Я пока еще не изучала нововведения вордпресс.)

  19. Я тоже недавно обнаружил редактор,уже и размеры менял,очень удобно.

    • Anna:

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

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

    • Правильно делаете, так и нужно! Но некоторые новички не сразу делают как положено, и тогда впоследствии приходится редактировать изображения в редакторе сайта.

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

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

          • Anna:

            Ирина, давайте, делайте эту чистку блога от дублей картинок и нам обязательно об этом расскажите и научите нас этому…С уважением, Анна. 🙂

          • О, я уже давно почистила блог от дублей картинок. Осталось только статью написать, инструкцию для новичков.

  21. Ирина, это точно. Я помню когда пробовал добавлять первые картинки на сайт, то тоже подгонял по размеру сайта. Я тогда не знал как можно редактировать картинки. Сейчас уже немного научился.

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

    • И что теперь реально сводите все картинки к тому размеру, который необходим?
      Я вот читал об одной библиотеке от гугла, которая позволяет уменьшать на сервере изображения без потери качества (гугль её рекомендует) — может все же лучше использовать эту альтернативу, чем резать каждую картинку? А то, к примеру многие сайты обоев (которые специализируются на картинках) стараются все же сохранять оригиналы…

      • Юрий, ну я подгоняю картинки под размеры своего сайта и при этом заодно и её вес уменьшаю.

      • Ну так это их специализация. 😉 что же это за обои, без оригинального размера. Я вот подумываю сохранять картинки, требующие увеличения, на сторонних ресурсах. Например на том же гугле пикасо, или на радикале. Встречала многих блоггеров, которые так делают уже давно.

        • Если честно, то меня, ка посетителя сайта, раздражает,когда перекидывает ,к примеру, на радикал. Поэтому я бы подумала,стоит ли так делать.Я у себя скорее всего не буду

          • Олеся, если картинку не делать ссылкой, то перекидывать никуда не будет. Разве что посетитель нажмёт на картинку правой кнопкой мыши, и выберет «открыть в новой вкладке».

  22. Ирина, в другой версии ворпресса была функция отступа от картинки, а в новой ,я не найду.Не подскажете , есть такая возможность и где это делается?

    • Anna:

      Олеся, здравствуйте! Извините, что вклинилась в ваш разговор, но я знаю, как это просто можно сделать, поскольку сама очень долго искала ответ на этот вопрос.Теперь давайте разберемся, как это сделать. На самом деле нет ничего сложного. Достаточно вставить вот этот style=»border: 10px solid white; margin: 10px;» небольшой код в нужное место. Для этого идем в редактор нашей статьи, далее нажимаем на кнопку «Текст» и находим в коде нашу картинку. Сделать это не сложно. Код вставляем сразу после номера картинки и перед тегом src=»

      Это будет выглядеть вот так: <img class="alignleft size-full wp-image-11332"style="border:7pxsolid white;margin:7px;" src

      Такой код нужно вставлять каждый раз, если вам нужны отступы текста от картинки. Отступы вы можете выставлять сами:в коде указаны размеры в 7px, а вы можете выставить 10 и более…Не знаю, насколько понятно я Вам объяснила…С уважением, Анна. 🙂

  23. Вот действительно: век живи, век учись. Я изображения всегда во внешних программах редактирую и знать не знал что это можно сделать во внутренней программе. Спасибо большое за статью, приму на вооружение

  24. Anna:

    Ирина, добрый день…Прочитала с интересом вашу статью…Я пользуюсь этими инструментами, это очень удобно…Думаю, что статья о том, как избавиться от дублей картинок, уже написана вами…Буду искать и изучать…С уважением, Анна. 🙂

Написать отзыв

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: