Bilder für das Web optimieren

Und wieder einmal geht es um Performance im Web. Heute werden Bilder optimiert.

Aber wie optimiert man Bilder für das Web ohne großen Qualitätsverlust? Man könnte natürlich Photoshop nehmen und jedes einzelne Bild auf einer Webseite nacheinander bearbeiten, aber das ist sehr mühsam. Und da wir alle faul sind, gibt es natürlich auch einen einfacheren Weg (und auch günstiger, weil man kein Photoshop kaufen muss). Dazu brauchen wir lediglich einen aktuellen Firefox und zwei Plugins.

Plugin #1: Firebug
Den sollte jeder Webentwickler standardmäßig installiert haben.

Plugin #2: Page Speed
Dieses Plugin ist noch nicht so bekannt, der Herausgeber dafür umso mehr. Das ist nämlich Google und die haben in dem Plugin viele Tipps zur Performance-Optimierung verbaut. Es wird die komplette Seite überprüft und anschließend aufgelistet, was man noch alles verbessern kann. Unter anderem gibt es dort einen Punkt zur Optimierung von Bildern. Dort gibt es eine Liste mit allen schwach komprimierten Bildern auf der Webseite.

Bilder mit Page Speed Plugin optimieren

Und das beste ist: Das Plugin bietet eine optimierte Version direkt zum Speichern an. Also die komprimierten Bilder abspeichern und die alten damit ersetzen. Fertig.

Die anderen Optimierungsvorschläge sollte man sich natürlich ebenfalls ansehen.
Mir gefällt das Google-Plugin übrigens besser als das vom Konkurrenten Yahoo (YSlow), weil die Anweisungen viel verständlicher sind und übersichtlicher dargestellt werden.

NetBeans für PHP – Alternative zu Eclipse PDT

Auch als PHP-Entwickler darf man über den Tellerrand hinweg schauen und sich mit anderen Sprachen beschäftigen. Eigentlich habe ich nach einer vernünftigen IDE für Python gesucht, doch gefunden habe ich NetBeans – eine IDE, die vielleicht noch besser ist als Eclipse PDT!? In Deutschland ist NetBeans bei PHP-Entwickler noch relativ unbekannt, daher stelle ich NetBeans einfach mal vor. » Weiterlesen

JavaScript Benchmark: Browservergleich

Seit nun knapp zwei Wochen ist der neue Firefox 3.6 erschienen. Zeit, um mal einen Vergleich zur Vorgängerversion zu starten. Ich will jetzt nicht die einzelnen Features aufzählen, sondern einen genauen Blick auf die JavaScript-Engine werfen.

Zum Testen nehmen wir die zwei Benchmark-Tests V8 Benchmark Suite und Acid3. Wegen der ungleichen Punkteverteilung berechnen wir die Gesamtpunktzahl, indem wir vom V8-Test den prozentualen Wert Acid3-Test abziehen.

Und weil es langweilig wäre nur die zwei Firefox zu vergleichen, nehmen wir die aktuell bekanntesten ebenfalls dazu. Das sind unsere Kandidaten:

  • Firefox 3.5
  • Firefox 3.6
  • Internet Explorer 8 ( IE 8 )
  • Google Chrome 3
  • Google Chrome 4
  • Opera 10.10
  • Opera 10.50
  • Firefox 3.5 (Mac)
  • Firefox 3.6 (Mac)
  • Safari (Mac)
Browser V8 Acid3 Gesamt
Firefox 3.5 455 93 423
Firefox 3.6 578 92 532
IE 8 98 20 20
Google Chrome 3 4500 100 4500
Google Chrome 4 4550 100 4550
Opera 10.10 287 100 287
Opera 10.50 3772 100 3772
Firefox 3.5 (Mac) 378 93 352
Firefox 3.6 (Mac) 485 92 446
Safari 4 (Mac) 2430 100 2430
Safari 5 (Mac) 3009 100 3009

Ich denke das Ergebnis ist relativ eindeutig. Der Firefox hat sich nach dem Versionssprung nur im geringen Maße verbessert und bleibt im Ranking auf Platz 3 hinter dem Safari und Chrome. Weit abgeschlagen auf dem letzten Platz der IE 8…

Als Zusatzinfo sollte ich noch sagen, dass mein Firefox mit diversen Addons bestückt ist (u.a. dem Firebug), aber ich denke nicht, dass dem Firefox dadurch große Punktzahlen verloren gehen. Die meisten Addons gehören ja inzwischen zum Standard.

* UPDATE 25.02.2010: Google Chrome 4 hinzugefügt.
* UPDATE 07.03.2010: Opera 10.50 hinzugefügt.
* UPDATE 19.06.2010: Safari 5 hinzugefügt