Как сделать изображения на мобильной версии сайта при адаптивной верстке?
Возникла ситуация - делаю из обычной верстки адаптивную
Есть картинка IMG, картинка размером 600 на 600 пикселов.
На мобильной версии она должна стать 200 на 200.
Я не могу сделать max-width - это не понравится гуглу, что картинка автоматически меняет размер, и не понравится айфону с его Ретина-дисплеем, который сделает картинку мутной.
Если я сделаю так как всегда делал, через стили и background: url() то работать будет, но картинка не будет продвигаться, поскольку она не в теге IMG.
Как бы так впихнуть ее в тег IMG, да еще чтобы менялся URL при изменении размеров экрана, да еще чтобы не страдало SEO и не было ресайзинга в каждом кадре?
Повторюсь еще раз - кто плюет на гугл и яндекс - будет платить сеошникам. Много и долго. Если гугл скажет, что ваш сайт должен гавкать и стоять на задних лапках - вы или сделаете это, или нет. Вам решать.
Более адекватный вариант на stack-overflow:
div.only-mobile>img
div.only-desktop>img
и показывать то один то другой
И пусть грузятся в этом случае оба - Pagespeed Insights обмануть получится.
Увидим, когда перестанете писать код и будете считать деньги - оч быстро поймете, что говорили ведь, что нужно учесть сначала, а теперь вот - компания в каждом регионе статьями продвигает, вместо перелинковки и быстрого как чума сайта. А каждая сео-фирма косарь жрет в месяц.
Да умножить на 255 стран, да в некоторых на число регионов - и миллион долларов в месяц на продвижение отвали.
А казалось, картиночку не сделал адаптивной и гугл ругался.
Средний
