Как улучшить качество картинки в html

image-rendering

Сообщает браузеру, каким алгоритмом интерполировать изображение при масштабировании его размеров или изменении масштаба в параметрах браузера.

Синтаксис

image-rendering: auto | optimizeSpeed | optimizeQuality | inherit | crisp-edges

Значения

auto Браузер автоматически подбирает алгоритм интерполяции, обычно соответствует optimizeQuality . optimizeSpeed
Цель алгоритма — быстрое отображение картинки, для чего применяется метод интерполяции по ближайшим точкам. Он не создаёт сглаживания вокруг линий и его можно рекомендовать в тех случаях, когда требуется сохранить первоначальный набор цветов и резкость краёв. optimizeQuality
Повышает качество картинки за счёт использования бикубического метода интерполяции. Это даёт сглаженные границы и плавный тоновый диапазон цветов. crisp-edges Сохраняет контраст и контуры изображения, не допуская размытия цветов и контуров.

Влияние разных значений на вид изображения при увеличении его масштаба показано на рис. 1.

Рис. 1. Результат применения методов интерполяции

HTML5 CSS2.1 CSS3 IE Cr Op Sa Fx

     img < border: 1px solid #ccc; >.fast 
    

В данном примере две картинки с шириной 30 пикселов увеличиваются до 200 пикселов с использованием разных алгоритмов. Для левой картинки применяется алгоритм, заданный по умолчанию (билинейный), для правой — метод интерполяции по ближайшим точкам (рис. 2).

Рис. 2. Результат использования image-rendering с разными значениями

Браузеры

Chrome не поддерживает значения optimizeSpeed и optimizeQuality . Вместо crisp-edges поддерживает значение -webkit-optimize-contrast .

Opera поддерживает значение -o-crisp-edges .

Firefox поддерживает значение -moz-crisp-edges .

CSS по теме

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

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

 Пример: 

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

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

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

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

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

height="140" width="300" src="http://2.bp.blogspot.com/-VP4M3wO_6bI/TZQTkeTitII/AAAAAAAABqI/NcFUT08viuc/s1600/Risunok.jpg" style="float: left;"/> 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.

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

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

Я выбрала на этот раз большое изображение размером 1600px на 1200px.

А добавилось фото не таким уж большим. Но картинка является ссылкой на рисунок с исходным размером. Её можно удалить. Переходим на вкладку «Изменить HTML» и убираем выделенный фрагмент.

Я хочу увеличить размер до 550px в ширину. Для этого меняю в URL s320 на s550, width=»320″ на width=»550″, height=»240″ на height=»412″ (его я подсмотрела, загрузив полученный URL в строку браузера, нажав на картинке правой клавишей мышки и выбрав из появившегося меню «Информация об изображении»).

Картинка довольно четкая (скриншоты, используемые в данной статье, делаются по той же методике). Для сравнения не будем трогать URL:

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

Теперь нужно добавить alt=»текст, если изо не показан браузером». И картинка будет оптимизирована.

Код:

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

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

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

  
 100 | 200 | 300 | 400 | 500 | 600

100 | 200 | 300 | 400 | 500 | 600

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 картинок подряд, я поставил только перед первой

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

> Есть ещё 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

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

Как улучшить качество изображения при его загрузке в canvas?

Качество изображения при загрузке ужасное. Кто знает в чем может быть проблема?

• Вопрос задан более трёх лет назад
• 2594 просмотра

2 комментария

Оценить 2 комментария

eSelf @eSelf Автор вопроса

Вопрос решился таким образом:

function drawNewImage(img) var canvas = document.getElementById(‘myCanvas’);
var ctx = canvas.getContext(‘2d’);
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img,0,0);
>

Качество картинки

Есть картинка 320×200. Я размещаю ее в блоке шириной 260 пикселей, высота картинки уменьшается пропорционально до 162,5, но экран не может отображать не полное количество пикселей. Я замечаю, что качество картинки хуже, чем когда она была в блоке шириной 320 пикселей. Нужен совет.

Отслеживать

17.5k 2 2 золотых знака 24 24 серебряных знака 52 52 бронзовых знака

задан 10 янв 2018 в 14:33

Алексей Пуха Алексей Пуха

7 1 1 серебряный знак 6 6 бронзовых знаков