Масштабируем лого для сайта

[mms]

Пользователь mms разместил новый ресурс:

Масштабируем лого - Для более четкого логотипа

Если просто установить лого на сайт, оно не всегда выходит четким, приходится подгонять размеры, и очень часто логотим теряет четкость при уменьшении, и появляются мелкие дефекты.
Мы уменьшим логотип с помощью CSS, и он не потеряет четкость.

Узнать больше об этом ресурсе...

 

[Skaiman]

Теперь ваше лого будет смотреться на много лучше чем если бы вы просто сжали его в фотошопе.

Ну если правильно сделать в фотошопе, то будет все нормально. Фотошоп то здесь и ни причем :)

 

[mms]

Ну если правильно сделать в фотошопе, то будет все нормально. Фотошоп то здесь и ни причем :-)

Убедился в том что если ресайзить большое лого в мелкое в шопе, оно теряет качество, а через ксс смотрится просто отлично.
до
после

 

[sonic]

Убедился в том что если ресайзить большое лого в мелкое в шопе, оно теряет качество

ну если лого 1000х1000 уменьшать до 100х100, то возможно будут артефакты.. а если 200х200 уменьшить до 100х100, то никакого качества терятся не будет.

 

[mms]

ну если лого 1000х1000 уменьшать до 100х100, то возможно будут артефакты.. а если 200х200 уменьшить до 100х100, то никакого качества терятся не будет.

Решился на такие меры, из за того что на маке логотип смотрелся "покоцанным" а на винде (мозилла\хром\ие) было все нормально.

 

[Skaiman]

Если изображение сильно большое, надо уменьшать его постепенно, в пол размера, можно применять фильтр резкости, еще есть "Свободное трансформирование", с ним не теряется качество.

 

[sonic]

mms, понимаешь такая маленькая беда что ресайзит изображение не CSS, а движок браузера.. поэтому логично что если бы кто-то из кодеров которые пишут движок браузера придумал, что-то такое что делает ресайз картинки в браузере лучше чем это делают графические редакторы, то такие монстры как адобе просто выкупили бы права на этот код.

 

[Skaiman]

Да еще, используйте для WEB изображения в формате PNG и сохраняйте "Сохранить для web"

:) я не имею ни чего против, этого ресурса, нормальный ресурс, но за фотошоп обидно, понимаешь?

 

[Exile]

mms, sonic, Skaiman, проблема на маке не из-за фотошопа, размера картинки или чего-то там еще, а из-за retina. У меня тут (да и на сотне других сайтов) аналогично выводится не вполне корректно, замыленно. Есть много решений этих проблем - общепринятым считается использование 2 изображений, одного обычного, например image.png, а второго увеличенного в 2 раза - [email protected].

У Вас недостаточно прав для просмотра ссылок. Вход или Регистрация

- вот скрипт который делает остальную работу.

Вариант с масштабированием картинки в 2 раза тоже имеет место быть, но иногда масштабирование силами браузера не совсем корректно. Да и грузят пользователи не с retina большую картинку.

 

[Hope]

Используйте .svg формат. :)

 

[Exile]

Используйте .svg формат

Как вариант тоже, иконки на FontAwesome тут смотрятся прекрасно.

 

[Skaiman]

mms, sonic, Skaiman, проблема на маке не из-за фотошопа, размера картинки или чего-то там еще, а из-за retina. У меня тут (да и на сотне других сайтов) аналогично выводится не вполне корректно, замыленно. Есть много решений этих проблем - общепринятым считается использование 2 изображений, одного обычного, например image.png, а второго увеличенного в 2 раза - [email protected].

У Вас недостаточно прав для просмотра ссылок. Вход или Регистрация

- вот скрипт который делает остальную работу.

Вариант с масштабированием картинки в 2 раза тоже имеет место быть, но иногда масштабирование силами браузера не совсем корректно. Да и грузят пользователи не с retina большую картинку.

Я защищал только фотошоп :), а по этой теме надо мануал сделать, время будет займусь

 

[Kolya groza morey]

Минус этого способа в том что он увеличивает вес страницы, понимаю что с современными скоростями это не заметно, но все равно это не есть хорошо

 

[hakypuhbiu]

А что мешает просто через фотошоп нарисовать логотип нужного размера? :-D И он не будет терять качество.

 

[Skaiman]

А что мешает просто через фотошоп нарисовать логотип нужного размера? :-D И он не будет терять качество.

Дело тут в retina дисплеях, почитай https://xenforo.info/resources/Лого-форума-для-iphone-ipad.2629/, просто ты недопонял суть вопроса.

 

[mms]

Пользователь mms обновил(а) ресурс Масштабируем лого для сайта новой записью:

обновление

обновление FAQ

Узнать больше об этом обновлении...

 

[Time]

Как подвинуть логотип?
право/влево
верх/вних

 

[Skaiman]

Time, :) блин, тебе кодов столько было предоставлено, в ответах на твои вопросы, что уже можно и самому догадываться. Это пример того, что готовые решения ни чему не учат :).

 

[qwers]

А какой код то?))

 

[Exile]

qwers, https://xenforo.info/resources/Масштабируем-лого-для-сайта.2619/field?field=faq - скандалы интриги расследования.