Nhận xét của người trả lời khảo sát về các kỹ thuật tối ưu hoá hình ảnh khác nhau
Bài đăng này liệt kê các ý kiến phản hồi dạng tự do mà Google Web DevRel nhận được trong cuộc khảo sát về kỹ thuật tối ưu hoá hình ảnh vào mùa hè năm 2019. Chúng tôi thu thập câu trả lời thông qua Kiến thức cơ bản về web và @ChromiumDev. Động lực của cuộc khảo sát là tìm hiểu lý do hầu hết các trang web không làm theo các phương pháp hay nhất để tối ưu hoá hình ảnh, mặc dù chúng có vẻ là một cách tương đối dễ để cải thiện hiệu suất. Dữ liệu phản hồi không được liệt kê ở đây vì có sai sót trong phương pháp khảo sát.
Đối tượng người xem
- Nếu là một nhà phát triển web, bạn có thể thấy bài đăng này hữu ích cho việc khám phá các kỹ thuật tối ưu hoá hình ảnh mới, hoặc thông tin chi tiết về cách những nhà phát triển web khác đã giải quyết vấn đề mà bạn đang gặp phải, cũng như chi phí, lợi ích và hạn chế của mỗi kỹ thuật.
- Nếu bạn là một nhà cung cấp dịch vụ hình ảnh hoặc CDN cho hình ảnh, bài đăng này có thể giúp bạn tìm ra cơ hội mới trên thị trường.
- Nếu bạn là khung, công cụ xây dựng hoặc nhà phát triển CMS, bài đăng này có thể cung cấp cho bạn ý tưởng về các tính năng mới để triển khai.
Bình luận
WebP
- "Tôi thích WebP nhưng chưa sẵn sàng hoàn toàn. Hơn nữa, WordPress của chúng tôi không hỗ trợ WebP. Một trong những ứng dụng chỉnh sửa ảnh phổ biến nhất là Photoshop cũng không hỗ trợ WebP ngay từ đầu. Vì vậy, chúng tôi không thể dựa vào các ứng dụng hoặc dịch vụ của bên thứ ba để nén hình ảnh."
- "Sử dụng WebP trên Safari".
- "Tôi rất thích sử dụng WebP nếu có thể xuất tệp từ Photoshop/Figma/Sketch và tất cả các trình duyệt đều hỗ trợ định dạng này." [Lưu ý: Sketch hỗ trợ WebP]
- "Giải pháp định dạng thế hệ mới sẽ rất hữu ích."
- "Đừng cố gắng đẩy WebP quá mạnh khi khả năng hỗ trợ trình duyệt kém và cân nhắc nhu cầu sử dụng định dạng PNG thay vì JPEG cho ảnh chụp màn hình".
- "Google Tài liệu không hỗ trợ WebP."
- "Chúng tôi chỉ sử dụng WebP, nhưng lo ngại về khả năng tương thích của trình duyệt."
- "Trước tiên, hãy sửa khả năng tương thích của trình duyệt rồi cập nhật trình duyệt cũ hoặc thêm bản sửa lỗi cũ, sau đó mọi người sẽ có xu hướng chuyển sang các loại hình ảnh mới như WebP..." hơn
- "Khuyến khích các nhà phát triển trình bổ trợ/giao diện cân nhắc việc hỗ trợ WebP và các loại hình ảnh thế hệ mới khác để những người không phải là nhà phát triển không cần phải lo lắng về vấn đề này."
SVG và hình ảnh vectơ
- "Nếu có thể, tôi đang sử dụng SVG (ảnh động). Hình ảnh gatsby đã khắc phục rất nhiều lỗi này. Nhưng khi tìm hiểu sâu hơn về những gì họ đã làm, sẽ không thực tế khi một trang web bình thường phải xây dựng điều gì đó như vậy để hình ảnh hoạt động đúng cách. Trình duyệt nên đảm nhận nhiều trách nhiệm này hơn".
- "Tôi có thể ghi lại cách tạo ảnh động SVG bằng lottie.js không?"
- "Chúng tôi luôn cố gắng sử dụng hình ảnh JPEG có độ phân giải lớn với kích thước nhỏ trên trang web của mình để tránh thời gian tải. Chúng tôi cũng đảm bảo sử dụng SVG khi cần thiết để cung cấp chất lượng cho thiết kế thích ứng."
- "Chúng tôi cố gắng sử dụng đồ hoạ vectơ tối ưu hoá cho tất cả trừ hình ảnh nếu có thể."
Các định dạng hình ảnh khác
- "Chúng tôi [cần] phổ biến hơn nữa để mọi người ngừng sử dụng GIF."
Tải từng phần
- "Hãy lưu ý đến người dùng khi xem xét các tính năng như tải từng phần, vì nhiều tính năng như vậy thật khó chịu".
- "Làm cho thuộc tính tải từng phần hoạt động với hình nền."
- "Khung hình sẽ xử lý thành phần hiệu quả hơn ngay từ đầu."
- "Chúng tôi đã chuyển đổi từ tính năng tải từng phần từ lâu. Người dùng báo cáo hàng triệu hình ảnh và trang web "KHÔNG TẢI". Nhóm của chúng tôi đã tóm tắt nội dung đó một cách dễ dàng. Những người dùng không có chuyên môn kỹ thuật sẽ thấy khó mô tả vấn đề."
- "Tôi muốn hiểu rõ hơn về cách sử dụng API Intersection Observer cho quá trình tải từng phần thay vì sử dụng các kỹ thuật truyền thống."
- "Cách này hiệu quả với tôi: pwafire.org/developer/codelabs/progressive-loading."
Hình nền
- "Tôi thường tải hình ảnh dưới dạng hình nền trong CSS."
- "Thẻ
<img>
có vấn đề và khó kiểm soát các chi tiết nhỏ, đặc biệt là với nội dung do người dùng gửi. Chúng tôi sử dụng<div>
và định kiểu hình nền thường xuyên hơn nhiều vì nó cho phép chúng tôi sử dụng kích thước nền, vị trí nền và ngăn việc lưu hình ảnh bằng nhấp chuột phải."
Sự minh bạch
- "Năm 2019. Làm thế nào JPG vẫn có độ trong suốt alpha?"
- "Tôi thực sự chỉ sử dụng tệp PNG cho ảnh khi tôi cần có nền trong suốt."
Phần giữ chỗ hình ảnh chất lượng thấp (LQIP)
- "Chúng tôi sử dụng LQIPS và đó là một kỹ thuật hay để thu hút khách truy cập mà không cần tải sớm hình ảnh chất lượng cao."
Hiệu suất
- "Gần đây, chúng tôi đã gặp vấn đề về hiệu suất với hình ảnh. Khi người dùng cuộn xuống trên trang web của chúng tôi, chúng tôi sẽ hiển thị 60 thẻ tiếp theo bao gồm một hình thu nhỏ. Do giới hạn 6 kết nối trên cùng một miền, hình thu nhỏ đã bị chặn cũng như yêu cầu AJAX tiếp theo để nhận 60 thẻ tiếp theo nếu người dùng tiếp tục cuộn xuống".
- "Chúng tôi muốn sử dụng HTTP/2 nhưng hầu hết khách hàng của chúng tôi lại sử dụng IE11! Do đó, chúng tôi đang khám phá việc phân đoạn / tải dữ liệu JSON AJAX từ một miền khác".
Kích thước
- "Rất tiếc vì giá trị nội tại; việc tận dụng chiều cao/chiều rộng có vẻ tốt hơn đối với tôi."
- "Đang tìm cách tạo ít kích thước hơn, nhưng hiện tại là khoảng 12 kích thước."
- "Đổi kích thước hình ảnh một cách linh hoạt thực sự khó và không thể thực hiện được nếu không có JS."
- "Một công cụ như responsivebreakpoints.com rất hữu ích cho web.dev :)."
Hình ảnh có chất lượng và độ phân giải cao
- "Làm cách nào để tải hình ảnh nén xuống mà không làm giảm chất lượng DPI?"
- "Chúng tôi là một công ty quản lý tài liệu. Các ứng dụng của chúng tôi xử lý hàng TRIỆU hình ảnh được quét có độ phân giải cao, thường là TIFF hoặc PDF."
- "Việc này phức tạp. Cần có tệp hình ảnh có độ phân giải cao cho định dạng in; phải được tối ưu hóa cho web. Việc giảm kích thước hình ảnh cho web là một vấn đề phức tạp nhưng sẽ là một cản trở lớn nếu tác giả chỉ cung cấp các tệp nhẹ cho những hình ảnh dành cho ấn phẩm in. Chúng tôi từng thông điệp hỗn hợp về các yêu cầu đối với việc gửi bản thảo có hình minh hoạ. Sau đó, chúng tôi kết thúc bằng các quy trình công việc phức tạp để xử lý những tài liệu đó."
Chức năng của trình duyệt
- "Cắt src tự động thích ứng khỏi trình duyệt vì tính năng [tích hợp] sẽ rất hữu ích vì mất thời gian để cắt tất cả hình ảnh thành 4 kích thước và viết tất cả mã đánh dấu. Nếu chúng tôi có thể tải một bức ảnh lớn lên và viết một thẻ ảnh đơn giản thì trình duyệt sẽ tự động tạo nhiều thuộc tính src. Đây là một tính năng hiệu quả."
- "Cá nhân tôi gặp khó khăn trong việc tránh chỉnh lại luồng khi hình ảnh được CSS đặt cho hình ảnh thích ứng (max-width: 100%; height auto hoặc height: width: 100%; height auto), đặc biệt là khi kết hợp với hướng nghệ thuật từ thẻ hình ảnh/hình ảnh thích ứng. Cách tốt nhất để tránh có vẻ là sử dụng "tấn công khoảng đệm âm" cho tỷ lệ hình ảnh cố định và sau đó đặt hình ảnh bên trong hộp tỷ lệ này. Việc hỗ trợ trình duyệt tốt hơn/xử lý hình ảnh thích ứng sẽ rất hữu ích!"
- "Vui lòng tắt tính năng "tự động phát" của GIF bằng cách chỉ tìm nạp khung hình đầu tiên."
CDN và dịch vụ hình ảnh
- "Google nên cung cấp một CDN miễn phí như Cloudflare."
- "Có lẽ việc sử dụng nhiều công cụ hơn để thiết lập quy mô động và mạng phân phối nội dung (CDN) với các nhà cung cấp khác nhau sẽ tốt hơn."
- "Một hình ảnh quá khổ chỉ là một giải pháp rất phù hợp mà không tốn thêm chi phí sản xuất. Bạn cần hình ảnh rộng khoảng 1000 pixel cho thiết bị di động (chiều rộng kết xuất 500px) và đó cũng là kích thước bạn cần cho các màn hình không phải dạng lưới lớn/máy tính để bàn. Tôi nghĩ rằng hình ảnh đổi kích thước CDN là một giải pháp rất tệ, mặc dù tôi đã từng sử dụng giải pháp này. CMS phải xử lý việc thay đổi kích thước và việc thiết lập đó quá phức tạp. Hiện tại, chỉ có một giải pháp là giải pháp hợp lý."
- "CloudFlare tự động điều chỉnh tỷ lệ hình ảnh cho phù hợp nhất với màn hình của người dùng. Vì vậy, chúng ta có thể tiết kiệm thời gian tải vì hình ảnh được tải so với màn hình của người dùng. Ví dụ: nếu người dùng đang sử dụng điện thoại, ứng dụng sẽ không tải trên nền có kích thước như máy tính để bàn".
- "Cloudflare thực hiện việc này trong nền mà chúng tôi không phải làm gì ngoài việc chọn một hộp trong bảng cài đặt."
- "Tôi xin nhắc lại, lý do duy nhất khiến tôi có thể sử dụng thành công srcset, v.v. là vì tính dễ sử dụng của Cloudinary. Nhưng Cloudinary thì tốn kém, thực sự rất nhanh. Điều này tạo cảm giác như một lỗ hổng lớn trong trải nghiệm phát triển."
- "Chúng tôi cần một cách giúp dễ dàng tự động cắt hình ảnh theo cách thông minh để chúng có thể hoạt động với nhiều tỷ lệ khung hình trong nhiều bối cảnh."
- "Tôi cũng sử dụng hình ảnh từ các nhà cung cấp khác như Unsplash, trong đó khả năng kiểm soát độ phân giải, chất lượng và độ nén rất thấp."
Hệ thống quản lý nội dung (CMS), nền tảng và khung
- "Tôi vẫn gặp khó khăn trong việc tìm ra cách tốt nhất để sử dụng hình ảnh khi tạo một trang web bằng CMS. Các tác giả có xu hướng định cấu hình hình ảnh có kích thước khác nhau và mong muốn hình ảnh không bị thu nhỏ hoặc điều chỉnh theo tỷ lệ. Tôi không chắc liệu có được đặt chiều rộng tối đa hay chiều cao tối đa cho hình ảnh không"
- "Đã sử dụng gatsby-image cho một số dự án vừa qua và chưa bao giờ nhìn lại."
- "Hình ảnh thường là phần khó khăn vì được người dùng cuối đưa vào CMS. Hình ảnh có thể sử dụng bất kỳ kích thước, định dạng nào, đôi khi không có hình ảnh gốc ở định dạng và kích thước hình ảnh lý tưởng".
- "Rất khó để duy trì hình ảnh vì hệ thống của chúng tôi khó có thể tự thêm các chế độ điều khiển, trừ phi hoạt động tự động diễn ra mà không ảnh hưởng đến độ phân giải. Ngoài ra, đối với chúng tôi, hình ảnh trên thiết bị di động trông không chính xác so với trên máy tính"
- "Tôi giúp mọi người tối ưu hoá trang web của họ (WordPress). Vấn đề lớn nhất tôi gặp phải đối với hình ảnh là: Cần phụ thuộc vào CDN hoặc trình bổ trợ để tạo WebP. srcset/picture phải được nhà phát triển giao diện viết mã đúng cách. Hầu hết các trình bổ trợ tải từng phần đều tải chậm, mang lại trải nghiệm người dùng kém. Hình nền khó tải từng phần".
Chi phí/lợi ích
- "Các phương pháp mới này tuy có hiệu quả nhưng làm tăng thời gian phát triển của trang web."
- "Việc không tuân thủ các tiêu chuẩn mới như srcset và WebP đã chậm rãi được nhiều công ty thuộc danh sách Fortune 500 áp dụng. Nhận thấy điều này, nhiều công ty đã cho rằng thay đổi này là một chi phí phát triển không cần thiết đối với các trang web hiện tại. Người dùng cuối (UX) không thảo luận hoặc báo cáo rộng rãi về mức tăng hiệu suất. Nếu có thì việc lưu hình ảnh từ web sẽ trở nên khó khăn hơn."
- "Chi phí tạo và quản lý nhiều kích thước, phiên bản".
- "Chúng chiếm rất nhiều dung lượng trên máy chủ của chúng tôi".
SEO
- "Rất khó để cân bằng giữa chất lượng ảnh chấp nhận được và kích thước tệp. Một mặt, tôi muốn tải nhanh vì lợi ích SEO, nhưng mặt khác, hình ảnh chất lượng kém sẽ gây ảnh hưởng xấu đến giao diện/trải nghiệm người dùng."
Vai trò của hình ảnh trên web
- "Có quá nhiều nội dung trên web. Ngừng sử dụng hình ảnh vô ích và không nâng cao nội dung văn bản."
- "Bạn có còn nhớ thời điểm web không có hình ảnh và chúng tôi chia sẻ ảnh chân dung tự chụp theo định dạng ASCII không?"
Công cụ, hướng dẫn, tiêu chuẩn và phương pháp hay nhất: trở ngại và yêu cầu
- [Một người tham gia đã viết bài đăng trên blog để trả lời khảo sát này]
- "Các yêu cầu có vẻ liên tục thay đổi. Là một nhà phát triển web, bạn vô cùng khó chịu vì phải mất thời gian để lưu hình ảnh ngay từ đầu. Chúng tôi tối ưu hoá hết sức có thể, kiểm tra trang web và nhiều tháng sau đó, Google quyết định rằng hình ảnh có thể được nén nhiều hơn hoặc cần ở một định dạng khác. Điều này ngăn cản chúng tôi cung cấp giải pháp lâu dài nhất có thể cho khách hàng và thay vào đó tạo ra nỗ lực tốn kém cho cả khách hàng và chúng tôi. Đơn giản là một số khách hàng là doanh nghiệp nhỏ không có ngân sách để chúng tôi tiếp tục sửa hình ảnh và lưu lại hình ảnh nhằm tuân thủ các yêu cầu. Chúng tôi không có ngân sách để thực hiện công việc này trong các gói quản lý của họ. Việc viết mã để gọi các kích thước hình ảnh khác nhau cho các thiết bị khác nhau cũng tốn thời gian. Thật tuyệt vời khi nghĩ ra một hệ thống lưu lại hình ảnh nhất quán trong một khoảng thời gian dài hơn."
- "Có, tôi nghĩ bạn đã nhận được thông báo "Giữ cho số lượng yêu cầu thấp và kích thước tệp nhỏ" đều không chính xác trong Lighthouse. Nếu một trang web phân phát qua HTTP1.x thì chắc chắn, nhưng nếu một trang web phân phát qua HTTP2 thì số lượng yêu cầu sẽ ít quan trọng hoặc thậm chí không phải là vấn đề nếu bắt nguồn từ cùng một tên máy chủ. Tôi có một trang web rút gọn, nhưng tôi tải 30 tệp WebP nhỏ với tổng số khoảng 35 yêu cầu, qua HTTP2 trên cùng một tên máy chủ. Lighthouse đang gắn cờ vấn đề này là vấn đề "Giữ yêu cầu có số lượng thấp và kích thước tệp nhỏ" trong khi vấn đề này cực nhanh và do HTTP2 trên cùng một tên máy chủ nên số lượng yêu cầu không phải là vấn đề. Và có, các tệp đã nhỏ (hầu hết từ 1 KB đến 2 KB trở xuống). Tôi có thể tải một sprite nhưng sau đó cần phải tính toán thêm CSS. Vì vậy, vui lòng cập nhật báo cáo "Duy trì số lượng yêu cầu thấp và có kích thước tệp nhỏ" trong Lighthouse để xem xét HTTP2 trên cùng một tên máy chủ".
- "Mọi người đã gặp khó khăn khi cố gắng nén hình ảnh."
- "Hành vi trên nhiều trình duyệt vẫn không thể đoán trước được, vì vậy, các giải pháp đơn giản nhất thường là an toàn nhất."