Optimizarea JPEG pentru Web - Ultimate Guide

Comprimarea imaginilor se găsește în orice format media nativ. Cu toate acestea, diferența dintre GIF, PNG și JPEG este Cum informațiile sunt comprimate și afișate pe ecran. Există atât de multe sfaturi pentru compunerea unor medii de imagine grozavă publicate pe web, și totuși mulți designeri încă nu înțeleg unele dintre elementele fundamentale.

În acest ghid aș dori să împărtășesc câteva idei pentru o compresie JPEG corespunzătoare. Doriți să vă optimizați imaginile pentru a reduce timpul de încărcare a paginilor web, deși dețineți și un nivel decent de calitate. Totul vizează găsirea unui echilibru între dimensiunile fișierelor și afișarea ecranului. Nu există o soluție perfectă pentru designeri să urmeze. Este nevoie de o practică inițială, dar odată ce înțelegi compresia JPEG, devine mult mai ușor să dezvolți site-uri web în viitor.

Evitați întotdeauna salvarea la 100%

Ar trebui să nu salvați aproape niciodată imaginile JPEG la 100% calitate. Asta va nu produce cele mai multe posibile “optimizat” imagine. De fapt, aceasta calculează printr-o formulă de limită de optimizare care mărește exorbitant dimensiunile fișierelor. Chiar și în comparație cu 90% sau 95% calitate, veți vedea o scădere semnificativă a dimensiunii fișierului.

De cele mai multe ori, veți fi recomandat să salvați imagini cu o calitate mult mai mică de 90%. Dacă deschideți caseta de dialog Salvează pentru Web din Photoshop, veți observa că oferă valori presetate pe care le puteți alege. Am adăugat posibilele valori JPEG de mai jos - observați convențiile inerente de numire.

Scăzut - 10%
Mediu - 30%
Înalt - 60%
Foarte inalt - 80%
Maxim - 100%

Chiar și în Adobe Photoshop, calitatea imaginii de 60% este considerată "ridicată". Mulți dezvoltatori de web vor garanta că între 50% - 70% este un interval sigur în care să rămână.

Cât de scăzut este prea scăzut?

Valorile pe care le alegeți pentru optimizare sunt complet dependente de proiectul la îndemână. Va trebui să vă gândiți ce tipuri de grafică vor scoate cele mai mari dimensiuni ale fișierelor - acestea sunt cele care au nevoie de compresie.

Aș susține că, sub 30%, distrugeți cu adevărat calitatea imaginii fundamentale. Alți designeri vor jura 50% ca a “limită” la scăderea valorii optime. Dar cel mai bun sfat aici este să încercați diferite setări și să vedeți ce arată cel mai bine! Nu puteți merge prost în câteva studii de testare care optimizează imaginile JPEG pentru web.

Opțiuni de comprimare

Mai întâi ar trebui să clarificăm cei doi termeni "compresie" și "calitate" care sunt inversi unul altuia. Acest lucru înseamnă că, dacă salvați un JPEG cu compresie de 40%, veți obține o calitate de 60% (în comparație cu o calitate maximă de 100% fără compresie).

Acestea sunt opțiunile cele mai de bază de utilizat - și ar trebui să fie suficiente atunci când salvați pentru web. Utilizatorii generali nu primesc personalizări mult mai profunde. Subsamblarea se intampla in probleme mai complicate in care convertiti imaginile RGB in YCbCr (Luminance, Chroma Blue, Chroma Red).

(Imagine Sursa: Kara Monroe)

luminanță sau setarea luminozității este întotdeauna menținută la cea mai mare valoare posibilă în compresia JPEG. Cu această valoare de luminozitate pe un canal separat, este mai ușor să optimizați valorile individuale ale culorilor roșu și albastru. Acesta este, de asemenea, cunoscut sub numele de croma subsampling. Designerii interesați să-și murdărească mâinile vor dori să citească un pic mai mult despre acest algoritm de compresie. Check out acest post de blog mare pe eșantionarea chroma special concentrat pe imagini JPEG.

(Imagine Sursa: Derek Hatfield)

Ca o notă laterală interesantă, Adobe Photoshop nu utilizează întotdeauna subsampling pentru compresie. Toate imaginile salvate prin “Salvați pentru Web” dialogul va utiliza doar subsampling chroma sub o valoare de calitate de 50%.

Diferite medii Web

Web-ul este, de asemenea, plin de diferite tipuri de medii de imagine. Puteți avea fotografii, icoane, butoane, insigne și multe alte grafice. Dar este important faptul că compararea calității între un buton și o fotografie nu are sens.

Atunci când utilizați fotografii sau imagini detaliate, luați legătura cu un fișier JPEG separat, mai puțin comprimat. Apoi puteți seta miniaturi pe site-ul dvs. cu un raport de compresie mai mare și dimensiuni mult mai mici de fișiere. Singurul dezavantaj este că va trebui să oferiți două seturi de imagini pentru o galerie media. Luați notă de multe grafice diferite pe care le-ați cusut pe tot parcursul unui site web și luați în considerare tehnicile de optimizare pentru fiecare individual.

Planificarea unui model grafic

Vrei să ai un sistem de fișiere organizat care să fie destul de ușor să treacă prin asta. Unii webmasteri vor alege să-și găzdui fotografiile în altă parte pe web - cum ar fi Flickr sau Picasa. Cu toate acestea, veți dori totuși să utilizați un instrument de comprimare pentru a reduce dimensiunile imaginilor, dar modul în care le afișați pe site-ul dvs. va varia. Acest lucru este valabil mai ales în cazul creșterii populare a dispozitivelor mobile cu acces la internet.

Am găsit un articol interesant despre codarea JavaScript JPEG care s-ar întâmpla în codul frontend. Nu există prea multe beneficii pentru galeriile de imagini de înaltă calitate, dar se poate rade timpul de încărcare pentru vizitatorii dvs. de telefonie mobilă. Ar fi, de asemenea, o tehnică utilă atunci când imaginile fierbinte sau re-culturile miniaturi dinamic.

Un alt instrument fantezist pentru a verifica este Yahoo! Smush.it. Este o aplicație web bazată pe browser unde puteți încărca o imagine și Smush.it va elimina toți octeții suplimentari inutili pentru a optimiza dimensiunea fișierului. Este 100% fără pierderi, ceea ce înseamnă că calitatea imaginii nu va degrada deloc. Și chiar mai bine poți încărca loturi de imagini din adrese URL directe dacă le găsești pe site-ul tău sau pe un server al unei terțe părți.

Instrumente suplimentare

Există o mulțime de software pentru a încerca în ceea ce privește manipularea imaginii. Orice extra octeți pe care îl puteți rade de la dimensiunea fiecărui fișier sunt cruciale. Nu există o mulțime de software acolo, dar opțiunile disponibile sunt uimitoare.

IrfanView

Acest software gratuit pentru Windows vă permite să vizualizați și să optimizați orice set de imagini mari. Îmi place mai mult acest software, deoarece acceptă conversia în lot din imagini în mai multe directoare. Puteți aplica automat aceleași funcții în sute de imagini JPEG.

Ce este chiar mai bine este suportul plugin-ului de la dezvoltatorii terță parte. Un astfel de exemplu este RIOT (Radical Image Optimization Tool). Acest plugin funcționează pentru alți editori de grafică open-source similare, cum ar fi GIMP. Oferă o vizualizare cu două imagini, în care puteți ajusta manual parametrii de compresie pentru fiecare dintre imaginile dvs..

Suportul pentru software este minunat, iar funcțiile RIOT sunt foarte ușor de utilizat. Împreună cu compresia imaginilor aveți de asemenea acces la eliminarea metadatelor suplimentare, cum ar fi EXIF și Adobe XMP. Acești biți suplimentari de date pot adăuga numai la dimensiunea totală a fișierelor și sunt rareori necesare.

ImageOptim pentru Mac

Dacă rulați OS X și aveți nevoie de o aplicație de compresie puternică, nu mai căutați. ImageOptim este un instrument puternic pentru a comprima imagini pentru web - uneori chiar mai bine decât Photoshop.

Întreaga aplicație suportă funcționalitatea drag-and-drop, astfel încât este ușor să optimizați seturi mari de imagini. Puteți rula în mod similar comenzi chiar din interiorul Terminalului și a setărilor de script-uri shell. Consultați pagina de cod Google pentru mai multe informații și asistență tehnică.

Au existat câteva probleme minore cu cea mai recentă versiune stabilă 1.3.3 în redarea imaginilor JPEG pixelate în Opera. Încercați să verificați toate imaginile optimizate în cele 4 browsere importante - Chrome, Safari, Firefox și Opera (și poate IE). Dacă se vede ceva înclinat puteți încerca să descărcați ImageOptim 1.3.0 care convertește un pic mai curat.

Resurse utile

JPEG 101: Un ghid al cursului de impact pe JPEG
Setări de compresie potrivite pentru a salva imagini JPG pentru WordPress
Tehnici de optimizare JPEG inteligente
Cum se optimizează imaginile JPEG pentru site-uri web
Tot ce trebuie să știți despre compresia imaginilor

Concluzie

Compresia JPEG este dificilă deoarece trebuie să găsiți echilibrul adecvat între calitate și substanță. Chiar și în condițiile în care vitezele noastre moderne de conectare la Internet sunt în creștere, este încă necesară reducerea dimensiunii paginilor web. Cadre noi, cum ar fi jQuery și Typekit, pot atașa sute de kilobyte suplimentare, chiar și pe un design bine optimizat.

Încă mai trebuie să recomand Adobe Photoshop drept software-ul meu de editare a premiului. Există și alte exemple, eventual, mai bune pentru procesul de optimizare JPEG. Dar designerii de web pot obține cu soluții mai puțin cunoscute de surse deschise. Dacă aveți trucuri sau idei similare cu privire la comprimarea JPEG, vă rugăm să ne comunicați în zona de discuții post mai jos.