Bild Kompression // Image Compression

[Wearmuda]

Hey,

ich habe folgendes Problem, 

meine Produktbilder lade ich in einer Auflösung von 2000x2000 hoch. Die Bilder sind scharf und vom Original aus in sehr guter Qualität. Nach dem Upload jedoch werden die Produktbilder sehr stark kompirimiert, verlieren an Qualität und Kompression Artefakte sind sehr deutlich zu sehn. 

Anbei der Link zum Shop und auch die Bilder.

 

 

[Gabe]

Hey @Wearmuda 

Gerne helfe ich hier weiter. Shopify nimmt bis zu 20Mb an Bildgrößen an aber das reicht eigentlich für ein sehr hochqualitatives Foto.

Fotos auf der Webseite verschlechtern sich nur wenn man versucht die Bildauflösung in einem externen Bildeditor künstlich aufzubauschen. Das kann dazu führen, dass die Bilder sog. "Pixel Artefakte" zeigen auf der Webseite und das sieht dann nicht mehr so toll aus. Also rate ich nur Original Bilder in der Größe 2048 x 2048 Pixel zu verwenden.

Die Kategorieseiten im Theme stellen die Bilder in deren originalen Formate und "Bildseitenverhältnisse" dar wie man in unseren Anleitungen hier und hier nachlesen kann.

Man sollte also für ein ausgefeiltes und konsistentes Aussehen aller Produktbilder, die Bilder auf eine quadratische oder zumindest eine einheitliche Form zuschneiden. Aus dem Grund das deine Bilder verschiedene Aspekte (Bildseitenverhältnisse) haben, werden die in versch. Größen dargestellt.

Es gibt es leider keinen "Quick Fix" oder schnellen Weg, das zu machen ausser man bearbeitet alle einzelne Bilder in einem Bildeditor - wie im Produktmedium im Produktstamm innerhalb Shopify, und schneidet sie alle zu einem einheitlichen Bilderformat. Oder man wählt nur Bilder aus die ähnliche Größen wie die anderen haben. Andernfalls wäre eine Größenänderung der betroffenen Bilder die beste Lösung.

Ich rate in diesem Zusammenhang, die von dir demonstrierten Bilder in einem Bildbearbeitungsprogramm zuzuschneiden und das alte Bild durch das neu gespeicherte/umbenannte Bild zu ersetzen. Nachstehend ein paar Apps die für Bildbearbeitung ganz toll sind:

• GIMP
• Adobe Photoshop
• Fotor
• Pixlr

Siehe auch unsere Bildbearbeitungs-Apps in Shopify hier die es erlauben, verschiedene Bilder innerhalb der App-Schnittstelle zu bearbeiten.

Siehe mehr dazu hier:

• Produktbilder
• Hochladen von Bilder
• Was ist das Bildseitenverhältnis?

[Wearmuda]

Hey,

erstmal vielen Dank für die Schnelle Antwort,

habe jetzt eben mal versucht die bilder in 2048x2048 zu exportieren. Die Produktbilder werden am ende natürlich ebenfalls geneaus Aussehn wie bei dem Produkt im Link.

Jedoch ist die starke Kompression nach wie vor vorhanden. Egal welche Größe ich uploade. Hat das was mit den alten Produktbildern (die mit dem grauen Hintergrund) zu tun?

Hier ist das Beispiel Produkt.

https://xvj9ro0j3uz7iaq5-3015409764.shopifypreview.com/collections/anzug/products/dvnc-anzug-lieferb... 

[Gabe]

@Wearmuda 

Danke für den Link und Hut ab! Ein super Shop!

Also von hier aus scheint die Qualität in deinem Beispiel recht gut zu sein. Ist es eins, dass die verschlechterte Qualität aufgrund der Komprimierung zeigen soll? Ich habe es hier etwas aufgeblasen und gerne kannst du mir Beispiele zeigen, wo die Pixel Qualität schlecht ist

Nicht vergessen, es werden auch "transformations" vom Browser selber angewendet, die vorkomprimierte Bilder gelegentlich noch komprimierter aussehen lassen können. Einen leichten Qualitätsverlust, der beim Hochladen der Bilder in Shopify auftritt, ist wie gesagt wahrscheinlich ein Ergebnis von Transformationen, die auf ein Bild angewendet werden. In einigen Fällen handelt es sich um eine der Browser Standardtransformationen (plus-minus Freiheitsgrade - detailliert beschrieben weiter unten), es kann aber auch das Ergebnis von Transformationen sein, die über ein Theme angewendet werden (bitte Theme Dokumentation oder Entwickler diesbzgl. konsultieren).

Eine Theme Transformation kann zum Beispiel sein wenn ein Bild aus dem Backend CDN angefordert wird, über eine CDN URL wie folgt lautet

• https://cdn.shopify.com/s/files/1/0970/3846/files/Nicole-cinemagraph-espressomachine_100x100_crop_ce...jpg

Dies teilt dem System mit, dass es diesen .jpg als ein auf 100x100 beschnittenes Bild bei 2x Retina (also 200x200 Pixel Bild) anzeigen soll. Die URL kann also Parameter wie folgt angeben:

• Größenänderung
• Zuschneiden
• Format in JPEG umwandeln
• skaliertes Bild (Retina - x2/x3)
• progressives JPEG zurückgeben

Um so viel Qualität wie möglich zu erhalten, empfehlen wir, ein nativ höher aufgelöstes Bild hochzuladen und dabei die Tatsache zu nutzen, dass es eine maximale Größe von 4472px x 4472px haben kann. Verwende Bildtypen, die nicht so verlustbehaftet sind, d.h. sie verlieren jedes Mal an Qualität, wenn sie verändert/gespeichert werden. Jpgs sind verlustbehaftet, aber schnell zu laden, während pngs nicht verlustbehaftet sind, eine höhere Qualität haben, aber aufgrund ihrer Größe ein bisschen mehr Zeit zum Laden benötigen können.

VG,

[Wearmuda]

Hey,

vielen Dank. Das wird das neue 2021 Template für Wearmuda.de denke im vergleich zum alten ist definitiv eine Steigerung zu sehn 🙂

Am besten schaust du mal beim Link rein, da sieht man das Produkt mit dem aktuellen Bild. Da wird es sehr stark komprimiert angezeigt. Jedenfalls hab ich hier noch mal das Original Bild in 2048x2048 hochgeladen was eine komplett normale (gute) Quali darstellt. Jedoch beim Upload in Shopify werden dann die Bilder plötzlich in schlecht dargestellt. 

Neues Theme:   https://xvj9ro0j3uz7iaq5-3015409764.shopifypreview.com/collections/anzug/products/dvnc-anzug-lieferb... 

Wenn du auf Wearmuda.de gehst auf den DVNC Anzug 

Altes (bzw. noch aktuelles) Theme:  https://wearmuda.de/collections/anzug/products/dvnc-anzug-lieferbar-ab-dem-23-11-2020 

Hier wird jedenfalls das Bild nicht so stark komprimiert dargestellt. 

Habe auch im Theme nachgeschaut ob irgendwo eine Funktion integriert ist die, die Bilder zusätzlich komprimiert, jedoch habe ich da nichts dazu gefunden.

Das mit den Parametern werde ich mal überprüfen. Das könnte es vllt sein.

Eine Idee woran das sonst liegen könnte?

Vielen Dank aufjedenfall für die Hilfe vorab schonmal 😄

[Gabe]

@Wearmuda 

Ich habe mir die jetzt mal unter die Lupe genommen und deine zwei Beispiele etwas näher angeschaut. Viel in der Qualität unterscheiden sie sich m. E. da nicht. Diese wurden mit dem Handy gemacht also Verzeihung wegen der Reproduktions- oder Fokus Qualität in beiden Beispielen:

Jegliche Qualitäts-Unterschiede würden aber auf das Theme deuten da es nicht über alle Themes gleich zu sein scheint.

[Wearmuda]

Hey,

Habe leider nach wie vor das Problem.

Habe hier mal eben die Snippets rausgesucht für die Produktbilder.
Habe versucht verschiedene Parameter anzupassen, jedoch hat es nichts gebracht. Siehe unten:

Spoiler

Basic-Responsiv-Image.liquid 

{%- if type.size > 0 -%}
{% assign image_box_ratio = type.height | append: ".0" | times: 1 | divided_by: type.width | times: 100 | append: "%" %}
{% assign img_url = type | img_url: '1x1' | replace: '_1x1.', '_{width}x.' %}

<div class="box-ratio" style="padding-bottom: {{ image_box_ratio }};">
<img class="lazyload lazyload-fade {{ is_first }}"
id="{{ type.id }}"
data-src="{{ img_url }}"
data-sizes="auto"
data-original="{{ type | img_url: '500x' }}"
{%- if data_widths != blank -%}data-widths="{{ data_widths }}"{%- endif -%}
alt="{{ type.alt | escape }}">
</div>
{%- endif -%}

Product-Image-Gallery.liquid 

{% capture thumbnails %}

  {% if product.media.size > 1 %}

    {% if thumbnail_position == 'bottom' %}

     {% assign style = 'horizontal-carousel' %}

     {% assign width = 'desktop-12' %}

    {% else %}

     {% assign style = 'vertical-carousel' %}

     {% assign width = 'desktop-2' %}

    {% endif %}

    <div id="thumbnails" class="product-thumbnails-slider thumb-slider thumbnail-slider custom {{ style }} {{ width }} tablet-1 mobile-hide"

    data-thumbnail-position="{{ thumbnail_position }}">

      <div class="thumb-slider-wrapper" id="thumb-slider-wrapper">

        <ul class="carousel-nav thumb-slider-slides slides product-single__thumbnails-{{ section.id }}">

          {% for media in product.media %}

            {% assign img_url = media | img_url: '1x1' | replace: '_1x1.', '_{width}x.' %}

            <li class="{{ media.media_type }}-thumbnail product-single__thumbnails-item carousel-cell {% if forloop.first %}is-nav-selected{% endif %}" data-slide-index="{{ forloop.index0 }}"

            data-image-id="{{ media.id }}" tabindex="0">

              <div class="product-single__thumbnail product-single__thumbnail--{{ section.id }}" data-thumbnail-id="product-template-{{ media.id }}">

                <img class="lazyload lazyload-fade"

                  src="{{ media | img_url: '150x' }}"

                  data-src="{{ img_url }}"

                  data-sizes="auto"

                  data-image-id="{{ media.id }}"

                  alt="{{ media.alt | escape }}">

                <noscript>

                  <img src="{{ media | img_url: '100x' }}" alt="{{ media.alt | escape }}" />

                </noscript>

                {%- if media.media_type == 'video' or media.media_type =='external_video' -%}

                  <div class="thumbnail-icon">

                    {% render 'media-icons', width: '25', icon: 'play' %}

                  </div>

                {%- endif -%}

                {%- if media.media_type == 'model' -%}

                  <div class="thumbnail-icon">

                    {% render 'media-icons', width: '25', icon: '3d-icon' %}

                  </div>

                {%- endif -%}

              </div>

            </li>

          {% endfor %}

        </ul>

      </div>

    </div>

  {% endif %}

{% endcapture %}

{% capture slider %}

  {% assign grid_width = "" %}

  {% if product.media.size > 1 and thumbnail_position != 'bottom' %}

   {% assign grid_width = "desktop-10 tablet-5 mobile-3" %}

  {% else %}

   {% assign grid_width = "desktop-12 tablet-6 mobile-3" %}

  {% endif %}

<style>

.product-image-slider {

  position: relative;

  top: 0;

}

</style>

  <div id="slider" class="product-image-slider ">

    <ul class="slides product-image-container carousel carousel-main">

      {% for media in product.media %}

        <li class="{{ media.media_type }}-slide carousel-cell" data-image-id="{{ media.id }}" data-slide-index="{{ forloop.index0 }}" tabindex="-1">

          <div class="product-media-container product-media--{{ media.id }} {{ media.media_type }}"

          data-product-single-media-wrapper

          {% if media.media_type == 'video' %} data-product-media-type-video data-enable-video-looping="{{ enable_video_looping }}"{% endif %}

          {% if media.media_type == 'external_video' %} data-product-media-type-video data-enable-video-looping="{{ enable_video_looping }}" data-video-id="{{ media.external_id }}"{% endif %}

          {% if media.media_type == 'model' %} data-product-media-type-model{% endif %}

          data-thumbnail-id="product-template-{{ media.id }}"

          data-media-id="product-template-{{ media.id }}">

            {% case media.media_type %}

            {% when 'image' %}

                {% assign img_url = media | img_url: '1x1' | replace: '_1x1.', '_{width}x.' %}

            <img id="{{ product.id }}" class="product__image lazyload lazyload-fade"

                  src="{{ media | img_url: '500x' }}"

                  data-src="{{ img_url }}"

                  data-sizes="auto"

                  data-zoom-src="{{ media | img_url: '2400x' }}"

                  data-aspectratio="{{ media.preview_image.aspect_ratio }}"

                  alt="{{ media.alt | escape }}">

                {% if click_to_enlarge and template != 'product.quick' %}

                  <a class="zoom_btn" data-fancybox="product-{{ product.id }}" title="click to zoom-in" href="{{ media | img_url: '2400x' }}" itemprop="contentUrl" tabindex="-1">

                    <i class="fa fa-search-plus" aria-hidden="true"></i>

                  </a>

                {% endif %}

              {% when 'model' %}

                <div class="product-model product-single__media" style="padding-bottom: 100%">

                  {{ media | model_viewer_tag: image_size: '800x', reveal: 'interaction', toggleable: true, data-model-id: media.id}}

                </div>

            {% endcase %}

          </div>

          <noscript>

            <img id="{{ product.id }}" class="product-main-image" src="{{ featured_media | img_url: '2400x' }}" alt='{{ media.alt | escape }}'/>

          </noscript>

          {% assign first_3d_model = product.media | where: "media_type", "model" | first %}

          {%- if first_3d_model -%}

            <button

              aria-label="{{ 'products.product.view_in_space_label' | t }}"

              class="media-button product-single__view-in-space"

              data-shopify-xr

              data-shopify-model3d-id="{{ first_3d_model.id }}"

              data-shopify-title="{{ product.title | escape }}"

              data-shopify-xr-hidden

            >

              {% render 'media-icons', width: '25', icon: '3d-icon' %}<span class='product-single__view-in-space-text'>{{ 'products.product.view_in_space' | t }}</span>

            </button>

          {%- endif -%}

        </li>

      {% endfor %}

    </ul>

  </div>

{% endcapture %}

{%- if thumbnail_position == 'left' -%}

  {{ thumbnails }}

{%- endif -%}

{{ slider }}

{%- if thumbnail_position == 'right' or thumbnail_position == 'bottom' -%}

  {{ thumbnails }}

{%- endif -%}