Jetpack Photon Addon – Tinh chỉnh các URL để thay đổi CDN và tự thêm query cho ảnh

Trước đây thì mình dùng trực tiếp plugin Jetpack để sử dụng tính năng CDN của họ, sau này khi đổi sang tự tạo các link custom thì dùng sub_filter từ Nginx, sau này nữa thì dùng plugin Lucas String Replace … để thêm các query sau ảnh thì dùng một số code sửa trực tiếp các đuôi ảnh sang dạng .png?w=768, bạn nào thích xem lại có thể tìm kiếm “Custom domain cho Jetpack Photon” trên thèng bibica.net 😀

Về cơ bản các vị trí cần khóa cứng kích thước như thumbnail, medium …. hoạt động tốt, mỗi cái do set cứng giá trị, nên các ảnh bên trong bài viết, dùng đủ các kích thước, nó không tùy biến được như plugin chính thức từ Jetpack

Ví dụ ảnh trên, nếu dùng code cũ, dù kích thước trong bài quy định chiều rộng là 165px, do khóa cứng giá trị ảnh ở 768px, link ảnh vẫn phải dùng theo .jpg?w=768 😛 mất đi nhiều ý nghĩa

Jetpack Photon Addon

Sau 1 thời gian chỉnh chọt khá nhiều thứ, cũng đã làm xong cơ bản 1 plugin, quen mồm nên cũng gọi là Jetpack Photon Addon 😀 nó là bản nâng cấp từ các tool script trước đây trong việc quản lý, tạo query các link của Jetpack

Cài đặt:

• Tải plugin tại đây hoặc đây, cài đặt như 1 plugin thông thường là được
• Demo: bibica.net 🧁

Cấu hình:

• Truy cập vào Tools > Jetpack Photon Addon trong bảng điều khiển WordPress.

Hướng dẫn sử dụng

Mặc định khi cài vào, sẽ tự dùng domain active plugin làm đường dẫn gốc, tự thêm URL của Jetpack vào để có thể dùng sẵn, do viết theo theme GeneratePress thèng bibica.net đang dùng, chỉ cần quản lý qua 2 bộ lọc wp_get_attachment_image_attributes và the_content là đủ

Giải thích dễ hiểu hơn, nếu bạn vác Jetpack Photon Addon sang các theme khác, có thể ở 1 số vị trí ảnh sẽ không chạy qua link CDN và sẽ không có các tùy biến từ Jetpack :]]

Về cách hoạt động cũng khá cơ bản, các kích thước thumbnail, medium, large sẽ dùng giá trị cố định, phù hợp với đa số các điều kiện thông thường như ảnh thumbnail cho bài viết, cho album, đa phần dùng giá trị cố định là đủ

Với ảnh full mình tách nhỏ ra, không dùng giá trị cố định mà dùng giá trị chiều rộng tối đa, cụ thể mình quy định chiều rộng tối đa cho ảnh full là 1230px

• Nếu ảnh có độ rộng dưới mức này, sẽ dùng độ rộng tối đa của bức ảnh (ảnh 600px sẽ dùng 600px)
• Nếu ảnh có độ rộng lớn hơn 1230px, sẽ dùng giá trị là 1230px (ảnh 2000px sẽ dùng 1230px)

Cụ thể bạn có thể xem ảnh featured image ở ngay bài viết này, nó hoạt động theo rule của giá trị full

thumbnail, medium, large và full chạy qua bộ lọc wp_get_attachment_image_attributes

Với các ảnh trong bài viết thì phức tạp hơn, mình không nghĩ ra giải pháp nào để có thể biết kích thước tấm ảnh đó là bao nhiêu, đang sử dụng là bao nhiêu ở trong bài viết, ảnh upload trực tiếp hay tự copy url vào bài, chỉ có thể dùng cách trực tiếp nhất, đọc bài viết, tìm các thẻ <img> sau đó xem giá trị width đang dùng là gì để tùy chỉnh lại

Ví dụ như ảnh bên trên, mình quy định chiều rộng tối đa cho các ảnh trong bài viết là 1230px

• Nếu thẻ <img> thấy độ rộng gì, sẽ tự dùng độ rộng đó
• Nếu thẻ <img> thấy độ rộng lớn hơn 1230px, sẽ dùng giá trị max là 1230px

Cuối cùng dùng tới 3 rule riêng biệt, lý do phải quản lý bằng cách này, vì làm thế, tất cả ảnh trong bài mới có kích thước chính xác và độ rộng tối đa như mình mong muốn

Bù lại cho điểm này, mỗi bài viết đều bị đục be bét thông qua preg_replace_callback và str_replace, cũng hơi ngán vấn đề hiệu năng, thử bài viết có nhiều ảnh nhất trên trang, khi chạy thấy Query Monitor báo load database hết 0.03s thì có lẽ vấn đề không đáng sợ như mình nghĩ 😛

Các ảnh trong bài viết được quản lý qua bộ lọc the_content

Phần chất lượng ảnh, 80% theo mặc định của Jetpack là cân bằng tốt chất lượng và dung lượng rồi, chủ yếu các ảnh thumbnail, đôi khi chúng ta thích nó nhẹ hơn, vì cái ảnh bé tí, để chất lượng 100% cũng lem luốc cả, hạ hẳn xuống 60% lấy tốc độ cũng được

Bổ xung 2 tính năng nhỏ là Bật/tắt plugin và Đặt lại tất cả cài đặt về mặc định vì hay dùng 😀

Thêm vào vài bước căn bản kiểm tra phần nhập liệu đầu vào, tránh các lỗi nhỏ

Kích thước ảnh tối ưu?

Sau khi xem các đánh giá từ PageSpeed Insights và trải nghiệm thực tế, cảm giác giá trị dpi 1.5 là cân bằng nhất

Ví dụ kích thước ở trang home, các ảnh sẽ nằm trong khung có độ rộng tối đa 300px, kích thước ảnh nên dùng là x1.5 lần = 450px

Trong bài viết, các ảnh sẽ nằm trong khung có rộng tối đa 820px -> kích thước ảnh tối đa nên duy trì là x1.5 lần = 1230px, cao hơn mức này, bạn cũng không thấy quá nhiều khác biệt, còn dưới mức này đa phần ảnh sẽ khá mờ 😀

Nếu thích, có thể dùng ảnh độ phân giải càng lớn càng tốt, tăng trải nghiệm đọc của người xem, vấn đề dung lượng hay tốc độ ở 2024 mình nghĩ là muỗi cả, ông nào giờ cũng xem phim 4k online cả rồi, tấm ảnh vài MB bỏ bèn gì 😀

Trong trường hợp bạn nào dùng các link ảnh custom riêng, sửa lại giá trị URL cũ và mới là được

Jetpack Photon Addon chỉ sửa các link qua ảnh, không cần lo nó thay nhầm vào các link file css, js …

Sử dụng trên theme custom

Trong trường hợp bạn dùng 1 số theme khác, nó sẽ tự tạo ra rất nhiều kích thước ảnh với các tên khác nhau, ví dụ magsoul-1218w-autoh-image, magsoul-360w-270h-image

• Có thể thêm trực tiếp các kích thước này vào code, để quản lý

switch ($size) {
 	    case 'thumbnail':
        case 'magsoul-360w-270h-image':
        $width = $options['thumbnail_width'];
        $quality_query = $options['thumbnail_quality'];
        break;

        case 'medium':
        $width = $options['medium_width'];
        $quality_query = $options['medium_quality'];
        break;
    
        case 'medium_large':
        case 'large':
        case '1536x1536':
        case '2048x2048':
        $width = $options['large_width'];
        $quality_query = $options['large_quality'];
        break;
    
        case 'full':
        case 'magsoul-1218w-autoh-image':
        // Đối với ảnh full, lấy kích thước từ wp_get_attachment_image_src

Cụ thể mình thử thêm magsoul-360w-270h-image vào chung với phần thumbnail, magsoul-1218w-autoh-image vào chung với full, lúc này có thể quản lý 2 kích thước thước này thông qua plugin ở tùy chọn thumbnail và full

Kết luận

Jetpack Photon Addon viết hoàn toàn dựa trên nhu cầu và sở thích của cá nhân, nếu bạn nào đang có nhu cầu và theme giống thế chắc chạy hợp, cấu hình nói dài dòng còn thực tế sau khi làm xong gần như không phải ngó tới lần nào nữa 😀

Ban đầu mình tìm kiếm giải pháp đơn giản, hiệu quả hơn, là dùng jetpack-image-cdn tách nhỏ ra từ plugin Jetpack, mỗi cái không hiểu sao cài theo hướng dẫn mãi đếch chạy 😀 phần sau khi hoàn thiện Jetpack Photon Addon cũng thích hơn, vì nó tự thêm phần CDN vào, đỡ phải thao tác qua 2-3 cái plugin nhỏ

Sử dụng mình thấy cứ dùng bản Jetpack chính thức từ hãng là lành nhất, vì họ thêm vào rất nhiều bộ lọc cho rất nhiều vị trí, chạy bao hàng ảnh hiện ra chính xác, lại an tâm về hiệu năng và các vấn đề liên quan tới bảo mật, dùng mấy plugin từ end user kiểu mình, chưa bàn tới hiệu quả hay tính năng, nội cái vụ chẳng biết anh ấy có nhét gì vào không, chạy ớn bỏ xừ 😀