Уменьшаем анимированную картинку для статьи

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

Доброе утро, дорогие друзья. Да, да именно утро сейчас у нас в Киеве. Сегодня 2 ноября и за окном идет мелкий прохладный осенний дождик. Хорошо пишутся статьи под такую погодку. Кстати, в моей папке «Осень» я давно храню шикарнейшие анимированные осенние фоны для музыкальной открытки. Думаю, что эта открытка будет открыткой-караоке, где можно будет подпевать исполнителю. Но все как-то руки не доходят до «Осенней открытки». Появляются другие важные дела.

Вот и сейчас, я только что опубликовала для Вас новую статью «Как изменить размер GIF картинки для открытки». Не успела толком попрощаться, как мне в голову пришла идея для этой новой статьи. А пришла она именно тогда, когда свеженькая статья была еще в редакторе и я вставляла в нее GIF картинку. А ведь она была размером 400×315 пикселей. И не подходила для анонса моей статьи.

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

Уменьшаем анимированную картинку для статьи

Осень в парке «Бобровый берег», штат Оклахома

Чтобы не повторяться с картинками, в анонс этой статьи я вставлю другую картинку. Например, вот эту с пушистым белым котом. Вы ее уже видите в начале статьи. Кстати я вставила в этот пост именно эту картинку, потому, что у меня живет такой кот, его зовут Масик. Наверное, скоро вся моя веселая семейка будет представлена на этом блоге. Это шутка. Теперь о серьезном. Оригинальный размер картинки с белым котом 200×136 пикселей. А мне для картинки в анонсе нужен такой размер, чтобы ширина была именно 150.

Это интересно:  Некрасивый список похожих постов после обновления плагина Contextual Related Posts

Делаем математическую пропорцию, о которой я писала в прошлой статье: 150×136:200=102. Вот я и получила новый размер для моей картинки. Только изменять его мы будем прямо в консоли в редакторе.

Заходим в «Консоль», «Записи», «Добавить новую». Вставляем GIF картинку любого размера обычным способом во вкладке «Визуально»:

Теперь здесь же переходим во вкладку «HTML» и видим, что действительно размер нашей картинки сейчас 200×136. Меняем старые цифры на новые: 200 на 150, а 136 на 102.

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

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

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Самое интересное в блоге

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

5 − 1 =