WEBP konverzija

.webp konverzija slika može se napraviti u dva slučaja: proaktivno ili retroaktivno.

Najbolji način je da se u startu kreće s dodavanjem webp slika pošto je webp format postao standard za slike na modernim Web pretraživačima i sami benefiti implementacije webp formata za slike na Web stranicu su bolje performanse, manje zauzeće memorije na serveru, smanjeno vrijeme učitavanja stranice i mnogi drugi.

Developer koji želi implementirati webp format, može to napraviti na dva načina: proaktivno ili reaktivno. Ukoliko je Web postojeći, koristi se reaktivni pristup i tada je potrebno napraviti ručnu konverziju statičnih slika te u backendu omogućiti upload webp formata. Praksa je pokazala kako većina klijenata šalje materijale u standardnim formatima (.jpg ili .png), najbolja stvar koja se može napraviti je automatski konverter. Takva konverzija zahtjeva unaprijed podešene postavke na serveru, primjerice php modul imagick koji omogućava automatsku obradu slika putem skripte.

Frontend developer u slučaju ručne pretvorbe slika u webp format bi trebao inicijalno podesiti u .htaccessu MIME type koji će omogučiti preglednicima koji podržavaju webp format, preuzimanje slika u tom formatu, ali to neće riješiti prikaz slika u webp formatu.

Kod za .htacces izgleda otprilike ovako:

# Check if WebP is supported by the browser
<IfModule mod_rewrite.c>
    RewriteEngine On

    # Check for WebP images and serve them
    RewriteCond %{HTTP_ACCEPT} image/webp
    RewriteCond %{DOCUMENT_ROOT}/$1.webp -f
    RewriteRule ^(.*)\.(jpg|jpeg|png)$ $1.webp [T=image/webp,E=webp,L]
</IfModule>

<IfModule mod_headers.c>
    # Set cache headers for WebP images
    Header append Vary Accept
</IfModule>

Nakon toga je potrebno sve slike koje postoje prebaciti u webp format. Ukoliko se to ne može napraviti putem plugina ili na samome serveru, onda je potrebno lokalno prebaciti slike. To se može napraviti na sljedeći način. Potrebno je ući u SSH na VM-u i instalirati cwebp (može i imagick, ali je onda postupak drugačiji):

sudo apt install webp

Nakon toga se kreira bash skripta (convert_to_webp.sh) u root folderu:

#!/bin/bash

# Directories to scan for images
BASE_DIR="./"  # Change this to your root directory
IMAGE_EXTENSIONS=("jpg" "jpeg" "png")

# Loop through each image extension
for EXT in "${IMAGE_EXTENSIONS[@]}"; do
    # Find all images with the current extension
    find "$BASE_DIR" -type f -iname "*.$EXT" | while read IMAGE; do
        # Get directory, filename, and WebP destination
        DIR=$(dirname "$IMAGE")
        FILENAME=$(basename "$IMAGE" ".$EXT")
        WEBP_PATH="$DIR/$FILENAME.webp"

        # Check if WebP already exists
        if [ ! -f "$WEBP_PATH" ]; then
            echo "Converting: $IMAGE -> $WEBP_PATH"
            cwebp -q 80 "$IMAGE" -o "$WEBP_PATH"
        else
            echo "WebP already exists: $WEBP_PATH"
        fi
    done
done

Prema navedenoj skripti, developer može promijeniti direktorij u kojemu se nalaze slike i taj direktorij navede u skripti:

BASE_DIR="./img"

Nakon definiranja direktorija u kojem se nalaze slike. Potrebno je pokrenuti skriptu putem naredbe:

bash ./convert_to_webp.sh

Pokreće se program i konverzija slika započinje za sve slike u navedenom folderu. Nakon što se sve slike konvertiraju developer može na dva načina izmjeniti i postaviti prikaz slika u webp formatu, ako se radi o dinamičnom sadržaju, tada je potrebno definirati funkcije koje će umjesto .jpg ili .png formata prikazivati .webp, to se može napraviti u suradnji s Backend developerom. Drugi način je dinamički izmjeniti putanje putem javascripta, iako je prva opcija bolja i lakša za performanse stranice. Primjerice, ukoliko Web koristi WordPress za backend, u functions.php za temu se može dodati snippet koda koji će automatski prebaciti sve slike u .webp format:

// Check if WebP version of image exists and return the WebP URL if it does
function load_webp_images($url) {
    // Ensure the URL is for an image (jpg, jpeg, or png)
    if (preg_match('/\.(jpg|jpeg|png)$/i', $url)) {
        // Replace the image extension with .webp
        $webp_url = preg_replace('/\.(jpg|jpeg|png)$/i', '.webp', $url);
        
        // Check if the WebP file exists on the server
        $webp_path = $_SERVER['DOCUMENT_ROOT'] . parse_url($webp_url, PHP_URL_PATH);
        if (file_exists($webp_path)) {
            // If WebP exists, return the WebP URL
            return $webp_url;
        }
    }
    
    // If WebP does not exist, return the original URL
    return $url;
}

// Replace image URLs in content, widget, and post thumbnails
function replace_images_in_content($content) {
    return preg_replace_callback(
        '/<img [^>]*src=["\']([^"\']+)\.(jpg|jpeg|png)["\'][^>]*>/i',
        function ($matches) {
            $original_url = $matches[1] . '.' . $matches[2];  // Get the original image URL
            $webp_url = load_webp_images($original_url);  // Check and return WebP URL
            
            // If WebP exists, replace original URL with WebP, otherwise leave it unchanged
            return str_replace($original_url, $webp_url, $matches[0]);
        },
        $content
    );
}

// Apply filter to WordPress content
add_filter('the_content', 'replace_images_in_content');
add_filter('widget_text', 'replace_images_in_content');
add_filter('widget_text_content', 'replace_images_in_content');
add_filter('post_thumbnail_html', 'replace_images_in_content');

// Apply filter to attachment URLs (media library images)
add_filter('wp_get_attachment_url', 'load_webp_images');



function replace_acf_image_with_webp($value, $post_id, $field) {
    // Check if the field value is an image and contains a URL
    if (is_array($value) && isset($value['url'])) {
        $image_url = $value['url'];

        // Replace .jpg, .jpeg, or .png extensions with .webp
        $webp_url = preg_replace('/\.(jpg|jpeg|png)$/i', '.webp', $image_url);

        // Check if the WebP image exists
        $webp_path = $_SERVER['DOCUMENT_ROOT'] . parse_url($webp_url, PHP_URL_PATH);
        if (file_exists($webp_path)) {
            // If WebP exists, return the WebP URL
            $value['url'] = $webp_url;
        }
    }

    return $value;
}

// Apply to all ACF image fields
add_filter('acf/format_value/type=image', 'replace_acf_image_with_webp', 10, 3);

U slučaju statičkih slika koje su definirane u kodu, developer mora napraviti search-replace u kodu i izmjeniti format slika u .webp.

U VS Code programu to se može napraviti na sljedeći način:

I klikom na “replace all” se sve definirane slike u .php dokumentima zamijene s putanjom za webp format.

Kompatibilnost

Po pitanju kompatibilnosti prikaza webp slika na različitim pretraživačima, odgovor je takav da svi moderni pretraživači podržavaju ovaj format, stoga nije potrebno refaktorirati kod.