Какое разрешение фотографий использовать на сайте фотографа?

Question

[eashla]

Занимаюсь оптимизацией сайта фотографа. Скорость загрузки сайта является одним из ключевых факторов ранжирования в поисковых системах органического трафика.

Последний год оптимизировал фотографии под разрешение 1280px по широкой стороне. Технологии развиваются быстро. Основной трафик идёт через мобильные устройства, но и у них разрешения экрана становиться всё больше и больше.

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

Comments

[Shinso]

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

[Одиночка Айс]

Shinso, все зависит от системы, на которой сидит сайт, в wp это делается на изи, у остальных пилится долго и упорно, если вообще пилится

Answer 1

[WapSter]

Как верстальщик и фронтендер скажу так, чтобы сильно не заморачиваться, используйте fullhd, сжимайте изображения, делайте их ссылками на оригинал, и используйте popup или без него. Вот и весь секрет. Если очень сильно заморочиться то можно использовать элемент picture, по этому вопросу Макеев крутое видео сделал на своём канале погуглите.

Comments

[eashla]

Вот это да.... кажется я открыл новое для себя! Спасибо вам, Тимур! Элемент picture это бомба.

Буду рад, если есть ещё блогеры, которых стоит посмотреть. Интересует оптимизация сайтов, smm и директ.

Ещё раз спасибо!

[WapSter]

eashla, больше подобных блогеров не знаю, к сожалению, все остальное в ру сегменте, для нубов: bootstrap, основные моменты в вёрстке, копипаст друг у друга и подобная шляпа. Разве что более или менее разжевано по webpack у Jack Coder.

Answer 2

[irishmann]

Как указали в комментариях

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

все зависит от системы, на которой сидит сайт, в wp это делается на изи, у остальных пилится долго и упорно, если вообще пилится

Все это нормально пилится, при загрузке изображений используя расширение GD, или пользовательские классы поверх него. Например: sanchiz.net/blog/resizing-images-with-php

Answer 3

[Максим Поспелов]

Можно указать размер 1920 при 57% компрессии jpg будет весить 542кб,
Можно указать размер 1200 100% компрессии jpg будет весить 860+кб.
Разница в почти три раза!

Самое главное при оптимизации картинок
- формат должен быть JPG
- что бы размер не был больше 1920 по большей стороне (высоте\ширине, так как бывает разная ориентация картинок)
- что бы компрессия была в районе 60-80%

А бывает затолкают формат BMP вместо JPG 4400 пикселей, и удивляются, почему картинка весит 12 мб, вместо 500кб.