Bildgröße 85% -kal csökkenthető? Für eine schnellere Website?

//Bildgröße 85% -kal csökkenthető? Für eine schnellere Website?

Bildgröße 85% -kal csökkenthető? Für eine schnellere Website?

Haben Sie im Verkehr stecken wurden? Wenn ja, dann wissen Sie, wie ärgerlich und langsam, eine so große, Bilder können nicht optimierte Website angezeigt werden. Wie zu lösen?

 

1. Schritt: Die Reduzierung der Größe

Wenn die oben genannten Fragen “wieder” ein Válasz, dann wird die Lösung: reduzieren Sie die Bildgröße. Alle Bildbearbeitungsprogramm, und dies kann leicht anpassen. Das iPhone ist ein normales Bild horizontal 3200 px Breite. Das Header-Bild, ein 13 unter Berücksichtigung der vollen Breite von weniger-Zoll-Bildschirm, Minze 1300 Es wäre Pixel sein. So ein mit dem iPhone gemacht und sofort Bilder hochladen, ohne Bearbeitung, fast dreimal so hoch.

Használhatod eine Photoshopot, aber im Grunde jede andere Bildbearbeitungssoftware kann helfen, denn es ist eine sehr einfache Aufgabe. Sie können die Vorschau auf einen Mac oder einen Online-Dienst verwenden, die Ihnen erlaubt, die Größe auf einmal zu ändern. Eine weitere einfache Software, was Ich mag Pixlr , eine einfache und kostenlose vollständig Photoshop Stil-Software, die läuft im Browser.

2. Schritt: Komprimieren des Bildes in TinyJpg.com-tal

Töltsd le a képet gépedre és csak húzd és vidd a TinyJPG.com Webseite. Sie eine optimierte Version des Bildes in wenigen Sekunden erhalten. Das neue komprimierte Bild unterscheidet sie kaum von den ursprünglichen.

Laut der Website, so dass es funktioniert: “Texturen, die Muster und die Farben automatisch identifizieren. Der Encoder verwendet diese Daten, um optimal komprimierte JPEG-Datei erstellt. Das Endergebnis wird im Vergleich mit dem Original und der optimierte Version. Überschüssiges Metadaten abgebrochen “.

Ich benutze diese Lösung auf anderen Plattformen als die Wordpress-Lösung für Websites laufen, wo der nächste Schritt kann nicht verwendet werden.

3. Schritt: verwenden, um ein Plugin, zu sammeln

zahlreiche Plug-in, die den zweiten Schritt zu automatisieren. EIN Imagify használom erre. Dieses Gerät komprimiert alle Bilder auf der Webseite, und der Prozentsatz der Größe des gespeicherten Bildes.

Getestet habe ich zwei verschiedene Szenarien:

  • fünf iPhone 6 Bild + MacBook .png Screenshots
  • Fünf Bilder von einer semi-professionellen Sony-Kamera

In beiden Fällen habe ich die folgende:

  • Das Originalbild 900 Es ist so dimensioniert Pixel, passen in einem Blog-Post
  • Manuell komprimiert durch TinyJpg.com-one
  • Automatisch komprimiert Imagify (Ultra-Optimierung)

Jedes Bildformat (Original, manuell angepasst und TinyJpged) Ich hochgeladen die Bilder, und festzustellen,, wie man automatisch komprimieren Imagify. Das Ziel war,, um herauszufinden,, die eine bessere Leistung oder stecken die ganze Arbeit für mich.

Befund

In beiden Fällen werden die einzelnen Schritte der Bildgröße leicht reduziert, so Bilder sind kleiner. Die Standard-iPhone Foto 3200px Breite, 3,5-mal mehr, als notwendige 900px.

In dem ersten Schritt wird die Bildgrße 87% -kal csökkent:

Format Original (px) Original 900px-up Átméretezve 900px-re – Reduzierung
JPG1 (iPhone) 591 109 -81,55%
JPG2 (iPhone) 1800 259 -85,61%
JPG3 (iPhone) 2000 250 -87,50%
JPG4 (iPhone) 1500 213 -85,80%
JPG5 (iPhone) 1000 221 -77,90%
PNG1 (Screenshot) 1300 566 -56,46%
pNG2 (Screenshot) 1400 557 -60,21%
pNG3 (Screenshot) 1600 624 -61,00%
pNG4 (Screenshot) 711 275 -61,32%
PNG5 (Screenshot) 1100 508 -53,82%

Továbbra ist, In den meisten Fällen kann das iPhone komprimieren Bilder und Screenshots aller Schritte: Ändern der Größe, Kompression TinyJpg und Imagify. Jeder neue Schritt befindet sich auf der jeweils anderen, die Prozentsätze sind nicht kumulativ.

Format Original (px) Átméretezve 900px-re

abnimmt

+ Imagify

abnimmt

900px + TinyJpg + Imagify

abnimmt

Endgröße (kb)
JPG1 (iPhone) 591 -81,55% -24,77% 0,00% 83
JPG2 (iPhone) 1800 -85,61% -53,67% 0,00% 76
JPG3 (iPhone) 2000 -87,50% -56,80% 0,00% 70
JPG4 (iPhone) 1500 -85,80% -59,15% -47,56% 43
JPG5 (iPhone) 1000 -77,90% -64,25% -52,33% 41
PNG1 (Screenshot) 1300 -56,46% -81,27% -12,41% 127
pNG2 (Screenshot) 1400 -60,21% -80,97% -18,11% 104
pNG3 (Screenshot) 1600 -61,00% -81,89% -7,43% 137
pNG4 (Screenshot) 711 -61,32% -85,45% -20,00% 44
PNG5 (Screenshot) 1100 -53,82% -84,06% -8,33% 99

Jede der Sony-Kamera verwendet hat nicht gewonnen eine “endgültig” Imagify von der Kompression nach TinyJpg.

Aber hier ist der Trick: Die Kompression der TinyJpg mit ihnen eine reduzierte Größe, die für Imagify konnte nicht erreicht. Als ich ging, wurde die TinyJpg ignoriert, Bilder von der gleichen Größe bleiben würden, als eine zweite Säule:

Format 900px + Imagify
Größe ist etwa
900px + TinyJpg
Größe ist etwa
abnimmt
JPG1 (Sony) 421 296 -29,69%
JPG2 (Sony) 461 271 -41,21%
JPG3 (Sony) 180 106 -41,11%
JPG4 (Sony) 258 245 -5,04%
JPG5 (Sony) 304 199 -34,54%

abschließende Gedanken

Dieses Problem wird oft übersehen, nicht verbringen Sie Ihre Zeit, weil Energie ist nicht wichtig, und die!

Sie müssen nicht alle drei Schritte tun, aber zwei können kombinieren. Ändern der Größe der Bilder zum ersten Mal, und dann manuell oder automatisch komprimiert.

Wenn Sie einen Client beeindrucken, Sie können ein Geschwindigkeits-Messgerät laufen, Score wie GMetrix oder die Page Speed ​​Insights beheben vor und nach. 22 Ich oberes Bild angehoben ist eine Bildoptimierung.

2017-09-13T14:15:54+00:00 2017 13. September|Kategorien: SEO Blog|Tags: |