Phản hồi từ khảo sát tối ưu hóa hình ảnh mùa hè năm 2019

Nhận xét của những 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

[Tên người]

Bài đăng này liệt kê ý 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 Mùa hè năm 2019. Câu trả lời được thu thập thông qua trang Kiến thức cơ bản về web và @ChromiumDev. Động lực của cuộc khảo sát là nhằm tìm ra lý do tại sao hầu hết các trang web không tuân theo các phương pháp hay nhất về tối ưu hoá hình ảnh, mặc dù các phương pháp này có vẻ là một cách tương đối dễ dàng để cải thiện hiệu suất. Dữ liệu phản hồi không được liệt kê ở đây vì có lỗi 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ể sẽ thấy bài đăng này hữu ích trong 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 các 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à nhà cung cấp dịch vụ hình ảnh hoặc nhà cung cấp CDN hình ảnh, bài đăng này có thể giúp bạn tìm thấy cơ hội mới trên thị trường.
  • Nếu bạn là một nhà phát triển khung, công cụ xây dựng hoặc nhà phát triển CMS, bài đăng này có thể gợi ý cho bạn về các tính năng mới mà bạn nên triển khai.

Nhận xét

WebP

  • "Tôi thích WebP nhưng nó chưa hoàn toàn sẵn sàng. Hơn nữa, WordPress của chúng tôi không hỗ trợ WebP. Photoshop là một trong những ứng dụng chỉnh sửa ảnh phổ biến nhất 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".
  • "Giúp WebP có thể sử dụng trên Safari".
  • "Tôi rất thích sử dụng WebP nếu tôi có thể xuất chúng từ Photoshop/Figma/Sketch và tất cả các trình duyệt đều hỗ trợ WebP." [Lưu ý: Sketch có hỗ trợ WebP]
  • "Giải pháp định dạng thế hệ mới sẽ rất phù hợp."
  • "Hãy ngừng đẩy WebP quá mạnh khi trình duyệt hỗ trợ kém và cân nhắc nhu cầu dùng PNG thay vì JPEG để chụp ảnh màn hình".
  • "Google Tài liệu không hỗ trợ WebP."
  • "Chúng tôi sẽ chỉ sử dụng WebP, nhưng lại lo ngại về khả năng tương thích của trình duyệt."
  • "Trước tiên, hãy khắc phục 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 sử dụng các loại hình ảnh mới như WebP..."
  • "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ợ cho WebP và các loại hình ảnh thế hệ mới khác để các nhà phát triển không cần phải sử dụng chức năng này."

Ảnh SVG và ảnh vectơ

  • "Nếu có thể, tôi đang sử dụng SVG (ảnh động). gatsby-image đã khắc phục rất nhiều vấn đề này. Nhưng khi bạn tìm hiểu sâu về những gì họ đã làm, sẽ là hoàn toàn không thực tế rằng một trang web bình thường nên phải xây dựng một cái gì đó như vậy để hình ảnh hoạt động đúng cách. Trình duyệt phải thực hiện nhiều trách nhiệm này hơn".
  • "Bạn 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 thấp trong 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ơ được tối ưu hoá cho tất cả trừ ảnh nếu có thể."

Các định dạng hình ảnh khác

  • "Chúng tôi [cần] giáo dục mọi người tốt hơn về việc ngừng sử dụng ảnh GIF."

Tải từng phần

  • "Hãy lưu ý đến người dùng khi cân nhắc các tính năng như tải từng phần, vì nhiều tính năng này rấ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."
  • "Bộ khung phải xử lý thành phần tốt hơn ngay từ đầu."
  • "Chúng tôi đã chuyển đổi từ phương thức tải từng phần từ lâu rồi. Người dùng báo cáo về hàng triệu hình ảnh và trang web là "KHÔNG TẢI". Nhóm chúng tôi đã tóm tắt nội dung này. Những người dùng không có chuyên môn kỹ thuật sẽ khó có thể mô tả vấn đề."
  • "Tôi muốn hiểu rõ hơn về cách sử dụng Intersection Observer API để 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ả đối với tôi: pwafire.org/developer/codelabs/progressive-loading."

Hình nền

  • "Tôi thường tải hình ảnh làm hình nền trong CSS."
  • "Thẻ <img> có vấn đề và khó kiểm soát thông tin chi tiết, đặ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 vì điều này 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 cách nhấp chuột phải."

Sự minh bạch

  • "Năm 2019. Làm cách nào để JPG không có độ trong suốt alpha?"
  • "Tôi chỉ thực sự sử dụng PNG cho ảnh khi tôi cần nền trong suốt."

Phần giữ chỗ cho 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 tuyệt vời để thu hút khách truy cập mà không cần tải hình ảnh chất lượng cao quá sớm."

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, chúng tôi sẽ hiển thị 60 thẻ tiếp theo có hình thu nhỏ. Do giới hạn kết nối là 6 trên cùng một miền, nên hình thu nhỏ đã bị chặn cũng như khi người dùng tiếp tục cuộn xuống để yêu cầu xem 60 thẻ tiếp theo."
  • "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 sử dụng IE11! Do đó, chúng tôi đang khám phá việc phân đoạn miền / tải các yêu cầu dữ liệu JSON AJAX ra khỏi một miền khác."

Kích thước

  • "Rất tiếc về kích thước hàm 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 ra ít kích thước hơn, nhưng hiện tại là khoảng 12 kích thước."
  • "Việ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 phù hợp với web.dev :)."

Hình ảnh chất lượng cao và có độ phân giải cao

  • "Làm cách nào để tải hình ảnh ở dạng nén 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."
  • "Thật rắc rối. Bạn cần có tệp img có độ phân giải cao cho định dạng in; tệp này phải được tối ưu hoá cho web. Việc giảm kích thước hình ảnh cho web là một việc rắc rối nếu tác giả chỉ cung cấp tệp gọn nhẹ cho hình ảnh dành cho ấn phẩm in. Chúng tôi kết thúc việc đưa ra các 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ùng với hình minh hoạ. Sau đó, chúng tôi kết thúc quy trình làm việc phức tạp để xử lý những vật liệu đó."

Khả năng của trình duyệt

  • "Tự động cắt src từ trình duyệt dưới dạng tính năng [tích hợp] sẽ rất hữu ích vì sẽ mất thời gian để cắt tất cả hình ảnh thành 4 cỡ và viết tất cả đánh dấu. Nếu chúng tôi có thể tải lên một bức ảnh 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à tính năng nổi trội của ứng dụng".
  • "Cá nhân tôi gặp khó khăn khi tránh chỉnh lại trang 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 dường như 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 vào bên trong hộp tỷ lệ này. Hỗ trợ trình duyệt tốt hơn/xử lý hình ảnh đáp ứng sẽ thực sự hữu ích!"
  • "Vui lòng tắt tính năng "tự động phát" GIF bằng cách chỉ tìm nạp khung hình đầu tiên".

Dịch vụ hình ảnh và mạng phân phối nội dung (CDN)

  • "Google nên cung cấp một CDN miễn phí như Cloudflare."
  • "Có lẽ nhiều công cụ hơn để thiết lập quy mô động và CDN với các nhà cung cấp khác nhau sẽ tốt."
  • "Một hình ảnh nén quá khổ là một giải pháp rất phù hợp mà không mất 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 màn hình lớn/không phải retina trên máy tính. Tôi nghĩ rằng việc đổi kích thước hình ảnh CDN là một giải pháp rất kém, 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à quá trình đó quá phức tạp để thiết lập, nên một giải pháp duy nhất là một giải pháp tốt (hiện tại)."
  • "CloudFlare tự động điều chỉnh tỷ lệ hình ảnh của chúng tôi để 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 tương ứng 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, điện thoại sẽ không tải trên nền có kích thước máy tính."
  • "Cloudflare thực hiện việc này ở chế độ nền mà chúng tôi không cần phải làm gì khác ngoại trừ đánh dấu vào một hộp trong bảng điều khiển cài đặt."
  • "Xin nhắc lại, lý do duy nhất tôi có thể sử dụng thành công srcset, v.v. là do tính dễ sử dụng của Cloudinary. Nhưng Cloudinary trở nên tốn kém, thực sự rất nhanh. Điều này có vẻ như là một lỗ hổng lớn trong quá trình phát triển."
  • "Chúng tôi cần một cách để dễ dàng tự động cắt hình ảnh theo cách thông minh để chúng có thể tương thích với nhiều tỷ lệ khung hình trong nhiều ngữ cảnh".
  • "Tôi cũng sử dụng hình ảnh của các nhà cung cấp khác như Unsplash, trong đó kiểm soát rất ít về độ phân giải, chất lượng và nén."

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ôi xây dựng một trang web bằng CMS. Tác giả có xu hướng định cấu hình hình ảnh với nhiều kích thước và mong muốn hình ảnh không bị thu nhỏ hoặc giảm tỷ lệ. Tôi không chắc có thể đặt chiều rộng tối đa hoặc chiều cao tối đa cho hình ảnh không"
  • "Tôi đã sử dụng hình ảnh của gatsby cho một số dự án gần đây và chưa bao giờ nhìn lại."
  • "Hình ảnh thường là phần khó khăn khi chúng được người dùng cuối đưa vào CMS, họ có thể sử dụng bất kỳ kích thước, định dạng nào, đôi khi là hình ảnh gốc ở định dạng hình ảnh lý tưởng và kích thước không có sẵn."
  • "Rất khó để duy trì hình ảnh vì hệ thống của chúng tôi là tự phục vụ và việc thêm các biện pháp kiểm soát rất khó khăn trừ phi mọi thứ 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 mà tôi gặp về hình ảnh là: Cần phụ thuộc vào CDN hoặc plugin để tạo WebP. srcset/picture phải được mã hóa đúng cách bởi các nhà phát triển giao diện. Hầu hết các trình bổ trợ tải từng phần đều tải chậm, dẫn đến 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 có hiệu quả nhưng lại làm tăng thời gian phát triển của các trang web".
  • "Việc không tuân thủ các tiêu chuẩn mới như srcset và WebP đã chậm được áp dụng bởi nhiều công ty trong danh sách Fortune 500. Nhìn thấy điều này, nhiều công ty đã chống lại sự thay đổi này như một chi phí phát triển không cần thiết cho 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. Việc này có thể khiến việc lưu hình ảnh trên mạng trở nên khó khăn hơn một chút."
  • "Tốn kém khi tạo và quản lý nhiều kích thước và phiên bản".
  • "Chúng chiếm rất nhiều không gian 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 có thể chấp nhận và kích thước tệp. Một mặt, tôi muốn tải nhanh để có lợi ích về SEO, nhưng mặt khác, hình ảnh chất lượng kém sẽ làm giảm tác dụng của 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 thứ trên web. Hãy 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 ta chia sẻ ảnh chân dung tự chụp dưới dạng hình nghệ thuật ASCII không?"

Công cụ, hướng dẫn, tiêu chuẩn và phương pháp hay nhất: vấn đề thất vọng 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 dường như thay đổi liên tục. Là một nhà phát triển web, bạn rất khó chịu vì phải tốn 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 nữa hoặc cần phải ở 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 tốt nhất có thể cho khách hàng, thay vào đó là một nỗ lực tốn kém cho họ và chúng tôi. Một số khách hàng là doanh nghiệp nhỏ của chúng tôi đơn giản là không có ngân sách để tiếp tục chỉnh sửa hình ảnh và lưu lại 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 nhiều kích thước hình ảnh cho các thiết bị khác nhau cũng tốn nhiều thời gian. Thật tuyệt nếu xây dựng được một hệ thống lưu hình ảnh nhất quán trong thời gian dài hơn".
  • "Có, tôi nghĩ rằng bạn đã nhận được lỗi "Duy trì số lượng yêu cầu thấp và kích thước tệp nhỏ" 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 không 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 đơn giản, nhưng tôi tải 30 tệp WebP nhỏ (tổng cộng 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ữ số lượng yêu cầu thấp và kích thước tệp nhỏ" trong khi đó là vấn đề siêu 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 đề. Đồng thời, các tệp đều đã nhỏ (hầu hết là từ 1 KB đến 2 KB trở xuống). Tôi có thể tải một sprite nhưng cần thực hiện thêm nhiều phép tính CSS. Vì vậy, vui lòng cập nhật báo cáo "Giữ cho số lượng yêu cầu ở mức thấp và kích thước tệp nhỏ" trong Lighthouse để tính đến HTTP2 trên cùng một tên máy chủ."
  • "Người dùng đã gặp khó khăn trong việc nhớ nén hình ảnh của họ."
  • "Hành vi trên nhiều trình duyệt vẫn không thể dự đoán được, do đó, giải pháp đơn giản nhất thường là an toàn nhất."