Use img loading="lazy" for most images (where available)

This commit is contained in:
Jason McBrayer 2019-08-07 09:21:07 -04:00
parent e1d758765d
commit 893a9c49d7
2 changed files with 11 additions and 11 deletions

View File

@ -80,11 +80,11 @@
<div class="navbar-brand"> <div class="navbar-brand">
<a class="navbar-item" href="{% url "home" %}"> <a class="navbar-item" href="{% url "home" %}">
{% if own_acct %} {% if own_acct %}
<img src="{{ own_acct.avatar_static }}" <img loading="lazy" src="{{ own_acct.avatar_static }}"
class="image is-32x32 avatar" class="image is-32x32 avatar"
alt="Brutaldon ('{{ own_acct.username }}')"> alt="Brutaldon ('{{ own_acct.username }}')">
{% else %} {% else %}
<img src="{% static "images/brutaldon.png" %}" <img loading="lazy" src="{% static "images/brutaldon.png" %}"
class="image is-32x32" alt="Brutaldon"> class="image is-32x32" alt="Brutaldon">
{% endif %} {% endif %}
</a> </a>
@ -185,9 +185,9 @@
</div> </div>
<div class="level-right"> <div class="level-right">
{% if preferences.theme.is_brutalist %} {% if preferences.theme.is_brutalist %}
<img class="level-item" src="{% static '/images/lynx.gif' %}" <img loading="lazy" class="level-item" src="{% static '/images/lynx.gif' %}"
alt="Lynx Now!"> alt="Lynx Now!">
<img class="level-item" src="{% static '/images/now9.gif' %}" <img loading="lazy" class="level-item" src="{% static '/images/now9.gif' %}"
alt="Netscape Now!"> alt="Netscape Now!">
{% endif %} {% endif %}
<a class="level-item is-size-7" href="{% url "privacy" %}"> <a class="level-item is-size-7" href="{% url "privacy" %}">

View File

@ -14,14 +14,14 @@
<figure class="media-left"> <figure class="media-left">
<p class="image is-64x64 account-avatar"> <p class="image is-64x64 account-avatar">
<a href="{% url "user" toot.account.acct %}"> <a href="{% url "user" toot.account.acct %}">
<img src="{{ toot.account.avatar_static }}" <img loading="lazy" src="{{ toot.account.avatar_static }}"
alt=""> alt="">
</a> </a>
</p> </p>
{% if reblog %} {% if reblog %}
<p class="image is-32x32 reblog-icon" > <p class="image is-32x32 reblog-icon" >
<a href="{% url "user" reblog_by %}"> <a href="{% url "user" reblog_by %}">
<img src ="{{ reblog_icon }}" alt=""> <img loading="lazy" src ="{{ reblog_icon }}" alt="">
</a> </a>
</p> </p>
{% endif %} {% endif %}
@ -71,7 +71,7 @@
{% if toot.card.image %} {% if toot.card.image %}
<div class="column is-one-third"> <div class="column is-one-third">
<a href="{{ toot.card.url }}"> <a href="{{ toot.card.url }}">
<img alt="{{ toot.card.title }}" <img loading="lazy" alt="{{ toot.card.title }}"
src="{{ toot.card.image }}" src="{{ toot.card.image }}"
class="is-max-128"> class="is-max-128">
</a> </a>
@ -99,9 +99,9 @@
<figure class="column attachment-image"> <figure class="column attachment-image">
<a href="{{ media.url }}"> <a href="{{ media.url }}">
{% if toot.sensitive %} {% if toot.sensitive %}
<img src="{% static "images/sensitive.png" %}" <img loading="lazy" src="{% static "images/sensitive.png" %}"
{% else %} {% else %}
<img src="{{ media.preview_url }}" <img loading="lazy" src="{{ media.preview_url }}"
{% endif %} {% endif %}
alt="{% if media.description %} alt="{% if media.description %}
{{ media.description }} {{ media.description }}
@ -123,9 +123,9 @@
<source src="{{ media.url }}" type="video/mp4"> <source src="{{ media.url }}" type="video/mp4">
<a href="{{ media.url }}"> <a href="{{ media.url }}">
{% if toot.sensitive %} {% if toot.sensitive %}
<img src="{% static "images/sensitive.png" %}" <img loading="lazy" src="{% static "images/sensitive.png" %}"
{% else %} {% else %}
<img src="{{ media.preview_url }}" <img loading="lazy" src="{{ media.preview_url }}"
{% endif %} {% endif %}
alt="{% if media.description %} alt="{% if media.description %}
{{ media.description }} {{ media.description }}