1. Herzlich willkommen bei WPDE.org, dem grössten und ältesten deutschsprachigen Community-Forum rund um das Thema WordPress. Du musst angemeldet oder registriert sein, um Beiträge verfassen zu können.
    Information ausblenden

WP 4.8 beim Upload von Bildern auf Webseite extreme Verluste: mega-pixelig - Best Practice-Ideen

Dieses Thema im Forum "Design" wurde erstellt von lin, 11. März 2020.

  1. lin

    lin Well-Known Member

    Registriert seit:
    1. Dezember 2013
    Beiträge:
    855
    Zustimmungen:
    3
    Hallo und guten Abend,


    beim Upload von Bildern auf eine Webseite habe ich festgestellt dass ich erhebliche Verluste habe.


    Heute habe ich also einen Frage zum Webdesign und zu Grafiken die man auf eine Website hochläd - welche Formate welche Auflösungen, was muss man hier generell beachten und berücksichtigen.

    Zielseite ist eine Wordpress - Version 5.3.2 - mit Twentyseventeen-Theme; Bei den Grafiken handelt es sich um Bilder die ich als Featured-Image dann einsetze und vorher in den Media-Bereich hochgeladen habe.

    Befund: Hier sind erhebliche Verluste am Werk: - Ich bin grad noch auf der Suche nach Erklärungen:

    Es sieht so aus, als ob das Bild auf dieser Seite groß ist (2000 Pixel breit), aber wenn ich es auf dem Bildschirm betrachte, ist es selbst bei 100% Größe doch ziemlich arg pixelig.

    Wie es dazu kommt - hier einige Überlegungen:
    Das heißt, wenn ich es ausgebe, habe ich es entweder von einer kleineren Größe auf diese Größe skaliert oder ich habe das Bild mit einer hohen Auflösung (wie etwa 300 dpi) erstellt. Und der Upload schaltete es dann später auf 72 dpi bei dieser Größe um (was die Pixelbildung erklären würde).

    Todo-Ideen und Best-Practice:
    Wenn ich Bilder für das Web aus dem Grafikprogramm (wie GIMP) speichern, sollte ich diese immer entweder mit 72 dpi oder mit 150 dpi speichern - am meisten (für Retina-Displays). Der Schlüssel dazu liegt dann wohl darin, sicherzustellen, dass die Bilder dann eben bei 72 dpi in voller Größe und bei 150 dpi doppelt so groß sind.
    Dann, also unter diesen Umständen sollte ich dann beim Hochladen der Images im Grunde keine Auflösung verlieren. WordPress ändert normalerweise nicht die Auflösung der Uploads.
    Anm.: Wenn man jedoch Plugins zur Unterstützung von Bildern verwendet, kann man nicht sicher sagen. dass die Plugins nicht skalieren. Aber das mache ich nicht. Ich habe keine weiteren Plugins im Einsatz. Es ist lediglich eine WP 5.3.2

    Frage: Wie soll man sich korrekterweise verhalten beim Bearbeiten & Upload von Bildern (für eine Wordpress-Seite wie oben beschrieben) - welche Größe - welche Pixel/inch oder cm -Dichte soll ich hier wählen? Was soll man sonst noch beachten?

    Was meint Ihr denn!?


    Freue mich auf einen Tipp [​IMG]


    viele Grüße und noch einen schönen Abend,
     
    #1 lin, 11. März 2020
    Zuletzt bearbeitet: 11. März 2020
  2. b3317133

    b3317133 Well-Known Member

    Registriert seit:
    21. November 2014
    Beiträge:
    6.888
    Zustimmungen:
    653
    Link zur Seite mit so einem Bild?

    Laufen irgendwelche Bildoptimierungs- oder Cache- oder Lazyload- o.ä. Plugins? Falls ja, abschalten.
     
  3. lin

    lin Well-Known Member

    Registriert seit:
    1. Dezember 2013
    Beiträge:
    855
    Zustimmungen:
    3
    Hallo b3317133,

    Danke für deine rasche Antwort; Es ist eine Beta-Beta-Seite mit Theme 2017. : http://www.job-starter.com/
    Ich will nächstens ohnehin auf das Theme 2020 hochziehen - aber im Moment ist das mit dem 2017 mal so angelegt:

    Das Bild um welches es sich handelt ist das Featured Image das man sieht wenn man etwas weiter runterscrollt.
    Ein Bild mit Text auf der rechten Seite: do you look for young talents?! usw. usf.

    Wie gesagt: das Bild ist als sog. Featured Image da auf der Seite. Aber ich denke dass ich bis dato da noch etwas falsch gemacht habe in der Bereitstellung bzw. Einbindung des Bildes.

    Wie oben bereits festgestellt hab ich das bild hier lokal in einer astreinen Qualität vorliegen; Aber nach dem ganzen Prozess

    - Abspeichern in GIMP bzw.
    - Exportieren in eine jpeg oder png- Grafik aus GIMP heraus
    - Hochladen in den WP-Media-Bereich
    - Einbinden in ein Posting bzw. eine Page...

    .... habe ich dann am Ende dieses Ergebnis und radikale Verluste - anders kann man das nicht nennen: http://www.job-starter.com/


    - nö ich hab lediglich folgende Plugins:

    - Polylang
    - Max-Mega-Menu
    - TF Numbers
    - WP-Job-Manager (nicht aktiv)

    auf einer WP 5.3.2


    Mein derzeitiges Zwischenfazit ist dieses: Denke, dass ich das anders machen muss - wie oben beschrieben eben.

    Was meinst Du!?

    vG
     
  4. b3317133

    b3317133 Well-Known Member

    Registriert seit:
    21. November 2014
    Beiträge:
    6.888
    Zustimmungen:
    653
    Die hochgeladene Datei ist offenbar nur 872 Pixel breit, daher wird sie beim Verwenden als Featured Image gestreckt = unscharf.

    Siehe z.B. media_details in der REST-API:
    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    Am Rande, wenn Du ein Theme wechselst, musst Du danach alle Dateien in der Mediathek neu berechnen lassen, z.B. via Force Regenerate Thumbnails.
     
  5. lin

    lin Well-Known Member

    Registriert seit:
    1. Dezember 2013
    Beiträge:
    855
    Zustimmungen:
    3
    Hallo b3317133,

    Vielen Dank für deine rasche Antwort - die Erläuterungen und Hinweise. Ich werde mich um diese Dinge kümmern.

    Viele Grüße
    Lin
     
  6. lin

    lin Well-Known Member

    Registriert seit:
    1. Dezember 2013
    Beiträge:
    855
    Zustimmungen:
    3
    Hallo b3317133,


    nochmals vielen Dank für dein Posting, deine Ideen und deine Hinweise zum Theme und den Bildern.

    Zwischenbemerkung vorweg: Ich finde dass das Theme 2020 sehr sehr reif und gut ausgereift ist. Ich werde meine Seiten dahin auch entwickeln und dort das TwentyTwenty auch aufsetzen auf einer BETA-BETA-Seite, also einer Seite die noch sehr sehr roh ist - und derzeit mit dem Theme 2017 läuft.

    Dort auf der Seite habe ich das Featured Image nun noch einmal mit den folgenden Größen ausprobiert.

    die Größe in Pixel:

    a. wp_1333__352.jpg
    b. wp_2190__630.jpg

    - wie gesagt -
    die oben genannten Werte sind in Pixel. im Moment ist das Bild b. als featured image aktiv - aber - es sieht kaum besser aus.

    also sehr merkwürdig -
    beide Bilder werden total pixelig dargestellt. Nach dem Hochladen sehen beide total schlecht und pixelig aus.
    Das Problem: das Features Image (wenn man etwas runterscrollt mit dem Text in der rechten Hälfte: ["do you look for young talents....."] - es ist immer noch sehr sehr pixelig.

    Bis dato dachte ich, dass ich das Problem etwa so ist, wie folgt beschreiben: Beim Upload von Bildern auf eine Webseite habe ich festgestellt, dass ich erhebliche Verluste habe. Heute habe ich also einen Frage zum Webdesign und zu Grafiken, die man auf eine Website hochlädt - welche Formate welche Auflösungen, was muss man hier generell beachten und berücksichtigen.

    Annahme: du sagtst dass die entsprechende hochgeladene Datei offenbar nur 872 Pixel breit ist, daher wird sie beim Verwenden als Featured Image gestreckt = unscharf. - frage: reden wir denn da überdieselbe Datei!?


    du, b3317133, führst da die REST-API mit den media_details an...

    http://www.job-starter.com/index.php?rest_route=/wp/v2/media/38

    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!

    Frage: b3317133, reden wir denn hier über das gleiche Bild? .....das Features Image (wenn man etwas runterscrollt mit dem Text in der rechten Hälfte: ["do you look for young talents....."] - es ist immer noch sehr sehr pixelig und zwar egal ob ich es in der Variante a oder b hochlade!?

    a. wp_1333__352.jpg
    b. wp_2190__630.jpg


    Freu mich nochmals kurz vorn dir zu hoeren.

    vg
     
  7. b3317133

    b3317133 Well-Known Member

    Registriert seit:
    21. November 2014
    Beiträge:
    6.888
    Zustimmungen:
    653
    Auf der o.g. Seite ist kein Text "do you look for..", ich sehe ein einziges Bild oben auf der Seite, beim Herunterscrollen keine.

    Vielleicht solltest Du Screenshots oder genauere Links beifügen.
     
  8. lin

    lin Well-Known Member

    Registriert seit:
    1. Dezember 2013
    Beiträge:
    855
    Zustimmungen:
    3
    Hi - b3317133,

    - danke für die schnelle Antwort.

    Das ist ein Extra-Problem ; die 5 Sprachen auf der Page sind einfach nur sehr sehr schnell eingerichtet worden. Interessanterweise lädt die Seite nicht immer mit http://www.job-starter.com/ ...sondern mit folgendem URL: http://www.job-starter.com/?page_id=267&lang=de
    [Anm.: Das muss ich noch extra klären, warum das so ist!? Da ist wohl auch ein kleiner Fehler noch drinne) Da - also in dieser Seite(!!) ist dann kein Featured image im unteren Bereich zu sehen.


    doch: wenn man dann aber auf die engl -Sprache geht oder eben auf die defaultseite: http://www.job-starter.com/
    - dann sieht man das oben beschriebene Featured Image.

    Also ein bild in Schwarz & Weiß mit einem Textblock "do you look for.."
     
  9. SEpp55

    SEpp55 Well-Known Member

    Registriert seit:
    3. Februar 2016
    Beiträge:
    1.924
    Zustimmungen:
    243
    Nur so eine Feststellung: Das Bild wird nur auf der englischen Seite angezeigt!
    Geladen wird ein Bild mit 400x100px und dann wie schon geschrieben hochscaliert auf 100% (Browser-)Anzeigebreite!
    upload_2020-3-13_15-18-34.png
     
    lin gefällt das.
  10. b3317133

    b3317133 Well-Known Member

    Registriert seit:
    21. November 2014
    Beiträge:
    6.888
    Zustimmungen:
    653
    Siehe @SEpp55 und vermutlich ist Dein Bild einfach nicht hoch genug, siehe Anleitung Twenty Seventeen:
    Lade doch mal ein Bild mit der korrekten Grösse hoch.
     
    lin gefällt das.
  11. lin

    lin Well-Known Member

    Registriert seit:
    1. Dezember 2013
    Beiträge:
    855
    Zustimmungen:
    3
    Hallo b3317133, hallo SEpp55, vielen Dank für Eure Beiträge - nun komme ich weiter.

    werde mich auch darum kümmern und nachsehen - Wobei klar: ich hab das Bild nun zuallererst mal der engl. Sprache zugeordnet. M.a.W. das kann nur auf der englischen Seite gezeigt werden.

    ich werde mich darum kümmern und ein Bild mit der erforderlichen Größe hochladen.

    Das mache ich am Wochenende.

    Vielen Dank noch einmal.
     
  12. SEpp55

    SEpp55 Well-Known Member

    Registriert seit:
    3. Februar 2016
    Beiträge:
    1.924
    Zustimmungen:
    243
    Da hier schon über Qualitäts-Verluste beim hochladen von Bilder das Thema ist, 2 gefundene Beiträge dazu.
    Ich kann aber nicht sagen, ob das jetzt auch noch so ist, der eine Artilel ist aus 2016 der zweit ist ohne Datum .....
    Link1
    Link2
     
    lin gefällt das.
  13. lin

    lin Well-Known Member

    Registriert seit:
    1. Dezember 2013
    Beiträge:
    855
    Zustimmungen:
    3
    hallo und guten Abend, SEpp55

    vielen Dank erneut - für deinen Beitrag,

    ich sehe mir das am WE an und lese mir das durch.


    Viele Grüße

    PS: Nachtrag: Das "Vermeiden" eines Streching - das hab ich heute Mittag auch noch in ein paar Artikeln "nachgelesen" - vgl. hier:

    a. https://jetpack.com/features/design/themes/showcase/twentyseventeen/
    For the featured images one would want them to be 2000px wide and 1200px high to prevent stretching

    b. weitere Links:
    https://en.support.wordpress.com/featured-images/
     
  14. b3317133

    b3317133 Well-Known Member

    Registriert seit:
    21. November 2014
    Beiträge:
    6.888
    Zustimmungen:
    653
    Gut, und genau das steht auch direkt in der Anleitung des Twenty Seventeen Themes, siehe oben. :rolleyes:

    Offenbar ist das Lesen einer Anleitung schwerer als umfangreiche Vermutungen in ein Forum zu posten... :(
     
    Kurt Singer gefällt das.
  15. SEpp55

    SEpp55 Well-Known Member

    Registriert seit:
    3. Februar 2016
    Beiträge:
    1.924
    Zustimmungen:
    243
    Ich nehme mal an, das ist in direktem Zusammenhang mit diesem Beitrag ....!
     
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Information ausblenden
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Information ausblenden