Заморочился с responsive images и сделал полномасштабную имплементацию с intrinsic ratio, webp, тегом pictures и остальными ништяками. Но теперь встал вопрос касающийся дизайна и встал в ступор.
Какой ратио выбрать для картинок для сайта? В идеале это вероятно делается еще дизайнером на этапе создания макета (насколько я понимаю процесс) исходя из общего дизайна, но в моем случае макета сайта не было, версталось походу в браузере.
У меня, по сути, 2 вида изображений. Первый - это Главная картинка статьи. Т.е. то что идет в самом начале кк иллюстрация статьи, и эта же картинка показывается, на пример, в карточке-превью. Второй вид изображений - это уже иллюстрации в статье, например к каждому пункту, параграфу и тд.
Я погуглил, самые распространенные ратио это 4:3 и 16:9. Выбирать между ними? Какой куда? Мой глаз подсказывает что широкоформатные лучше наверное к главной/карточке, а более квадратные в саму статью. А как на практике? Попробовал посмотреть чужие сайты, но закономерности не вижу. Такое чувство что все пихают что под руку попадется.
Учитывая что изображения больше используются как превью (не несут смысловую нагрузку) к статьям то логичней выбрать 16*9, так как занимаемая площадь будет меньше и останется больше акцент на самом тексте.
А вот изображение с форматом 4*3 или 1*1 лучше использовать в соцсетях, где ключавая информация размещается как раз в картинке, ну а само собой больше охват площади экрана на смартфонах.