Gambar adalah salah satu hal pertama yang menjadi fokus sebagian besar pengguna. Jadi, masuk akal untuk menggunakan gambar detail di situs web untuk meningkatkan pengalaman pengguna. Namun memiliki gambar yang terlalu besar dapat menimbulkan citra negatif pada waktu buka situs web, sehingga mengakibatkan penurunan pengalaman. Oleh karena itu, sangat penting untuk menjaga keseimbangan antara detail gambar dan kinerja situs web.
Kita harus mempertimbangkan tiga hal sebelum mengoptimalkan. Mereka:
- Format Gambar
- Resolusi gambar
- Kualitas Kompresi
Format Gambar
Format Gambar memainkan peran penting dalam menentukan bagaimana suatu gambar disimpan, ditampilkan, dan ditransmisikan. Ini juga menentukan jenis kompresi apa yang dapat dilakukan dan apakah gambar mendukung saluran alfa (transparansi). Kita perlu memilih format gambar yang tepat sesuai dengan kebutuhan kita. Beberapa format gambar populer untuk web adalah:
PNG: Gambar berformat .png mendukung transparansi dan menggunakan kompresi lossless, yaitu tidak ada data gambar asli yang hilang. Oleh karena itu, ukuran gambar relatif tinggi.
JPEG:Menggunakan kompresi lossy, yang mengurangi ukuran file dengan membuang beberapa data gambar. Kompresi ini dapat menghasilkan ukuran file yang lebih kecil dibandingkan dengan format lossless seperti PNG. Tapi tidak memiliki saluran alpha.
WEBP: Ini adalah format file yang relatif baru dan mendukung kompresi lossy dan lossless. Ini juga mendukung transparansi.
Berdasarkan persyaratan kita harus memilih format file yang sesuai.
Resolusi gambar
Resolusi Gambar berbanding lurus dengan ukuran gambar artinya memperbesar atau memperkecil resolusi akan memberikan efek serupa pada ukuran gambar. Resolusi monitor paling populer adalah 1080p dan sebagian besar pengguna menggunakan ponsel yang bahkan menggunakan resolusi rendah (Resolusi Relatif). Jadi, menggunakan resolusi yang terlalu besar adalah suatu pemborosan. Kami dapat memperbaikinya dengan menskalakan gambar ke resolusi yang sesuai berdasarkan perangkat target
Kualitas Kompresi
Kualitas Kompresi berdampak langsung pada kualitas gambar. Menerapkan kompresi tinggi akan mengakibatkan hilangnya detail. Kita harus menemukan keseimbangan sempurna antara kualitas kompresi dan tingkat detail yang dapat diterima dalam gambar.
Mengoptimalkan gambar menggunakan perpustakaan bantal python
Sebelum menulis kode kita harus menentukan jenis optimasi apa yang perlu digunakan.
Format Gambar
Saya menggunakan .jpg sebagai format file pilihan saya karena saya tidak memerlukan transparansi dan tidak seperti .webp, .jpg didukung secara luas. Sampai sekarang, saya dapat menggunakan .jpg di dokumen tetapi tidak .webp.
Resolusi gambar
Untuk resolusi gambar diperlukan tiga ukuran gambar, satu untuk thumbnail, satu untuk tampilan web normal, dan yang terakhir adalah gambar berkualitas tinggi untuk konten yang dapat diperbesar. Resolusi pilihan saya untuk masing-masingnya adalah 160p, 900p, dan 1440p.
Kualitas Kompresi
Dan terakhir, saya menggunakan kualitas kompresi 80%.
Nilai ini dapat diubah sesuai kebutuhan
Pengkodean
Untuk skrip ini perpustakaan bantal harus diinstal
pip pasang bantal
Gambar Pembuka
from PIL import Image original_image = Image.open(input_image)
Penskalaan Gambar
Pada awalnya resolusi ditetapkan sebagai konstan
THUMBNAIL_WIDTH = 160 MEDIUM_SIZE_WIDTH = 900 HIGH_SIZE_WIDTH = 1800
Saat menskalakan gambar kita harus menjaga rasio aspek
def resize_image(image, width):
aspect_ratio = image.width / image.height
height = int(width / aspect_ratio)
return image.resize((width, height))
Kemudian gambar tersebut diperkecil menggunakan
def generate_scaled_image(original_image):
thumbnail_image = resize_image(original_image, THUMBNAIL_WIDTH)
medium_size_image = resize_image(original_image, MEDIUM_SIZE_WIDTH)
high_size_image = resize_image(original_image, HIGH_SIZE_WIDTH)
return thumbnail_image, medium_size_image, high_size_image
Mengompresi dan menyimpan
Gambar dikompresi dan disimpan sebagai
thumbnail_image.save(thumbnail_image_path,
optimize=True, quality=COMPRESSION_QUALITY)
medium_size_image.save(medium_size_image_path,
optimize=True, quality=COMPRESSION_QUALITY)
high_size_image.save(high_size_image_path,
optimize=True, quality=COMPRESSION_QUALITY)
Ini kode lengkapnya
import sys
from PIL import Image
import os
# Three images will be created from this image.
# The first image will be a 128x128 thumbnail
# The second will be medium quality image
# The third will be a high quality image
THUMBNAIL_WIDTH = 168
MEDIUM_SIZE_WIDTH = 900
HIGH_SIZE_WIDTH = 1800
# Compress image to reduce size
COMPRESSION_QUALITY = 80
def resize_image(image, width):
aspect_ratio = image.width / image.height
height = int(width / aspect_ratio)
return image.resize((width, height))
def generate_scaled_image(original_image):
thumbnail_image = resize_image(original_image, THUMBNAIL_WIDTH)
medium_size_image = resize_image(original_image, MEDIUM_SIZE_WIDTH)
high_size_image = resize_image(original_image, HIGH_SIZE_WIDTH)
return thumbnail_image, medium_size_image, high_size_image
def main():
if len(sys.argv) < 3:
print("Usage: python script.py image_name input_image storage_path")
return
image_name = sys.argv[1]
input_image = sys.argv[2]
storage_path = sys.argv[3]
if not os.path.exists(storage_path):
os.makedirs(storage_path + '/thumbnail')
os.makedirs(storage_path + '/medium')
os.makedirs(storage_path + '/high')
try:
original_image = Image.open(input_image)
except Exception as e:
print("Error opening the input image:", e)
return
thumbnail_image_path = os.path.join(
storage_path, 'thumbnail', image_name + '.jpg')
medium_size_image_path = os.path.join(
storage_path, 'medium', image_name + '.jpg')
high_size_image_path = os.path.join(
storage_path, 'high', image_name + '.jpg')
thumbnail_image, medium_size_image, high_size_image = generate_scaled_image(
original_image)
try:
thumbnail_image.save(thumbnail_image_path,
optimize=True, quality=COMPRESSION_QUALITY)
medium_size_image.save(medium_size_image_path,
optimize=True, quality=COMPRESSION_QUALITY)
high_size_image.save(high_size_image_path,
optimize=True, quality=COMPRESSION_QUALITY)
print(image_name + '.jpg', "saved successfully")
except Exception as e:
print("Error saving images:", e)
if __name__ == "__main__":
main()
Kesimpulan
Berikut adalah contoh sederhana bagaimana kita dapat menghasilkan gambar yang dioptimalkan dari gambar berkualitas tinggi yang tidak dikompresi.
