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

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

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

<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

Её можно изменять на любое значение. Вот некоторые:

• s00 - исходный размер,
• s800,
• s640 - очень крупный,
• s512,
• s400 - крупный,
• s320 - средний,
• s200 - маленький,
• s150,
• s144,
• s72-c используется в миниатюрах у гаджета "Популярные сообщения",
• s64,
• s48.

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.

<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>