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

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

Код картинки имеет вид:

<img src="адрес" />

Пример:
<img src="http://2.bp.blogspot.com/-VP4M3wO_6bI/TZQTkeTitII/AAAAAAAABqI/NcFUT08viuc/s1600/Risunok.jpg" />

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

<img height="280" width="400" src="http://2.bp.blogspot.com/-VP4M3wO_6bI/TZQTkeTitII/AAAAAAAABqI/NcFUT08viuc/s1600/Risunok.jpg" />

Поскольку ширина и высота подобрана корректно, рисунок не потерял в качестве.

Теперь пропорционально увеличим значение:

<img height="385" width="550" src="http://2.bp.blogspot.com/-VP4M3wO_6bI/TZQTkeTitII/AAAAAAAABqI/NcFUT08viuc/s1600/Risunok.jpg" />

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

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

<img height="140" width="300" src="http://2.bp.blogspot.com/-VP4M3wO_6bI/TZQTkeTitII/AAAAAAAABqI/NcFUT08viuc/s1600/Risunok.jpg" style="float: left;"/>
<img height="280" width="200" src="http://2.bp.blogspot.com/-VP4M3wO_6bI/TZQTkeTitII/AAAAAAAABqI/NcFUT08viuc/s1600/Risunok.jpg" />

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

В Picasa загрузив раз фотографию, мы имеем возможность управлять её размерами. При этом нет необходимости в использовании фоторедактора. Вы наверно уже заметили в URL эту часть

http://2.bp.blogspot.com/-VP4M3wO_6bI/TZQTkeTitII/AAAAAAAABqI/NcFUT08viuc/s1600/Risunok.jpg
Её можно изменять на любое значение. Вот некоторые: s1600 - это ширина (width) или высота (height) изображения в зависимости от того, какая величина выше. Второе значение подбирается автоматически относительно изменённой цифры. В том случае, когда мы хотим получить одинаковые значения ширины и высоты, то есть квадратную картинку, после s640 добавляем -c, например, s320-c. Её мы можем установить любой, но только в сторону уменьшения. Например, для выбранного мной изображения с исходной величиной 400px не будет происходить увеличение картинки s800 и s640 (см. ссылки выше).

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

Перед добавлением нужно оптимизировать файл и задать ему название, характеризующее картинку.

Я выбрала на этот раз большое изображение размером 1600px на 1200px.
А добавилось фото не таким уж большим. Но картинка является ссылкой на рисунок с исходным размером. Её можно удалить. Переходим на вкладку "Изменить HTML" и убираем выделенный фрагмент.
Я хочу увеличить размер до 550px в ширину. Для этого меняю в URL s320 на s550, width="320" на width="550", height="240" на height="412" (его я подсмотрела, загрузив полученный URL в строку браузера, нажав на картинке правой клавишей мышки и выбрав из появившегося меню "Информация об изображении").
Картинка довольно четкая (скриншоты, используемые в данной статье, делаются по той же методике). Для сравнения не будем трогать URL:
Аналогично, коли забудем про height и width, изменив URL.

Теперь нужно добавить alt="текст, если изо не показан браузером". И картинка будет оптимизирована.
Код:
<div class="separator" style="clear: both; text-align: center;">.....</div>
показывает, что нужно выровнять изображение по центру. Его не обязательно использовать, например, если мы хотим, чтобы текст оптекал фото справа, код заменим на:
<div class="separator" style="float: left;">.....</div>

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

В поиске Яндекса по картинкам мы видим рядом с рисунками ссылки с размерами, нажав на которые получаем соответствующей ширины фото. Похожий эффект мы можем получить, применив скрипт, который будет менять URL
<script> function redimtest(valor) { var file; file="http://1.bp.blogspot.com/-Cqy6EOsRjP8/TdEEeukjW2I/AAAAAAAAB4I/0R8ZX-_dKgg/s" + String(valor) + "/lovluy-myach.jpg"; document.getElementById("redimimg").src=file; }</script>
<div style="text-align: center;">
<img id="redimimg" src="http://1.bp.blogspot.com/-Cqy6EOsRjP8/TdEEeukjW2I/AAAAAAAAB4I/0R8ZX-_dKgg/s400/lovluy-myach.jpg">
<a href="javascript:void(0);" onclick="redimtest(100);">100</a> | <a href="javascript:void(0);" onclick="redimtest(200);">200</a> | <a href="javascript:void(0);" onclick="redimtest(300);">300</a> | <a href="javascript:void(0);" onclick="redimtest(400);">400</a> | <a href="javascript:void(0);" onclick="redimtest(500);">500</a> | <a href="javascript:void(0);" onclick="redimtest(600);">600</a></div>


100 | 200 | 300 | 400 | 500 | 600
Rookee — инструменты для привлечения клиентов на сайт
в f t
наверх ↑

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
Здравствуйте, Наталья!
Каждая картинка в сообщении заключена в такой код:

<div class="separator" style="clear: both; text-align: center;">
...
</div>

У меня идут, допустим, 5-6 картинок подряд, я поставил только перед первой <div class="separator" 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 исходным и меняя ширину и высоту,масштабирование производим в браузере.В обеих случаях производятся некие вычисления, и если исходник тяжёлый, может уйти заметное время. А если фотка нужного размера, то грузится сразу.Но это так, мудрствование.
Гаша
Здравствуйте, Наташа! Я у себя в блоге установила два виджета в левой боковой колонке

http://gasha-makar.blogspot.ru/

Случайные сообщения и Рекомендуемые сообщения. В обоих случаях поставила размер изображений 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 , оригиналы картинок разных размеров и качества, и у всех фото видна потеря качества на блоге. Или, при использовании другого кода, качество нормальное, как сейчас, но ширина картинок не соответствует величине, заданной в коде.

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

lifeofaladybear.com
jimmartinphotoblog.blogspot.ru

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

<img src="http://1.bp.blogspot.com/-i73zkd9JDRo/VlgCFQZw17I/AAAAAAAACjY/zsCh1_cI6pw/s320/Picture%2B018_filtered.JPG" height="240" width="320">

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

<img src="http://1.bp.blogspot.com/-i73zkd9JDRo/VlgCFQZw17I/AAAAAAAACjY/zsCh1_cI6pw/s850/Picture%2B018_filtered.JPG" style="max-width: 100%; height: auto;">

Плюс посмотрите комментарий 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-страница, которую нельзя внедрить на другую (скрипт мешает). Зачем она вообще придумана? Оо

> Есть ещё s1000-fcrop64=1,40922c63ffb5bc44, я без понятия как этим управлять. Взяла его из Г+.
Можешь кинуть полную ссылку? Не получается обычную фоту так кропнуть.
Мне кажется, что тут некий "быстрый кроп" шириной 64 пиксела и соотношением сторон в 1.40922c63ffb5bc44
Космо Мизраил Горыныч
Нет, это не соотношение сторон (по крайней мере, не всё) — там же и буквы есть. Надо ковырять.
NMitra
http://2.bp.blogspot.com/-NEvSypEsQv0/TZQ1tka_UwI/AAAAAAAABqo/qjYR-YSjjws/s1000-fcrop64=1,40922c63ffb5bc44/mishki.jpg

Это какой-то волшебный инструмент, но нужно знать ключ :( Тоже из Г+