QUICKFIX: Exchanged 2k and 450p urls in full-image covers as they are the most critical on the fast-path for me now. The current version loads BOTH urls ALWAYS which is awful and not optimized (see network inspector in FF / PM); A real solution would be to use media queries here and only load the appropriate image size according to the display width and such data. That way things could go fast on mobile and on old machines (like my laptop) while still getting 2k plus resolution images for high-end users. Currently I have to use jpg files and it is tolerable this way, but could be made faster as I see on network analysis.

This commit is contained in:
Richard Thier 2020-03-06 17:05:49 +01:00
parent c8f3c91fc2
commit ebc1e96c76

View File

@ -27,7 +27,7 @@
{% else %}
{% set image = Image(section.image) %}
{{ image.copy() }}
<section class="full-picture" style="background: url('{{ image.generate_thumbnail("x2000") }}') no-repeat {% if section.fixed %} fixed {% else %} scroll {% endif %} center top / cover, url('{{ image.generate_thumbnail("x450") }}') no-repeat {% if section.fixed %} fixed {% else %} scroll {% endif %} center top / cover transparent;">
<section class="full-picture" style="background: url('{{ image.generate_thumbnail("x450") }}') no-repeat {% if section.fixed %} fixed {% else %} scroll {% endif %} center top / cover, url('{{ image.generate_thumbnail("x2000") }}') no-repeat {% if section.fixed %} fixed {% else %} scroll {% endif %} center top / cover;">
{% if section.text %}
<div class="picture-text">
<div class="picture-text-column animated animatedFadeInUp fadeInUp">