Почему ухудшается фото при добавлении на веб-страницу

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

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

Теперь пропорционально увеличим значение: Для пропорционального изменения можно указать только width или height. Вид уже не чёткий, а загрузка страницы требует большего времени, поэтому так делать не рекомендуется. Следует сначала изменить размеры в редакторе изображений, например, в Фотошопе.

А так выглядит непропорциональное изменение:

URL в веб-альбом Picasa на платформе Blogger

, , , , , , , , , используется в миниатюрах у гаджета "Популярные сообщения", , .

Добавление рисунка в редакторе blogger.

Перед добавлением нужно оптимизировать файл и задать ему название, характеризующее картинку. Я выбрала на этот раз большое изображение размером 1600px на 1200px.

Аналогично, коли забудем про height и width, изменив URL.

Теперь нужно добавить alt="текст, если изо не показан браузером". И картинка будет оптимизирована. Код: показывает, что нужно выровнять изображение по центру. Его не обязательно использовать, например, если мы хотим, чтобы текст оптекал фото справа, код заменим на:

Скрипт для увеличения картинки из Picasa.

41 комментарий:

Elchin Vahid Полезная статья. Cпасибо! NMitra Отлично) Аль Хух теперь я научусь hh) PANIC а если изображение имеет ширину больше 1600, я не могу загрузить фотографию именно в этом большом размере из альбома picasa? потому что иначе выдает ошибку 404 NMitra Вместо s1600 попробуй указать s00 Photographer Seluyanov А как можно сделать картинку ссылкой на другой ресурс? NMitra Посмотрите здесь - http://shpargalkablog.ru/2010/09/postroenie-ssylok-v-html.html#izo olyasozera Спасибо в очередной раз за полезный совет!А вот, например, если я ставлю размер свой, а нестрандартный: между большой и очень большой, и s640, это нормально или нехорошо? будет тяжелее? NMitra Любой на ваш выбор. Но следите за height и width. Mishechka Здравствуйте, Наталья!Каждая картинка в сообщении заключена в такой код:

У меня идут, допустим, 5-6 картинок подряд, я поставил только перед первой <div style="clear: both; text-align: center;"> и только после последней </div>, а во всех остальных этот код удалил.Так можно делать? NMitra Я оставляю только код изо http://shpargalkablog.ru/2010/08/podpis-kartinki-html.html Mishechka У меня картинки 640х480 уменьшены до 72х54 и увеличиваются по клику. Расположены все в одной строке одна за другой, а весь блок картинок выровнен по центру строки. Посмотрите здесь http://portable-rus.blogspot.com/2013/05/divnyj-sad-2.html NMitra Проблем не вижу Игорь Тема не вполне раскрыта.Картинку нужно загружать в блог в том размере, в каком она будет показываться,а не менять с помощью длины и ширины, в этом случае пересчёт размера будет производиться в браузере, и не факт, что по качественному алгоритму. Да и разные они в разных браузерах. NMitra Это как так: длина и ширина разная в разных браузерах?

"Картинку нужно загружать в блог в том размере, в каком она будет показываться" - раньше да, сейчас не согласна. А как же отзывчивая вёрстка? Или увеличение изображения?

Сейчас я действую по такому алгоритму: указываю длину/высоту для крупного изображения чтобы упростить работу браузеру. При уменьшении экрана начинают действовать стили max-width: 100%; height: auto; Игорь Не размер будет разный, а качество. Есть разные алгоритмы изменения размеров.И не все из применяемых качественные,тем более, что браузеры конкурируют за скорость. Глубоко я не копал, но на практике столкнулся с тем, что если задавать иную длину и ширину,чем у загруженной картинки, качество может сильно ухудшиться. NMitra Конечно, браузер не сможет высокого качества маленькую картинку перевести в высококачественную большую, но наоборот у них вполне приемлемо выходит.

"если задавать иную длину и ширину,чем у загруженной картинки" - именно об этом и пост. Если уж задаёте иные размеры, то не забывайте менять значение после s в URL изображения, загруженного в бывшую Пикасу. Игорь Так получается,что меняя s, мы даём команду изменить размеры на стороне сервера, и результат не зависит от браузера. А задав s исходным и меняя ширину и высоту,масштабирование производим в браузере.В обеих случаях производятся некие вычисления, и если исходник тяжёлый, может уйти заметное время. А если фотка нужного размера, то грузится сразу.Но это так, мудрствование. Гаша Здравствуйте, Наташа! Я у себя в блоге установила два виджета в левой боковой колонке

Случайные сообщения и Рекомендуемые сообщения. В обоих случаях поставила размер изображений 200px. Но в - Рекомендуемых - отличное качество, а в случайных - ужасное. Можно ли это как-то исправить? NMitra Там искажается размер. Посмотрите в Популярных сообщениях как сделано http://shpargalkablog.ru/2011/03/populyarnye-soobshcheniya-blogger.html#uvel , там написан нужный скрипт Hive Med Здравствуйте, у меня сейчас другая проблема - искажается цвет бэкграундной JPEG картики. Она становится темнее, как будто на нее дополнительно накладывается серый фильтр. С PNG такой проблемы нет, но они тяжелые. NMitra Здравствуйте. В настройках Google+ https://www.google.com/settings/plus "Автокоррекцию" нужно пометить как "Отменить все изменения". Я об этом тут писала http://shpargalkablog.ru/2012/11/nastroit-blogger.html

Сама с этим мучилась, пока Эльдус не сказал что делать ( blogopoisk.ru ). Происходит из-за связи с Г+ Hive Med Спасибо! Eugene Здравствуйте. Не нашел подходящей темы, пишу сюда. Не знаете что происходит в последнее время с гаджетом ютюб для блоггер? Он то показывает набор видео, то нет, то показывает не мой канал. Я его переставлял, не помогает. До этого работал нормально два года. NMitra Здравствуйте, обратитесь, пожалуйста на форум

1) https://groups.google.com/forum/#!forum/blogoask (неофициальный, такие же пользователи)2) https://productforums.google.com/forum/#!categories/blogger (англоязычный, есть ведущие участники и сотрудники Google) Eugene Ок пробую. еще момент - сейчас к каждому посту в хвост ссылки блоггер крепит чтo-то за тегом # типа axzz3a7O2xF.К чему бы это? NMitra Покажите пример (на какой странице, в каком месте) Анонимный Здравствуйте,

Я перепробовал несколько кодов, которые нашёл в сети. Но во всех случаях качество картинок ухудшается. Вот тестовый блог - test-blogger-9.blogspot.com , оригиналы картинок разных размеров и качества, и у всех фото видна потеря качества на блоге. Или, при использовании другого кода, качество нормальное, как сейчас, но ширина картинок не соответствует величине, заданной в коде.

Вот блоги, где в сообщениях несколько фотографий, и все без потери качества и есть выравнивание по ширине:

Мне важно, чтобы не терялось качество и выравнивались по ширине при загрузке сразу нескольких фотографий в одном сообщении, чтобы не править каждое фото (html-код в сообщении) вручную. Возможно ли такое, в принципе? NMitra Здравствуйте, вот код на вашем блоге

Чем больше изображение, тем оно четче. Попробуйте так

Плюс посмотрите комментарий 22 Космо Мизраил Горыныч Наташ, привет.У блогспота по крайней мере сейчас можно указывать любой размер в урл картинок - http://2.bp.blogspot.com/-NEvSypEsQv0/TZQ1tka_UwI/AAAAAAAABqo/qjYR-YSjjws/s808/mishki.jpg

Реально 808х606 выходит. И кропать тоже можно с любым размером.

Я сейчас пилю шаблон, где в блоге шапка из внутренней картинки делается, и она размером аккурат в 808 пикселей 😆 очень пригодилось, а то на 800 - размыто, а на 1600 - слишком жирно) Космо Мизраил Горыныч Это просто надо указать бы более явно в статье, а то я мучался-мучался, и только сейчас увидел, что в примере похожее делается. NMitra Привет, спасибо за замечание, поправила Космо Мизраил Горыныч НАТАШААААА. Я что-то нашёл О_О

http://2.bp.blogspot.com/-NEvSypEsQv0/TZQ1tka_UwI/AAAAAAAABqo/qjYR-YSjjws/w808-h260-n-no/mishki.jpg это же божееественнноооо О___О

Пы.Сы. Я тебе на почту ещё написал, надеюсь, не попадёт в спам. Космо Мизраил Горыныч Чуть-чуть поковырял; Можно отдельно оставлять w100 и h100 по выбору, тогда уменьшение будет конкретно по этим сторонам вестись.-n делает кроп; что делает -no — непонятно.Можно тоже так же добавлять -c, но это не особо актуально, ибо размеры будут разные на разных картинках и в шаблонах да кодах разумнее использовать размерность s100. NMitra Это очень и очень интересно! В поиске только это нашла(картинка на светлом фоне): http://2.bp.blogspot.com/-NEvSypEsQv0/TZQ1tka_UwI/AAAAAAAABqo/qjYR-YSjjws/s800-h/mishki.jpg NMitra Как это вообще можно было найти? NMitra Ага, вот ещё http://2.bp.blogspot.com/-NEvSypEsQv0/TZQ1tka_UwI/AAAAAAAABqo/qjYR-YSjjws/w300-h300-p/mishki.jpg NMitra И w400-h300-p и w400-h300-n-no делают одно и то же: уменьшают фото по w и подрезают его по hК сожалению, это не то же самое, что кадрировать. Есть ещё s1000-fcrop64=1,40922c63ffb5bc44, я без понятия как этим управлять. Взяла его из Г+. Космо Мизраил Горыныч > Как это вообще можно было найти? Я просто так подумал, что раз при установлении обложки в гуглопрофиле можно кадрировать изображение, то гугл не делает по факту такое изображение, а кадрирует по ссылке, ибо оригиналы всё же сохраняются в альбомах. Сейчас пикаса и гуглоплюсоальбомы — одно и то же, следовательно, и на блогспоте можно кадрировать! Посмотрел фон своей обложки (урл), увидел этот волшебный фрагмент, применил на обложку поста в моём блоге — работает х)

> В поиске только это нашла(картинка на светлом фоне)странность такая, это же отдельная HTML-страница, которую нельзя внедрить на другую (скрипт мешает). Зачем она вообще придумана? Оо

📎📎📎📎📎📎📎📎📎📎