Eric Portis tham gia cùng tôi để khám phá thế giới của hình ảnh phản hồi.
Chúng tôi bắt đầu ở những điều cơ bản. Hình ảnh đáp ứng cụ thể là hình ảnh trong HTML và tồn tại vì mong muốn có hiệu suất tốt hơn. Hình ảnh có lẽ là thủ phạm lớn nhất trong trọng lượng tổng thể của các trang web. Nếu có thể tránh gửi quá nhiều pixel trên mạng, chúng ta nên làm như vậy. Rốt cuộc, màn hình chỉ rộng 720 pixel không cần hình ảnh rộng 2000 pixel, ngay cả khi đó là màn hình 2x.
Vấn đề là, các trình duyệt thực sự tích cực trong việc tải xuống các nội dung như hình ảnh. Điều đó tốt, vì đó là lý do tại sao web (có thể) nhanh như vậy. Nhưng cũng có nghĩa là chúng ta cần cung cấp một loạt thông tin về hình ảnh của chúng ta ngay trong HTML. Không thể một trình duyệt chỉ biết hình ảnh lớn như thế nào? Chắc chắn nó có thể, sau khi nó đã tải xuống. Trình duyệt không thể biết hình ảnh sẽ hiển thị trên trang lớn đến mức nào? Chắc chắn nó có thể, sau khi tải xuống tất cả CSS và bố cục được thực hiện. Cú pháp hình ảnh đáp ứng cố gắng đi trước tất cả điều đó bằng cách cung cấp thông tin đó ngay trong cú pháp. Tìm ra cú pháp đó thật khó! Có srcset, sizesvà các yếu tố, và có một tấn để bọc tâm trí của bạn xung quanh đó.
Nó vẫn còn phức tạp hơn.
Cú pháp bạn cần xây dựng dựa trên việc có nhiều bản sao của hình ảnh đó để xây dựng cú pháp xung quanh. Làm thế nào để bạn thực hiện chúng? Bạn nên làm bao nhiêu? Kích thước chúng nên là bao nhiêu?
May mắn thay, có một số công cụ tự động xuất hiện xung quanh hình ảnh đáp ứng. WordPress là một người chơi đầu tiên. Ngoài ra, WordPress sẽ tạo nhiều phiên bản hình ảnh bạn tải lên và xuất srcsetcú pháp hữu ích . Nhưng bạn có thể làm tốt hơn nhiều. Bạn có thể cung cấp một sizesthuộc tính thực sự phù hợp với những gì chủ đề của bạn đang làm và cách nó định cỡ những hình ảnh đó.
Ngoài ra, WordPress không sử dụng bất kỳ trí thông minh đặc biệt nào để tạo nhiều bản sao của hình ảnh bạn tải lên. Nhưng, nó có thể. Một công cụ như trình tạo điểm ngắt hình ảnh đáp ứng sử dụng một số thông minh để tìm ra bao nhiêu hình ảnh khác nhau mà bạn có thể tạo ra, vì vậy bạn có thể cân bằng giữa việc có gần với hình ảnh hoàn hảo cho công việc và không cần phải tạo hàng trăm hoặc hàng nghìn bản sao của nó. Công cụ đó có một API!
Nó vẫn còn phức tạp hơn.
Các trình duyệt khác nhau hỗ trợ các định dạng hình ảnh khác nhau. Ví dụ, WebP. Có thể tiết kiệm hiệu suất bằng cách cung cấp định dạng hình ảnh phù hợp cho đúng trình duyệt. Cú pháp hình ảnh đáp ứng có thể giúp làm điều đó, nhưng nó làm phức tạp cú pháp. Nhiều định dạng hình ảnh cũng có khái niệm về chất lượng. Bạn lưu nhiều bản sao này ở chất lượng nào?
Tại thời điểm này, đây là thời điểm thích hợp để nhắc đến Cloudinary. Tôi đã tích hợp nó ngay bây giờ trên CSS-Tricks và nó giúp ích rất nhiều cho công việc này. Tôi nên đề cập rằng tôi là một khách hàng Cloudinary trả tiền, và screencast này không được tài trợ, nhưng Cloudinary đã tài trợ CSS-Tricks dưới dạng hai bài đăng được tài trợ có liên quan cao:
- Hình ảnh đáp ứng trong WordPress với Cloudinary, Phần 1
- Hình ảnh đáp ứng trong WordPress với Cloudinary, Phần 2
Tóm lại, đây là cách tất cả hoạt động trên CSS-Tricks hiện nay:
- Tôi tải lên hình ảnh giống như tôi thường làm với WordPress.
- Thay vì
srcsetthông tin được tạo bằng WordPress, nó được tạo bởi API thông minh hơn này. - Hình ảnh cũng được tải lên Cloudinary.
- Khi WordPress lọc và xuất HTML cho hình ảnh, tất cả dữ liệu tốt
srcset(và tùy chỉnhsizes) đó sẽ được áp dụng. URL trỏ đến các URL Cloudinary. - URL của Cloudinary tận dụng khả năng của Cloudinary để tự động điều chỉnh cả định dạng và chất lượng một cách tự động (sử dụng công nghệ ưa thích của họ) để đảm bảo mọi thứ là tốt nhất có thể cho trình duyệt cụ thể yêu cầu hình ảnh.
- Những hình ảnh cũ không được tải lên Cloudinary ban đầu vẫn được hưởng lợi từ tất cả những điều tốt đẹp của Cloudinary. Họ không có
srcsetdữ liệu thông minh , nhưng họ vẫn sử dụng URL "tìm nạp" nghĩa là họ có thể hưởng lợi từ việc định dạng tự động và chất lượng tự động (dù sao thì đây có lẽ là một phần cải thiện hiệu suất đáng kể).
Nói tóm lại, tôi không chỉ sử dụng hình ảnh đáp ứng ở đây trên CSS-Tricks để giúp tăng hiệu suất, mà việc tích hợp Cloudinary còn nâng tầm trò chơi đó một cách nghiêm túc.
Tôi cũng rất vui vì đây không phải là một sự phụ thuộc khó. Nếu plugin Cloudinary bị tắt, mọi thứ sẽ trở lại hình ảnh đáp ứng WordPress bình thường.