WEBP: Format Gambar Pengganti JPEG, PNG, dan GIF

25 Mar 2022 16:20
Dipost oleh Admin
429
2
Share:

Sobatcoding.com - Belajar tentang Webp format gambnar pengganti JPEG, PNG dan GIF

WebP adalah format file gambar yang dikembangkan Google sebagai pengganti format file JPEG, PNG, dan GIF. WebP menghasilkan file yang lebih kecil untuk kualitas yang sama, atau kualitas yang lebih tinggi untuk ukuran yang sama. Ini mendukung kompresi lossy dan lossless, serta animasi dan transparansi alfa.

Gambar-gambar lospless webp berukuran 26% lebih kecil dibandingkan dengan PNGS. Webp Lossy gambar adalah 25-34% lebih kecil dari gambar JPEG yang sebanding dengan indeks kualitas SSIM yang setara.

WebP lossp mendukung transparansi (juga dikenal sebagai saluran alpha) dengan biaya hanya 22% byte tambahan. Untuk kasus-kasus ketika kompresi RGB lossy dapat diterima, WebP lossy juga mendukung transparansi, biasanya menyediakan 3 × ukuran file yang lebih kecil dibandingkan dengan PNG.

Membuat Gambar Webp Menggunakan PHP

Kita akan membuat contoh sederhana upload gambar JPG, PNG atau GIF kemudian melakukan convert ke format Webp.

Kita buat dulu sebuah form sederhana.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Convert Webp</title>
    </head>
    <body>
        <form method="POST" action="upload.php" enctype="multipart/form-data">
            <input type="file" name="image">
            <button type="submit">Upload</button>
        </form>
    </body>
</html>

Kemudian tambahkan file upload.php dan masukkan kode berikut.

<?php

require( __DIR__ ."\Image.php");


$upload = new Image;
$path   = __DIR__. "\\" ;

$fileInfo = pathinfo($_FILES['image']['name']);
$name   = $fileInfo['basename'];
$upload = $upload::upload($_FILES['image'], $path, $name);
dd($upload);


function dd($str)
{
    echo '<pre>';
    print_r($str);
    echo '</pre>';
}

Kita buat class Image untuk handle proses upload.

<?php

class Image {

    /**
     * @param $file is $_FILES upload 
     * @param $path is dir destination upload
     * @param $name is new name of file
     * @param $convertWebp is boolean
     */
    static function upload($file, $path, $name= null, $convertWebp= true)
    {
        //replace backslash to slash
        $path = str_replace("/", "\\", $path);
        //cek exist dir
        if( !is_dir($path) )
        {
            $explode = explode("\\", $path);
            $explode = array_filter($explode);
            $dir  = "";
            foreach( $explode as $index => $val )
            {
                $dir .= $val. "\\";
                if( !is_dir( $dir ) )
                {
                    mkdir( $dir, "0777");
                }
            }
        }
        

        $fileInfo   = pathinfo($file['name']);
        if( !$name )
        {
            $name       = md5($fileInfo['basename']);
        }

        $success = false;
        $webpFile= null;
        $finalName = $name.".".$fileInfo['extension'];
        $dirUpload = $path. $finalName;
        if( $upload = move_uploaded_file($file['tmp_name'], $dirUpload) )
        {
            $success = true;
            if( $convertWebp )
            {
                $webpFile = $name.".webp";
                $dirWebp  = $path. $webpFile;
                self::convertToWebp( $dirUpload, $dirWebp);
            }
        }

        return [
            "success"   => $success,
            "real_path" => $path,
            "file_name" => $finalName,
            "webp"     => $webpFile
        ];
        
    }

    static function convertToWebp($source, $destination)
    {
        $extension = pathinfo($source, PATHINFO_EXTENSION);
        if ($extension == 'jpeg' || $extension == 'jpg') 
            $image = imagecreatefromjpeg($source);
        elseif ($extension == 'gif') 
            $image = imagecreatefromgif($source);
        elseif ($extension == 'png' || $extension == 'PNG') 
            $image = imagecreatefrompng($source);
        else
            $image = imagecreatefromjpeg($source);
            
        return imagewebp($image, $destination);
    }
}

Selamat mencoba!.

Sekian tutorial kali ini. Jika teman-teman memiliki pertanyaan atau saran mengenai artikel ini, jangan ragu untuk meninggalkan komentar pada form di bawah ini.

Semoga bermanfaat.