Tối ưu hóa hình ảnh, dẫn đến kích thước tệp nhỏ nhất có thể nhưng không làm giảm chất lượng hình ảnh, là bước bắt buộc trước khi phân phối. Bằng cách đó, bạn tiết kiệm byte và cải thiện hiệu suất trang web vì tệp hình ảnh càng nhỏ, trình duyệt có thể tải xuống và hiển thị chúng trên màn hình của người xem càng nhanh
Bài viết này chỉ cho bạn cách nén hình ảnh bằng PHP, một trong những ngôn ngữ phía máy chủ phổ biến nhất để xây dựng ứng dụng web
Sao chép liên kết đến tiêu đề nàyHình ảnh tải trên trang web của bạn càng nhanh thì khách truy cập càng có nhiều khả năng quay lại, mang lại tỷ lệ chuyển đổi cao hơn. Trên thực tế, một nửa số khách truy cập mong đợi các trang web tải trong vòng hai giây. Khảo sát từ Akamai và Gomez đã tiết lộ rằng—
- Thời gian tải dài là một yếu tố góp phần chính dẫn đến việc bỏ trang, điều này có nhiều khả năng xảy ra hơn với mỗi giây thời gian tải thêm. Gần 40 phần trăm khách truy cập từ bỏ một trang chỉ sau ba giây
- 73% người dùng di động đã gặp sự cố với thời gian tải trên thiết bị của họ
- Thời gian tải chậm một giây có thể làm giảm 16% sự hài lòng của khách truy cập, dẫn đến tỷ lệ chuyển đổi giảm 7% hoặc cao hơn
Bạn có thể nén hình ảnh trong PHP bằng một trong các cách sau
- Thông qua các hàm dựng sẵn của PHP, chẳng hạn như
imagejpeg[]
, lấy đường dẫn của hình ảnh đầu ra và đặc tả chất lượng trong khoảng từ 1 đến 100. Là điều kiện tiên quyết, hãy cài đặt Thư viện đồ họa GD của PHP - Thông qua Trình tối ưu hóa hình ảnh PHP, một thư viện PHP do Piotr Sliwa xây dựng, tận dụng một số thư viện, bao gồm OptiPNG,
pngquant
và[jpegoptim
][http. //jpegclub. org/jpegtran/]. Trình tối ưu hóa hình ảnh có thể nén các tệp hình ảnh từ 10-70 phần trăm mà không làm mất đi sự hấp dẫn về mặt hình ảnh - Với PHP Image Cache, một lớp PHP đơn giản giúp nén hình ảnh nhanh chóng. Sau khi quá trình nén Hình ảnh PHP hoàn tất, Bộ nhớ đệm Hình ảnh lưu trữ hình ảnh trong trình duyệt của bạn và sau đó trả về nguồn mới của hình ảnh
- Với Imagick, một tiện ích mở rộng PHP gốc để tạo và sửa đổi hình ảnh bằng API ImageMagick
Với Cloudinary, bạn có thể tối ưu hóa nội dung phương tiện một cách hiệu quả—bất kể ngôn ngữ lập trình. Một lý do là theo mặc định, Cloudinary sẽ tự động thực hiện các bước tối ưu hóa nhất định trên tất cả các hình ảnh được chuyển đổi. Ngoài ra, khả năng phân phối nhanh, tích hợp của nó thông qua mạng phân phối nội dung [CDN] đảm bảo rằng hình ảnh được hiển thị liền mạch trên thiết bị của người xem. Nhấp vào đây để yêu cầu tài khoản Cloudinary vĩnh viễn miễn phí của bạn
Cloudinary cung cấp các khả năng nén hình ảnh sau
Tự động điều chỉnh chất lượng và mã hóa. Khi bạn đã thêm tham số
q_auto
vào URL hình ảnh, Cloudinary sẽ chọn cài đặt mã hóa và mức nén chất lượng tối ưu theo nội dung hình ảnh, định dạng của nó và trình duyệt đang xem. Kết quả là một hình ảnh nén với chất lượng hình ảnh vượt trội. Xem ví dụ này.Để tinh chỉnh chất lượng hình ảnh của hình ảnh của bạn thông qua tự động hóa, hãy thêm
q_auto:best
. Tham sốq_auto:low
,q_auto:good
hoặcq_auto:eco
, như bạn mong muốnđịnh dạng tự động. Việc thêm tham số
f_auto
vào URL hình ảnh khiến Cloudinary định dạng hình ảnh một cách tối ưu. Trong hầu hết các trường hợp, người dùng Chrome sẽ nhận được WebP [_______9]; . jp2]. Nếu trình duyệt không hỗ trợ bất kỳ định dạng nào trong số đó, Cloudinary sẽ cung cấp hình ảnh ở định dạng được mô tả bởi phần mở rộng tệpTrong trường hợp bạn thêm cả hai tham số
f_auto
vàq_auto
vào URL của hình ảnh JPEG, thuật toán chất lượng tự động của Cloudinary sẽ tạm dừng lấy mẫu con sắc độ, giữ lại định dạng JPEG mà không chuyển sang WebP. Đó là một biện pháp bảo vệ chất lượng vì định dạng WebP mất dữ liệu luôn hoạt động , điều này có thể làm giảm chất lượng hình ảnh của một số hình ảnhThay đổi kích thước và cắt xén. Bằng cách thêm các tham số chiều rộng [
pngquant
3] và chiều cao [pngquant
4] vào URL của chúng, bạn có thể thay đổi kích thước hình ảnh bằng Cloudinary, như trong ví dụ nàyĐang tải ví dụ về mã
Đang tải ví dụ về mã
Tại đây, Cloudinary duy trì tỷ lệ khung hình nhưng thay đổi kích thước hình ảnh theo chiều cao và chiều rộng mà bạn đã chỉ định
Đang tải ví dụ về mã
Cloudinary hỗ trợ nhiều chế độ cắt ảnh. , , , , , , , , , , , , và
Sao chép liên kết đến tiêu đề nàyTối ưu hóa và lưu trữ hình ảnh đúng cách là một bước quan trọng để nâng cao hiệu suất trang web. Các mẹo mà bài đăng này cung cấp chỉ là bước khởi đầu. Xem tài liệu Cloudinary để biết thêm ý tưởng về tối ưu hóa hình ảnh JPEG mà không làm giảm chất lượng và chuyển đổi hình ảnh