на современных ретина-екранах (макбуки с 12-го года) пиксели в четыре раза меньше за те что на обычных экранах, что дает радикально более гладкие шрифты и картинки. С шрифтами всё работает из коробки, они ведь векторные, а не растровые и красиво масштабируются на любой размер.
С растровыми картинками всё работает замечательно когда они тоже четверного разрешения, а когда обычного — то система их масштабирует, и получаетя размытость.
лучше всего заголовок сделать текстом, а не картинкой — современные браузеры поддерживают подгрузку шрифтов.
а если картинкой, то проще всего отрендерить её как 1000х220 и указать тегу img атрибуты ширину и высоту 500 на 110. Тогда на ретина экранах она будет как задумано, а на обычных — ужмется в два раза и тоже будет ок.
Спасибо огромное за ответ, попробую помудрить с темой и ее настройками. Дело в том что картинка у меня есть и в высоком разрешении, но на место она становится именно с малым.
![[personal profile]](https://www.dreamwidth.org/img/silk/identity/user.png){kind=small}
no subject
Date: 2018-02-23 06:45 pm (UTC)no subject
Date: 2018-02-23 08:45 pm (UTC)no subject
Date: 2018-02-24 09:17 am (UTC)мелочь: заголовок под ретина-екран не оптимизирован
no subject
Date: 2018-02-24 03:16 pm (UTC)Обьясните пожалуйста по поводу ретина-дисплея - что там не так показывается, я просто действительно смутно понимаю что должно быть и что есть сейчас.
no subject
Date: 2018-02-24 06:39 pm (UTC)С растровыми картинками всё работает замечательно когда они тоже четверного разрешения, а когда обычного — то система их масштабирует, и получаетя размытость.
см. https://www.safaribooksonline.com/blog/wp-content/uploads/2012/02/css3tip1fig1.jpg
и сравните размытость заголовка и прочего текста.
https://i.imgur.com/Iu6NAfx.png
лучше всего заголовок сделать текстом, а не картинкой — современные браузеры поддерживают подгрузку шрифтов.
а если картинкой, то проще всего отрендерить её как 1000х220 и указать тегу img атрибуты ширину и высоту 500 на 110. Тогда на ретина экранах она будет как задумано, а на обычных — ужмется в два раза и тоже будет ок.
Также часто делают две картинки, и в CSS-стилях указывают какая из них будет применяться фоном в каких условиях. Т.н. media-queries. https://ymatuhin.ru/front-end/retina_media_quires/
no subject
Date: 2018-02-24 09:10 pm (UTC)no subject
Date: 2018-02-24 06:28 am (UTC)no subject
Date: 2018-02-24 03:17 pm (UTC)