0e3cff9137
This PR replaces the jekyll-responsive-images with jekyll-imagemagick for responsive WebP images. WebP images are much smaller compared to PNG and JPEG, faster to load and most of the modern browsers recommend it. More information about WebP images: https://developers.google.com/speed/webp
18 lines
713 B
HTML
18 lines
713 B
HTML
{% assign path = include.path | remove: ".jpg" | remove: ".jpeg" | remove: ".png" | remove: ".tiff" %}
|
|
|
|
<figure>
|
|
|
|
<picture>
|
|
{% for i in site.imagemagick.widths %}
|
|
<source media="(max-width: {{ i }}px)" srcset="{{ path | relative_url }}-{{ i }}.webp">
|
|
{% endfor %}
|
|
|
|
<!-- Fallback to the original file -->
|
|
<img {% if include.class %}class="{{ include.class }}"{% endif %} src="{{ include.path | relative_url }}" {% if include.alt %}alt="{{ alt }}"{% endif %} {% if include.title %}title="{{ title }}"{% endif %} {% if include.zoomable %}data-zoomable{% endif %} />
|
|
|
|
</picture>
|
|
|
|
{% if include.caption %}<figcaption class="caption">{{ include.caption }}</figcaption>{% endif %}
|
|
|
|
</figure>
|