Ankündigung

Einklappen
Keine Ankündigung bisher.

Fonts vereinen und webp Bilder erstellen

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Fonts vereinen und webp Bilder erstellen

    Hallo

    Meine erste Frage wäre eine Möglichkeit, wie ich aus mehreren Schriftart-Typen eine Datei machen kann. Ich habe 3 Typen (400, 500 und 600) eingebunden. Leider führt das natürlich zu 3 Anfragen. Kann ich die irgendwie zu einer Datei zusammen fügen?

    Zudem würde ich gerne wissen, wie ich meinen jpg / png zu webp konvertieren kann. Möglichkeiten gibt es ja scheinbar zahlreiche. Aber welche sollte man verwenden und warum?Quelle
    Der Unterschied zwischen dem richtigen Wort und dem beinahe richtigen ist derselbe Unterschied wie zwischen dem Blitz und einem Glühwürmchen.


  • #2
    Zu 1) Ist das ein TT Font, dann reicht auch eine Schriftdicke.

    Zu 2) Warum willst du zu webp konvertieren? JPG und png können alle Browser.

    Kommentar


    • #3
      1.) Danke, absolut richtig. Spart mir viel Arbeit.
      2.) Original hat 287 KB
      PNG Kompression (tinypng) => 78,3 KB
      webp Kompression => 46,2 KB

      Die Integration von webp ist etwas umständlicher. Da ich aber eh unterschiedliche Grössen einbinden möchte, kann ich das auch noch als webp einfügen. Mir ist nur wichtig, dass ich nach dem Upload des Bildes alle Konvertierungen automatisch ausführen kann und daraus das picture-Tag erstellen kann oder eben das CSS.
      Der Unterschied zwischen dem richtigen Wort und dem beinahe richtigen ist derselbe Unterschied wie zwischen dem Blitz und einem Glühwürmchen.

      Kommentar


      • #4
        Wen du PHP auf dem Server hast und damit beim Upload die Bilder erzeugst, dann nimm doch GD. Ob du, wenn du imagmagik hast besser(schneller) bist dann halt das.
        Du solltest aber wissen das Firefox dies erst seit Version 62 von Januar 2019 an unterstützt.

        Kommentar


        • #5
          Zitat von protestix Beitrag anzeigen
          Du solltest aber wissen das Firefox dies erst seit Version 62 von Januar 2019 an unterstützt.
          Das webp Format oder den HTML5 picture Tag?
          So weit es mir bekannt ist, wird bei Browsern ohne Unterstützung einfach der Fallback img Tag am Ende des picture Tags verwendet.
          Der Unterschied zwischen dem richtigen Wort und dem beinahe richtigen ist derselbe Unterschied wie zwischen dem Blitz und einem Glühwürmchen.

          Kommentar


          • #6
            HTML-Code:
            <picture>
              <source srcset="pic.webp" type="image/webp">
              <source srcset="pic.jpg" type="image/jpeg"> 
              <img src="pic.jpg" alt="Alt Text!">
            </picture>
            die 4. Zeile ist für alte Browser, die mit <picture> nichts anfangen können

            Kommentar


            • #7
              SteiniKeule das webp Format.
              Wenn du es so machst wie von kaminbausatz gezeigt, dann passt das.
              https://wiki.selfhtml.org/wiki/HTML/...afiken/picture

              Kommentar


              • #8
                Nur der Vollständigkeit halber noch das Thema CSS.
                Hintergrundbilder webp Format im CSS:

                Beim Laden der Seite prüfen ob webp unterstützt wird. Wenn ja, dann eine Klasse (z.B. "webp") in den html oder body Tag setzen.

                Code:
                html div.bgimage{   background-image: "/thePngOrJpgImage.png"; }  
                html.webp div.bgimage{   background-image: "/theWebpImage.webp"; }
                Meiner Meinung nach die einfachste Lösung
                Der Unterschied zwischen dem richtigen Wort und dem beinahe richtigen ist derselbe Unterschied wie zwischen dem Blitz und einem Glühwürmchen.

                Kommentar


                • #9
                  Du hast nicht erwähnt, dass es sich um Hintergrundbilder handelt. Hier wird weiter unten erklärt wie man es macht: https://css-tricks.com/using-webp-images/

                  Kommentar

                  Lädt...
                  X