Bilder für Webshop in Quadrat umwandeln?

[croxxx69]

Hallo,

also habe bis jetzt eigentlich verschiedene Größen (z.BSP. 100x25) Bilder in meinem Shop reingestellt und die kb Größe unter 100 kb reduziert. Jetzt sehe ich das, dass für das Wb, bzw. den Shop wohl auch quadratische Bilder sein müßen damit sie alle gleich aussehen und nicht aus dem "Rahmen sprengen". Jetzt ist die Frage wie macht man es am besten? Geht es automatisch, oder muss man jedes Bild einzeln bearbeiten? Also jetzt würde ich es so machen, z.Bsp. auf dem Mac Pixelmator öffnen und neue Datei und auf 1000x1000 setzen und dann das neue Bild da reins setzen und halt von oben bis unten am Seitenrand vergrössern (oder verkleinern) das es passt, dann es in jpg speichern und dann noch mal mit einem Programm das Bild optimieren wie Imageoptimizer das es unter 100 kb ist.

Wäre jetzt umständlich bei gefühlt vielleicht 100.000 Bilder das zu machen :-) Wie macht ihr das?

 

[madmax2010]

https://imagemagick.org/index.php
hiermit. aber es kommt auch darauf an wie du dein ziel erreichen willst.
erstmal: von 100x25 auf 1000x1000 wird haesslich.
100x25 ist ohnehin erheblich zu wenig fuer einen Webshop. Auf modernen Monitoren ist das kaum zu erkennen. Fuers grossformat sollte das nativ schon so 1000x1000 sein, sonst wird das argh verpixxelt oder deine Kunden koennen schlicht nichts erkennen.

hast du die bilder in brauchbarer aufloesung? Und du musst entscheiden welchen teil des bildes du quadratisch haben willst.

auf macs sollte imagemagick vorinstalliert sein.. glaube ich.
im terminal in den Ordner gehen:

mkdir square_images for f in *.jpg; convert $f.jpg -resize "100^>" -gravity center -crop 100x100+0+0 -strip square_images/${f}.jpg; done

und schon hast du aus der Mitte von bildern ein 100x100px grosses quadrat gecropped bekommen

 

[DieRenteEnte]

Das nun dritte Mal in kürzester Zeit, dass ich Microsoft PowerToys empfehle.
Damit kannst du mit dem Image Resizer mehrere Bilder in eine gewünschte Größe umwandeln.

Hier die Beschreibung der einzelnen Tools: https://learn.microsoft.com/de-de/windows/powertoys/

 

[netzgestaltung]

ich hab in WordPress ein Plugin dazu: https://de.wordpress.org/plugins/crop-thumbnails/

Es gibt ein JS Tool, das ich dafür mal in Shopifiy eingebaut hab: https://foliotek.github.io/Croppie/ damit kannst du sowas beim hochladen erledigen.

In PrestaShop gibts dazu Bildgrößen und ein mass-Crop Teil im Backend. Ein bisserl hängt es von deinem System ab ob sich was direkt einbauen lässt oder du alles manuel am Desktop machen mußt.

 

[M4ttX]

Oder einfach nur aspect-ratio auf 1/1 setzen. Dann kann als Lightbix auch das ganze Foto angezeigt werden.

 

[croxxx69]

Hallo, erstmal lieben dank dafür. Muss mal sehen ob ich es auf dem Mac installiert bekommen kann, weil ich mich nicht mit Terminal auskenne. :-(
Hoffe auf dem Windows wird es nur 1click installation.

https://imagemagick.org/index.php
hiermit. aber es kommt auch darauf an wie du dein ziel erreichen willst.
erstmal: von 100x25 auf 1000x1000 wird haesslich.
100x25 ist ohnehin erheblich zu wenig fuer einen Webshop. Auf modernen Monitoren ist das kaum zu erkennen. Fuers grossformat sollte das nativ schon so 1000x1000 sein, sonst wird das argh verpixxelt oder deine Kunden koennen schlicht nichts erkennen.

hast du die bilder in brauchbarer aufloesung? Und du musst entscheiden welchen teil des bildes du quadratisch haben willst.

auf macs sollte imagemagick vorinstalliert sein.. glaube ich.
im terminal in den Ordner gehen:

mkdir square_images for f in *.jpg; convert $f.jpg -resize "100^>" -gravity center -crop 100x100+0+0 -strip square_images/${f}.jpg; done

und schon hast du aus der Mitte von bildern ein 100x100px grosses quadrat gecropped bekommen

Hm... leider weiss ich nicht wie die Funktion heisst? Qo finde ich die denn genau? Habe es jetzt auf dem Win installiert, doch irgendwie finde ich nichts brauchbares?
Ja, habe die in normaler Quali, also ein Bild wie ich sehe ist 828 × 1792, das sieht nicht schön aus im Shop, wuerde es jetzt irgendwie Quadratisch bekommen, ohne was vom Bild zu verlieren und ohne es zu deformieren.

Ergänzung (8. Oktober 2022)

ich hab in WordPress ein Plugin dazu: https://de.wordpress.org/plugins/crop-thumbnails/

Es gibt ein JS Tool, das ich dafür mal in Shopifiy eingebaut hab: https://foliotek.github.io/Croppie/ damit kannst du sowas beim hochladen erledigen.

In PrestaShop gibts dazu Bildgrößen und ein mass-Crop Teil im Backend. Ein bisserl hängt es von deinem System ab ob sich was direkt einbauen lässt oder du alles manuel am Desktop machen mußt.

Also das ist es wohl nicht, es macht einen resize, also will das Bild jetzt irgendwie Quadratisch bekommen, ohne was vom Bild zu verlieren und ohne es zu deformieren.

Ergänzung (8. Oktober 2022)

ich hab in WordPress ein Plugin dazu: https://de.wordpress.org/plugins/crop-thumbnails/

Es gibt ein JS Tool, das ich dafür mal in Shopifiy eingebaut hab: https://foliotek.github.io/Croppie/ damit kannst du sowas beim hochladen erledigen.

In PrestaShop gibts dazu Bildgrößen und ein mass-Crop Teil im Backend. Ein bisserl hängt es von deinem System ab ob sich was direkt einbauen lässt oder du alles manuel am Desktop machen mußt.

Wie ich es verstanden habe ist das auch nicht was ich suche? Hier verliert auch das Bild entweder an Bild oder es wird verzerrt?

Oder gibt es eine Option in Wordpress/Woocommerce das die Ansicht der Bilder normal anzeigt und nicht das ein Bild halt einfach heruasspringt?

 

[croxxx69]

Hier noch mal ein Beispiel.
Wie man im Anhang sehen kann, werden bei mir wie auf dem Bild als Beispiel angezeigt, wäre aber besser das es vielleicht so angezeigt wrrd wie auf dem anderen Bild, alle sind gleich

 

[netzgestaltung]

ja das mußt du bei den original-bildern als "fleisch" dabei haben. Es gibt die Möglichkeit Bildgrößen zu definieren via Plugin/Template Code oder so: https://wordpress.org/plugins/simple-image-sizes/

Ebenfalls im Template kannst du die Ausgabe des Thumbnails auf die für dich passende Bildgröße setzen mit https://developer.wordpress.org/reference/functions/wp_get_attachment_image/ und den Link auf die Volle Größe oder eine andere gewünschte Bildgröße setzen.

 

[croxxx69]

Bei mir ist aber noch ein Problem, das wenn man das Produkt anklickt und auf der Seite des Produktes ist, das sich die Vorschau so verhält, das sie den text so verschiebt wie das längste Bild in der Vorschau ist. Also hier im Anhang das Beispiel. Das heisst das ich ja jedes Bild dann quadratisch machen muss (z.Bsp.: 1000x1000), doch die Frage ist, muss ich es dann einzeln machen?

Vielleicht gibt es dann ein Programm auf dem PC was das irgendwie automatisieren kann? Sagen wir mal ich möchte nichts am Bild verlieren und er soll die mir 1000x1000 erstellen, dann halt das Bild reinsetzen das alles weiss ist und das Bild bis zum Rand Vergrössern... hm, hoffe ich habe es einigermassen erklären können...

 

[netzgestaltung]

Da mußt du schauen ob der "Slider" für die Bilder dazu Einstellungen hat. Entweder im WP Backend oder im JS/CSS.
Da wird vermutlich von einem JS anhand einer Einstellung festgelegt, das die "Leinwand" freigehalten werden soll um ein "hüpfen" der Seite beim Bildwechsel zu vermeiden.

Solche Batch-Skripte sind beispielsweise mit Gimp möglich: https://www.gimp.org/tutorials/Basic_Batch/