• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer
Vasile Ruscior

Vasile Ruscior

Totul, mai ușor

  • Confidențialitate
  • Contact

Difuzează imagini în formate moderne

Scris pe 5 ianuarie 2019 4 comentarii

Despre optimizarea paginilor web am mai vorbit. De fiecare dată am ajuns la concluzia că mai puțin înseamnă mai bine. Mai puține scripturi (.js), mai puține imagini mari & foarte mari și așa mai departe.

Dacă ai optimizat un site web, poate te-a blocat fraza Difuzează imagini în formate moderne.

Ce înseamnă formate moderne?

Există trei formate moderne, anume JPEG 2000, JPEG XR și WebP. JPEG 2000 este un format suportat de browser-ul Safari (pe iOS), JPEG XR e suportat de Internet Explorer și Edge, iar WebP e pentru Google Chrome, Opera, Chromium, dar și alte navigatoare web bazate pe Chromium.

Cum cei mai mulți internauți folosesc Chrome, WebP rămâne singurul format modern despre care merită cu adevărat să vorbim.

Avantajele WebP

În format WebP, imaginile au aproximativ aceeași calitate ca a celor JPG sau PNG, însă ocupă mai puțin spațiu și se încarcă mai repede în navigatorul web.

Luăm un exemplu concret.

women.jpg – 129 KB

women.webp – 70 KB

O diferență de 59 de KB, în condițiile în care vorbim de o singură imagine. Pe o pagină web sunt prezente mai multe imagini, așadar pagina se va afișa complet într-un timp mai scurt.

Serverele web sunt capabile să redenumească imaginile din nume.webp în nume.jpg, astfel că utilizatorul final va vedea o imagine cu extensia jpg. Doar tipul imaginii rămâne image/webp.

Dacă navigatorul tău suportă WebP, atunci următoarea imagine este animată:

Dezavantaje WebP

Principalul dezavantaj al WebP-ului stă tocmai în faptul că navigatoare ca Mozilla Firefox nu știu să îl recunoască. Dacă folosești doar imagini WebP, ele nu vor fi afișate.

Tocmai de aceea va trebui să ai pe server două versiuni ale aceleiași imagini: una jpg, clasică și cealaltă în format webp.

Atunci când utilizatorul final intră pe site, vei verifica dacă navigatorul web al acestuia suportă WebP. Dacă suportă, îi vei “servi” imagini în format modern. În caz contrar, le vei afișa pe celelalte, suportate de toate browserele.

Implementare WebP

Implementarea se face relativ simplu. Primul pas constă în crearea unor “copii” în format WebP ale fiecărei imagini existente deja. Aceste “copii” vor ocupa mai puțin spațiu, tocmai datorită formatului modern mai comprimat.

Dacă ai acces SSH, poți face asta direct de acolo. În caz contrar, pluginul celor de la ShortPixel pentru WordPress știe să facă și imagini în format modern, pe lângă optimizarea imaginilor JPG.

Al doilea pas constă în “servirea” imaginilor webp către browserele ce suportă acest format. Și aici există mai multe variante.

Una ar fi folosind mod_rewrite. Altă variantă ar fi prin intermediul Cache Enabler, un plugin pentru WordPress.

Cache Enabler creează două versiuni de pagini statice. Într-o versiune folosește imagini cu extensia webp, iar în cealaltă, imagini cu extensia jpg. Atunci când utilizatorul final poate vedea webp, vede webp. Dacă acesta folosește Mozilla Firefox sau alt browser ce nu știe WebP, atunci vede jpg.

Exemplu de pagină web ce difuzează imagini în formate moderne:

(Chrome vs Firefox)

webp

Partajează asta:

  • Dă clic pentru a partaja pe Twitter(Se deschide într-o fereastră nouă)
  • Dă clic pentru a partaja pe Facebook(Se deschide într-o fereastră nouă)
  • Dă clic pentru partajare pe Telegram(Se deschide într-o fereastră nouă)
  • Dă clic pentru partajare pe WhatsApp(Se deschide într-o fereastră nouă)

Similare

Din categoria: HTML, CSS, PHP si C++ Etichete: imagini, optimizare, web

Abonează-te la blog prin email

Introdu adresa de email pentru a te abona la acest blog și vei primi câte un email de fiecare dată când scriu un nou articol.

Reader Interactions

Comentarii

  1. Anonim a zis

    5 ianuarie 2019 la ora 17:36

    Foarte util!

    Răspunde
  2. Marius a zis

    6 ianuarie 2019 la ora 17:52

    Firefox va suporta peste 2 sau 3 versiuni webp.

    Răspunde
    • Vasile Ruscior a zis

      6 ianuarie 2019 la ora 18:14

      O veste bună. ?

  3. Video Nunta a zis

    9 ianuarie 2019 la ora 17:17

    Foarte util si interesant articolul. Chiar voi aplica.

    Răspunde

Lasă un răspuns Anulează răspunsul

Adresa ta de email nu va fi publicată. Câmpurile obligatorii sunt marcate cu *

Bara principală

Modul întunecat

Blogroll și recomandări

  • Around
  • Stiri Timisoara
  • Breev
  • Blog Star
  • Grig
  • IIRON
  • Stiri de ultima ora
  • Ciurcaș Dan
  • Francisc Vasile
  • Fii Modern

Footer

Au avut ceva de spus

  • Grig la Sameday EasyBox văzut de AI
  • Vasile Ruscior la Sameday EasyBox văzut de AI
  • Stefan la Acțiuni ce se pot realiza cu o mașină de rindeluire
  • Stefan la Sameday EasyBox văzut de AI

Ultimele articole de pe blog

  • Am cumpărat online de la Mega Image
  • Acțiuni ce se pot realiza cu o mașină de rindeluire
  • Sameday EasyBox văzut de AI
  • Mă lupt cu Google Analytics 4

Cauți altceva? Caută aici:

Confidențialitate și cookie-uri: acest site folosește cookie-uri. Dacă continui să folosești acest site web, ești de acord cu utilizarea lor.
Pentru a afla mai multe, inclusiv cum să controlezi cookie-urile, uită-te aici: Politică cookie-uri

© 2012–2023 Vasile Ruscior 🤳 Poți ajunge ușor pe acest blog accesând usor.ro

Sus, Deluță