Ankündigung

Einklappen
Keine Ankündigung bisher.

Bilderoptimierung mit PHP im Sinne von Google Page Speed

Einklappen

Neue Werbung 2019

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

  • Bilderoptimierung mit PHP im Sinne von Google Page Speed

    Hallo zusammen,

    ich hätte da mal ne Frage zu der ich bis jetzt im gesamten Netz rein garnichts annähernd verwertbares gefunden habe. Natürlich lasse ich mich da aber auch gern eines besseren belehren!

    Und zwar geht es darum:

    Ich bin gerade dabei ein kleines CMS zu programmieren und wenn der User ein Bild hoch lädt, soll dieses beim Upload automatisch komprimiert und verkleinert werden. So weit hab ich das auch mit den üblichen Werkzeugen wie imagejpeg() oder imagepng() bzw imagecreate ganz gut hinbekommen.

    Und nun das große ABER:

    Das ganze soll den Vorgaben von Google Page Speed entsprechen.

    Das heißt, dass Google Page Speed derzeit trotz Bildverkleinerung und Kompression immer noch behauptet, man könne da noch einige Prozente heraus holen.

    Hat einer von euch ne Ahnung wie man das anstellen könnte? (Bitte keine Vorschläge a la "Nimm doch ein Grafikprogram", denn das ganze soll automatisch beim Upload passieren)

    Vielen Dank schon mal für eure Hilfe!

    Gruß Shakus


  • #2
    Willkommen im Forum.

    Schau zum Beispiel mal hier:

    - http://stackoverflow.com/questions/5...mpression-work

    Suchbegriff war: „google page speed image compression“

    Kommentar


    • #3
      moin, wilkommen im forum.
      //OT:
      mich würde interessieren, wieviel KB du bei wie vielen bildern einspart;
      ob und wie stark deine seiten (bilder) schon kompriemiert sind (mod_deflate);
      ob du den zuerst sichbaren inhalt irgendwie bevporzugst,
      ob das google page speed tool in igendeiner weise js generierten code erkennt und optimiereungen vorschlägt.

      und was dir sonst noch so alles einfällt gemäs der maximen:
      http://www.php.de/php-fortgeschritte...uncements.html

      Kommentar


      • #4
        Zitat von shakus Beitrag anzeigen
        ... wenn der User ein Bild hoch lädt, soll dieses beim Upload automatisch komprimiert und verkleinert werden. So weit hab ich das auch mit den üblichen Werkzeugen wie imagejpeg() oder imagepng() bzw imagecreate ganz gut hinbekommen.

        Und nun das große ABER:

        Das ganze soll den Vorgaben von Google Page Speed entsprechen.

        Das heißt, dass Google Page Speed derzeit trotz Bildverkleinerung und Kompression immer noch behauptet, man könne da noch einige Prozente heraus holen.

        Hat einer von euch ne Ahnung wie man das anstellen könnte?
        Beispielsweise kannst du die Kommentar-Segmente aus JPEG-Files entfernen, die PHP's Image-Library (unnötigerweise) einbaut.

        Das Verkleinern der Bild-Abmessungen dürfte dagegen nur eingeschränkt helfen, denn du verkleinerst damit nicht das Verhältnis von Nutzdaten zu "Metadaten"-Overhead einer Bilddatei, es wird im Gegenteil dadurch noch schlechter.

        (Bitte keine Vorschläge a la "Nimm doch ein Grafikprogram", denn das ganze soll automatisch beim Upload passieren)
        Dann hast du Pech gehabt. Mit PHP-Bordmitteln bekommst du das bestenfalls eingeschränkt hin. Es gibt aber für JPEG-Dateien Optimierungs-Tools, die das können.
        Wenn man die Wurst schräg anschneidet, hält sie länger, weil die Scheiben größer sind.

        Kommentar


        • #5
          So, vielen Dank erstmal für die vielen Willkommensgrüße und die guten Antworten!

          Das klingt auf jeden Fall alles schon einmal sehr vielversprechend und ich denke das hilft mir schon ein ganzes Stück weiter!

          Werde mir das einfach alles mal zu Gemüte führen und schauen, was sich daraus machen lässt...

          Schöne Grüße und bis später

          Kommentar


          • #6
            Heyho, habe vor ein paar Wochen eine Webseite / API erstellt welche Bilder via imagemagick / optipng / pngcrush / pngquant / pngnq / jpegoptim / jpegtran / mozjpeg komprimiert. Kannst ja mal testen ob dies die Bilder weiter komprimiert.

            Wenn man den Parameter "quality=[int]" nicht setzt versucht das entsprechende Script die beste Balance zwischen Größe und Qualität selber zu suchen, indem "compare -metric RMSE" (imagemagick) verwendet wird um die Bildverzerrung mit dem Original zu vergleichen.

            Webseite: http://image-api.suckup.de

            Beispiel - Api-Call: http://image-api.suckup.de/image-api...%2Flogo11w.png

            Und hier das Bild-Kompressions-Skript -> https://github.com/voku/dotfiles/blo...bin/img-min.sh

            PS: hier noch ein Beispiel-Script um die API anzusteuern + Preview

            Code:
            // request
            $preview = $_GET['preview'];
            $image = $_GET['image'];
            $url = $_GET['url'];
            
            // TODO: replace this path with your own image-path
            $imagePath = '/var/www/foo/bar/images/upload/';
            
            $imageWithUrl = $url . $image;
            $imageWithPath = $imagePath . $image;
            $imageWithPathTmpOld = $imagePath . 'tmp-old' . $image;
            $imageWithPathTmpNew = $imagePath . 'tmp-new' . $image;
            $oldImage = file_get_contents($imageWithUrl);
            $newImage = file_get_contents('http://image-api.suckup.de/image-api.php?file=' . $imageWithUrl);
            
            $oldImageSize = file_put_contents($imageWithPathTmpOld, $oldImage);
            $newImageSize = file_put_contents($imageWithPathTmpNew, $newImage);
            
            if (strstr($newImage, 'Upload-Error') !== false) {
              echo "error";
              exit();
            }
            
            $imageSizeDiff = ((($newImageSize / $oldImageSize) * 100) - 100) * -1;
            
            if ($preview == 1) {
              $debug = '
              old image: <img src="data:image/png;base64,' . base64_encode($oldImage) . '"> (' . $oldImageSize . ')
              <br /><br >
              new image: <img src="data:image/png;base64,' . base64_encode($newImage) . '"> (' . $newImageSize . ')
              <br /><br >
              saved ~ ' . $imageSizeDiff . '%
              ';
            
              echo $debug;
            
            } else {
            
              if ($imageSizeDiff > 0) {
                $moved = rename($imageWithPathTmpNew, $imageWithPath);
            
                if ($moved === true) {
                  echo "ok";
                } else {
                  echo "save-error";
                }
              } else {
                echo "ok: but old-file is smaller";
              }
            }
            
            unlink($imageWithPathTmpOld);
            unlink($imageWithPathTmpNew);

            Kommentar


            • #7
              Es gibt bereits einen Dienst der eine Komprimierung von PNG und JPG-Bildern vornimmt, und sich über eine API ansprechen lässt: https://tinypng.com/ und https://tinyjpg.com/. Ich verwende diesen Dienst selbst immer wieder und bin mit dem Ergebnis eigentlich sehr zufrieden. Ich bekom Einsparungen von bis 80% und das ohne Qualitätsverlust. Wie bereits erwähnt gibt es für diese Dienste auch eine API um das ganze irgendwo einbinden zu können (z.B. in einen Upload).

              Ich habe mir damals eine Klasse geschrieben: https://gist.github.com/SebastianBrosch/11355841. Die Klasse ist etwas älter. Es kann daher sein dass diese heute nicht mehr funktioniert (sollte ich mal wieder Prüfen & Aktualisieren). Aber als Orientierung sicherlich nicht schlecht.

              Gruß S. Brosch

              Kommentar


              • #8
                Zitat von sbrosch Beitrag anzeigen
                Ich verwende diesen Dienst selbst immer wieder und bin mit dem Ergebnis eigentlich sehr zufrieden. Ich bekom Einsparungen von bis 80% und das ohne Qualitätsverlust.
                danke fürs posten der classe, hab fetsellen müssen, dass ich hier und da noch platz sparen könnte, wenn auch nicht die welt. allerdings scaliere ich die bilder ja on demand, muss ich dann noicht alle bilder nach dem scalieren wieder optimieren? was kostet das an zeit im request?

                Kommentar


                • #9
                  Zitat von moma Beitrag anzeigen
                  was kostet das an zeit im request?
                  Willst du das etwa bei jedem Aufruf der Seiten machen? Wieso nicht eine optimierte Version des Bildes mit im Cache oder zumindest als default Verlinken
                  Linux ist wie guter Sex, man kann es beschreiben oder drüber reden, man weiß erst was es bedeutet, wenn man es erlebt hat

                  Kommentar


                  • #10
                    Zitat von breaker Beitrag anzeigen
                    Willst du das etwa bei jedem Aufruf der Seiten machen? Wieso nicht eine optimierte Version des Bildes mit im Cache oder zumindest als default Verlinken
                    danke für den kommentar.....

                    Kommentar


                    • #11
                      Dafür gibt es auch ein PageSpeed Module für den Webserver, der nimmt dann die Optimierungen vor:

                      https://developers.google.com/speed/pagespeed/module

                      Gruß
                      AFFE ist nur im Dezimalsystem ein Palindrom.

                      Kommentar


                      • #12
                        Ich hatte mir die Klasse damals geschrieben um in einem Upload das Bild zu komprimieren. Das Bild wurde dabei hochgeladen und anschließend auf dem Server komprimiert und diese komprimierte Version wurde dann an den entsprechenden Ort abgelegt. Die Komprimierung wird auf dem Server vorgenommen.

                        Die Klasse hat damals noch funktioniert. Falls hier noch jemand ein Problem hat was die Kompatibilität oder Funktionsweise angeht, kann mir das gerne schreiben. Wie bereits erwähnt ist die schon etwas älter und müsste mal wieder überprüft werden, da der Dienst nun ja auch *.jpg-Dateien komprimieren kann (damals gingen nur *.png-Dateien). Werde die Klasse auf jeden Fall mal aktualisieren und prüfen und mich hier evtl. nochmal melden, das kann aber noch etwas dauern.

                        Zitat von moma Beitrag anzeigen
                        danke fürs posten der classe, hab fetsellen müssen, dass ich hier und da noch platz sparen könnte, wenn auch nicht die welt. allerdings scaliere ich die bilder ja on demand, muss ich dann noicht alle bilder nach dem scalieren wieder optimieren? was kostet das an zeit im request?
                        Also wie oben beschrieben, bereits beim Upload die Komprimierung vornehmen. Wie das bei Skalierungen aussieht weiss ich nicht, habe ich noch nicht versucht. Müsste man mal probieren was passiert wenn man ein Bild skaliert (ohne wieder beim Speichern irgendwelche Meta-Informationen hinzuzufügen) ob sich das Bild wieder komprimieren lässt.

                        Gruß S. Brosch

                        Kommentar


                        • #13
                          Zitat von sbrosch Beitrag anzeigen
                          Also wie oben beschrieben, bereits beim Upload die Komprimierung vornehmen. Wie das bei Skalierungen aussieht weiss ich nicht, habe ich noch nicht versucht. Müsste man mal probieren was passiert wenn man ein Bild skaliert (ohne wieder beim Speichern irgendwelche Meta-Informationen hinzuzufügen) ob sich das Bild wieder komprimieren lässt.

                          Gruß S. Brosch
                          gut, teste ich und poste das ergebniss.

                          Kommentar

                          Lädt...
                          X