การเพิ่มประสิทธิภาพรูปภาพเพื่อให้โหลดเว็บไซต์ได้เร็วขึ้น

รูปภาพเป็นหนึ่งในสิ่งแรกที่ผู้ใช้ส่วนใหญ่ให้ความสำคัญ ดังนั้นจึงเหมาะสมที่จะใช้รูปภาพที่มีรายละเอียดบนเว็บไซต์เพื่อปรับปรุงประสบการณ์ผู้ใช้ อย่างไรก็ตาม การมีรูปภาพที่ใหญ่เกินไปอาจทำให้รูปภาพติดลบในเวลาโหลดของเว็บไซต์ ส่งผลให้ประสบการณ์ใช้งานแย่ลง ดังนั้นจึงเป็นเรื่องสำคัญมากที่จะต้องรักษาสมดุลระหว่างรายละเอียดของรูปภาพและประสิทธิภาพของเว็บไซต์

เราควรพิจารณาสามสิ่งก่อนที่จะเพิ่มประสิทธิภาพ พวกเขาคือ:

• รูปแบบภาพ
• ความละเอียดของภาพ
• คุณภาพการบีบอัด

รูปแบบภาพ

รูปแบบภาพมีบทบาทสำคัญในการกำหนดวิธีการจัดเก็บ แสดง และส่งภาพ นอกจากนี้ยังกำหนดว่าการบีบอัดประเภทใดที่สามารถทำได้ และรูปภาพรองรับช่องอัลฟาหรือไม่ (ความโปร่งใส) เราจำเป็นต้องเลือกรูปแบบภาพที่เหมาะสมตามความต้องการของเรา รูปแบบรูปภาพยอดนิยมบางรูปแบบสำหรับเว็บ ได้แก่:

PNG: รูปภาพในรูปแบบ .png รองรับความโปร่งใสและใช้การบีบอัดแบบไม่สูญเสียข้อมูล กล่าวคือ ข้อมูลรูปภาพต้นฉบับจะไม่สูญหาย ดังนั้นขนาดภาพจึงค่อนข้างสูง

JPEG:ใช้การบีบอัดแบบสูญเสียซึ่งจะลดขนาดไฟล์โดยละทิ้งข้อมูลภาพบางส่วน การบีบอัดนี้อาจทำให้ไฟล์มีขนาดเล็กลงเมื่อเทียบกับรูปแบบที่ไม่มีการสูญเสียเช่น PNG แต่ไม่มีช่องอัลฟ่า

WEBP: เป็นรูปแบบไฟล์ที่ค่อนข้างใหม่และรองรับการบีบอัดทั้งแบบสูญเสียและไม่สูญเสียข้อมูล นอกจากนี้ยังสนับสนุนความโปร่งใส

ตามข้อกำหนด เราต้องเลือกรูปแบบไฟล์ที่เหมาะสม

ความละเอียดของภาพ

ความละเอียดของภาพเป็นสัดส่วนโดยตรงกับขนาดภาพ ซึ่งหมายความว่าการเพิ่มหรือลดความละเอียดจะมีผลกับขนาดภาพเช่นเดียวกัน ความละเอียดจอภาพที่ได้รับความนิยมมากที่สุดคือ 1080p และผู้ใช้ส่วนใหญ่ใช้โทรศัพท์มือถือซึ่งใช้ความละเอียดต่ำด้วยซ้ำ (ความละเอียดสัมพัทธ์) ดังนั้นการใช้ความละเอียดที่ใหญ่เกินไปถือเป็นการสิ้นเปลืองทั้งหมด เราสามารถแก้ไขได้โดยการปรับขนาดภาพให้มีความละเอียดที่เหมาะสมตามอุปกรณ์เป้าหมาย

คุณภาพการบีบอัด

คุณภาพการบีบอัดมีผลกระทบโดยตรงต่อคุณภาพของภาพ การใช้การบีบอัดสูงจะส่งผลให้สูญเสียรายละเอียด เราต้องหาสมดุลที่สมบูรณ์แบบระหว่างคุณภาพการบีบอัดและรายละเอียดในระดับที่ยอมรับได้ในภาพ

การปรับภาพให้เหมาะสมโดยใช้ไลบรารีหมอนหลาม

ก่อนที่จะเขียนโค้ด เราควรพิจารณาว่าจำเป็นต้องใช้การเพิ่มประสิทธิภาพประเภทใด

รูปแบบภาพ

ฉันใช้ .jpg เป็นรูปแบบไฟล์ที่ต้องการ เนื่องจากฉันไม่ต้องการความโปร่งใส และต่างจาก .webp ตรงที่ .jpg ได้รับการรองรับอย่างกว้างขวาง ณ ตอนนี้ ฉันสามารถใช้ .jpg ในเอกสารได้ แต่ไม่ใช่ .webp

ความละเอียดของภาพ

สำหรับความละเอียดของภาพ จำเป็นต้องมีขนาดภาพสามขนาด ขนาดหนึ่งสำหรับภาพขนาดย่อ หนึ่งขนาดสำหรับการดูเว็บปกติ และขนาดสุดท้ายจะเป็นภาพคุณภาพสูงสำหรับเนื้อหาที่สามารถซูมได้ ความละเอียดที่ฉันต้องการสำหรับแต่ละรายการคือ 160p, 900p และ 1440p

คุณภาพการบีบอัด

และสุดท้าย ฉันใช้คุณภาพการบีบอัด 80%

ค่าเหล่านี้สามารถเปลี่ยนแปลงได้ตามความต้องการ

การเข้ารหัส

สำหรับไลบรารีหมอนสคริปต์นี้ต้องได้รับการติดตั้ง

pip ติดตั้งหมอน

กำลังเปิดภาพ

from PIL import Image
original_image = Image.open(input_image)

การปรับขนาดรูปภาพ

ความละเอียดแรกจะถูกตั้งค่าเป็นค่าคงที่

THUMBNAIL_WIDTH = 160
MEDIUM_SIZE_WIDTH = 900
HIGH_SIZE_WIDTH = 1800

เมื่อปรับขนาดภาพ เราต้องรักษาอัตราส่วนภาพไว้

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

การบีบอัดและการบันทึก

รูปภาพถูกบีบอัดและบันทึกเป็น

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)

นี่คือรหัสเต็ม

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()

บทสรุป

นี่คือตัวอย่างง่ายๆ ของวิธีที่เราสามารถสร้างภาพที่ปรับให้เหมาะสมจากภาพคุณภาพสูงที่ไม่มีการบีบอัด