Support » Themes » Header verpixelt

  • Gelöst leylawittelsbach

    (@leylawittelsbach)


    Hallo,

    wir haben uns erst vor Kurzem entschlossen, unter klimaschutz-innovativ.de einen Blog zu schreiben. Bevor wir irgendetwas Inhaltliches auf die Seite setzen wollten wir jetzt erst einmal das Design auf unsere Bedürfnisse anpassen. Wir haben uns dabei für das Theme Twenty Ten entschieden. Es hat einen Header für den 940 x 198 Pixel empfohlen werden. Leider war der Header bei dieser Größe auch schon auf der Beispielwebsite sehr verpixelt.
    Jetzt haben wir unseren eigenen Header designt und ihn mit 2160 x 455 Pixeln als png in die Mediathek hochgeladen. Da war er gestochen scharf. Allerdings verlangt WordPress jedes Mal von uns das Bild zu skalieren oder zuzuschneiden, wenn wir es als Header einfügen wollen. Und dann wird es eben doch auf die 940 x 198 Pixel heruntergebrochen und ist auf der Website verpixelt zu sehen. Das passiert auch, wenn wir statt das Bild direkt als Header hochzuladen erst den Umweg über „Bild bearbeiten“ gehen.
    Leider sieht unsere Seite dadurch sehr unprofessionell aus, ihr könnt es euch ja ansehen.
    Habt ihr Vorschläge, wie wir das beheben könnten?

    Die Seite, für die ich Hilfe brauche: [Anmelden, um den Link zu sehen]

Ansicht von 11 Antworten - 1 bis 11 (von insgesamt 11)
  • Was passiert wenn Ihr den Header direkt auf eurem PC zurechtschneidet (Pixelgenau) und dann hochladen?

    Wer ist euer Hoster?

    Thread-Ersteller leylawittelsbach

    (@leylawittelsbach)

    Danke für deinen Tipp, aber das bringt leider keine Verbesserung. Es ist ja einfach so, dass die 940 x 198 Pixel an sich zu wenig sind, auch wenn das die im Theme empfohlene Größe ist. Es wird immer verpixelt, das war auch schon bei dem voreingestellten Header so.
    Hat noch jemand andere Ideen?

    Thread-Ersteller leylawittelsbach

    (@leylawittelsbach)

    Ach ja, und unser Hoster ist übrigens lima city.

    Hallo,

    Wir haben uns dabei für das Theme Twenty Ten entschieden.

    Das Theme wurde – wie der Name schon aussagt – vor ca. 12 Jahren veröffentlicht.

    Ich würde eher dazu raten, euch ein anderes aktuelleres Standard-Theme auszuwählen (z. B. Twenty Twenty) oder ein entsprechendes aktuelles Theme aus dem WordPress-Repository und zu testen, ob das Problem auch da auftaucht.

    Viele Grüße
    Hans-Gerd

    Thread-Ersteller leylawittelsbach

    (@leylawittelsbach)

    Also wir hatten es jetzt schweren Herzens mit einem anderen Theme probiert, das uns nicht ganz so gut gefiel. Problem: Der Header wird immer noch verpixelt sobald wir ihn einfügen und das, obwohl das Bild das wir hochgeladen haben scharf ist. Also haben wir es jetzt beim alten Theme belassen, denn eine Verbesserung stellt sich ja ohnehin nicht ein.
    Können wir da vielleicht eine Änderung am Quellcode vornehmen, damit der Header nicht immer verpixelt wird (und wenn ja, ein kleiner Tipp, wo wir ungefähr suchen müssten)?

    Welches andere Theme habt ihr verwendet?
    Womit schaut ihr euch das Ganze an?

    iPad & Co benötigen „Retina“ Images, um scharf dargestellt zu werden.
    Vielleicht hilft dir das Plugin bereits weiter:
    https://wordpress.org/plugins/wp-retina-2x/
    oder das
    https://wordpress.org/plugins/optimole-wp/
    oder ein anderes aus diesem Suchergebnis:
    https://wordpress.org/plugins/search/retina/.

    Ansonsten müsstest du das evtl. als Hintergrundbild einbinden und mit entsprechenden Media Queries setzen oder mit picturefill arbeiten.
    https://benfrain.com/how-to-serve-high-resolution-website-images-for-retina-displays-new-ipadiphone4/

    Das div-Element, in dem das Bild steckt, ist 940 Pixel breit, also muss das Bild auf diese Breite runter skaliert werden. Wenn du es breiter haben willst, musst du das ganze Layout verbreitern oder du suchst dir, wie schon empfohlen, ein anderes Theme. Ich kann mir echt nicht vorstellen, dass du bei der Fülle an Themes kein passendes findest, es sei denn, du hast nicht wirklich gut gesucht.

    Thread-Ersteller leylawittelsbach

    (@leylawittelsbach)

    Hi,
    also erstmal zu der Sache mit einem anderen Theme: Wie bereits gesagt bringt es nichts das Theme zu ändern. Jedes Mal, wenn wir den Header reinladen wollen wird er verpixelt. Das ist sogar bei Twenty twenty so und das müsste ja eigentlich das Neueste sein.
    Aber die Sache mit dem iPad könnte das Problem sein. Wir haben den Header mit Sketchbook auf iPad designt und erstellen auch unsere Website mit einem I-Pad. Könnten wir also einfach den Header mit einem Computer hochladen und dann wird er scharf? Ansonsten danke für die Links zu den Plugins. Dann versuchen wir es darüber.

    Ich hatte doch geschrieben, was zu tun ist?
    Hier noch mal eine kleine Einführung in die Thematik:

    https://kulturbanause.de/blog/websites-und-bilder-fur-high-resolution-displays-retina-optimieren/

    @leylawittelsbach

    Der Wechsel auf ein anderes Theme ist auch ein Option, man muss nur eins verwenden, das Retina-Displays unterstützt:

    https://de.wordpress.org/themes/search/retina/

    (und wenn ja, ein kleiner Tipp, wo wir ungefähr suchen müssten)?

    Retina Images WordPress

    Thread-Ersteller leylawittelsbach

    (@leylawittelsbach)

    @la-geek
    Wir danken dir! Wir haben über den Link, den du uns geschickt hast jetzt ein Theme gefunden, das sehr gut zu uns passt und dem alten sehr ähnlich sieht. Und das Beste: Der Header ist jetzt schön scharf!
    LG

Ansicht von 11 Antworten - 1 bis 11 (von insgesamt 11)