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

Ý kiến của người trả lời cuộc khảo sát về nhiều kỹ thuật tối ưu hoá hình ảnh

Sam Dutton

Bài đăng này liệt kê ý kiến phản hồi tự do mà Google Web DevRel nhận được trong bản 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 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ề việc tối ưu hoá hình ảnh mặc dù đó 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

  • Nếu là nhà phát triển web, bạn có thể thấy bài đăng này hữu ích để 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 từng kỹ thuật.
  • Nếu bạn là nhà cung cấp dịch vụ hình ảnh hoặc CDN hình ảnh, bài đăng này có thể giúp bạn tìm thấy các cơ hội mới trên thị trường.
  • Nếu bạn là nhà phát triển khung, công cụ xây dựng hoặc 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 cần triển khai.

Bình luận

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. Một trong những ứng dụng chỉnh sửa ảnh phổ biến nhất, 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ụ bên thứ ba để nén hình ảnh".
  • "Cho phép sử dụng WebP trên Safari".
  • "Tôi rất muốn sử dụng WebP nếu có thể xuất các tệp đó từ Photoshop/Figma/Sketch và tất 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 tuyệt."
  • "Ngừng đẩy mạnh WebP khi trình duyệt hỗ trợ kém và cân nhắc việc sử 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 muốn sử dụng riê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 khắc phục khả năng tương thích của trình duyệt và cập nhật trình duyệt cũ hoặc thêm các 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 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 nhà phát triển không cần phải loay hoay với loại hình ảnh này".

SVG và hình ảnh vectơ

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

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

  • "Chúng ta [cần] giáo dục mọi người tốt hơn để họ ngừng sử dụng ảnh GIF".

Tải từng phần

  • "Vui lòng cân nhắc người dùng khi xem xét các tính năng như tải lười, vì nhiều người dùng thấy tính năng này gây phiền toái".
  • "Vui lòng làm cho thuộc tính tải lười hoạt động với background-image."
  • "Khung phải xử lý tài sản tốt hơn ngay từ đầu."
  • "Chúng tôi đã chuyển đổi từ tính năng tải lười 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". Đó là những gì nhóm của chúng tôi tóm tắt. Người dùng không chuyên về kỹ thuật khó có thể mô tả vấn đề".
  • "Tôi muốn hiểu rõ hơn về cách sử dụng API Intersection Observer để tải lười thay vì sử dụng các kỹ thuật truyền thống".
  • "Tôi thấy cách này hiệu quả: pwafire.org/developer/codelabs/progressive-loading."

Hình nền

  • "Tôi thường tải hình ảnh làm 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 ta sử dụng <div> và kiểu hình ảnh nền thường xuyên hơn nhiều vì nó cho phép chúng ta sử dụng background-size, background-position và ngăn việc lưu hình ảnh bằng cách nhấp chuột phải."

Sự minh bạch

  • "Đã là năm 2019. Làm cách nào để tệp JPG vẫn không có độ trong suốt alpha?"
  • "Tôi chỉ thực sự sử dụng tệp PNG cho ảnh chụp khi cần 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à đây là một kỹ thuật tuyệt vời để giữ chân khách truy cập mà không cần tải hình ảnh chất lượng cao ngay từ đầu".

Hiệu suất

  • "Gần đây, chúng tôi đã gặp vấn đề về hiệu suất đối với hình ảnh. Khi người dùng cuộn xuống trang web của chúng tôi, chúng tôi sẽ hiển thị 60 thẻ tiếp theo, trong đó có 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ỏ cũng như yêu cầu AJAX tiếp theo để lấy 60 thẻ tiếp theo sẽ bị chặn nếu người dùng tiếp tục cuộn xuống."
  • "Chúng tôi rất muốn sử dụng HTTP/2 nhưng hầu hết khách hàng của chúng tôi đều sử dụng IE11! Do đó, chúng tôi đang tìm hiểu việc phân đoạn miền / tải các yêu cầu dữ liệu JSON AJAX từ một miền khác."

Kích thước

  • "Tôi xin lỗi về kích thước nội tại; việc tận dụng chiều cao/chiều rộng có vẻ tốt hơn."
  • "Tìm cách tạo ít kích thước hơn, hiện tại là ~12."
  • "Thật khó và không thể đổi kích thước hình ảnh một cách linh động 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 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. Ứng dụng của chúng tôi xử lý hàng TRIỆU hình ảnh được quét ở độ phân giải cao, thường là TIFF hoặc PDF".
  • "Rất phiền phức. 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 hoá cho web. Việc giảm kích thước hình ảnh cho web là một công việc rắc rối, nhưng sẽ là một trở ngại nếu tác giả chỉ cung cấp tệp có dung lượng nhỏ cho hình ảnh dành cho ấn bản in. Chúng tôi đã gửi thông tin không rõ ràng 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 ta sẽ kết thúc bằng các quy trình làm việc phức tạp để xử lý những tài liệu đó".

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

  • "Tính năng tự động cắt src thích ứng từ trình duyệt dưới dạng [tích hợp] sẽ rất hữu ích vì mất nhiều thời gian để cắt tất cả hình ảnh thành 4 kích thước và viết tất cả các mã đánh dấu. Nếu chúng ta có thể tải một bức ảnh lớn lên và viết một thẻ hình ảnh đơn giản, thì trình duyệt sẽ tự động tạo nhiều thuộc tính src. Đây sẽ là một tính năng hiệu quả."
  • "Cá nhân tôi đang gặp khó khăn trong việc tránh tình trạng luồng lại trang khi hình ảnh được CSS đặt cho hình ảnh thích ứng (max-width: 100%; height auto or 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 điều này có vẻ là sử dụng "mẹo khoảng đệm âm" cho tỷ lệ hình ảnh cố định, 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 ảnh GIF bằng cách chỉ tìm nạp khung đầ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ẽ cần có thêm công cụ để thiết lập tính năng mở rộng động và CDN với nhiều nhà cung cấp."
  • "Một hình ảnh quá khổ được nén quá mức là một giải pháp rất hiệu quả mà không tốn thêm chi phí sản xuất. Bạn cần hình ảnh có chiều rộng khoảng 1.000 pixel cho thiết bị di động (chiều rộng kết xuất 500 pixel) và đó cũng là kích thước bạn cần cho màn hình lớn/máy tính không phải màn hình Retina. Tôi nghĩ rằng CDN đổi kích thước hình ảnh 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 sẽ xử lý việc đổi kích thước và việc này quá phức tạp để thiết lập, một giải pháp duy nhất là một giải pháp thỏa hiệ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 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 tương ứng với màn hình của người dùng. Ví dụ: nếu người dùng đang dùng điện thoại, thì hình nền sẽ không tải ở kích thước dành cho 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 làm gì cả, ngoại trừ việc đánh dấu vào một hộp trong bảng cài đặt của chúng tôi".
  • "Chỉ cần nhắc lại, lý do duy nhất tôi có thể sử dụng thành công srcset, v.v. là nhờ sự dễ dàng của Cloudinary. Nhưng Cloudinary sẽ trở nên đắt đỏ, thực sự nhanh chóng. Đây có vẻ như là 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 dễ dàng để tự động cắt hình ảnh một cách thông minh để hình ảnh có thể hoạt động 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, nơi có rất ít quyền kiểm soát độ 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 xây dựng trang web bằng một CMS. Tác giả thường định cấu hình hình ảnh theo nhiều kích thước 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ó thể đặt max-width hoặc max-height trên hình ảnh hay không"
  • "Đã sử dụng gatsby-image cho một số dự án gần đây và chưa bao giờ hối hận."
  • "Hình ảnh thường là phần khó khăn vì người dùng cuối đưa hình ảnh vào CMS, họ có thể sử dụng kích thước, định dạng bất kỳ, đô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 là hệ thống tự phục vụ, nên việc thêm các chế độ kiểm soát là rất khó, trừ phi mọi thứ diễn ra tự động mà không ảnh hưởng đến độ phân giải. Ngoài ra, hình ảnh trên thiết bị di động không giống với hình ảnh trên máy tính"
  • "Tôi giúp mọi người tối ưu hoá trang web của họ (WordPress). Những vấn đề lớn nhất mà tôi thấy đối với hình ảnh là: Cần phụ thuộc vào CDN hoặc trình bổ trợ để tạo WebP. Nhà phát triển giao diện phải mã hoá đúng cách srcset/picture. Hầu hết các trình bổ trợ tải từng phần đều tải chậm, gây ra trải nghiệm người dùng không tốt. 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 rất hiệu quả nhưng làm tăng thời gian phát triển trang web".
  • "Nhiều công ty trong danh sách Fortune 500 vẫn chưa áp dụng các tiêu chuẩn mới như srcset và WebP. Nhận thấy điều này, nhiều công ty đã phản đối việc thay đổi vì 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 rộng rãi hoặc báo cáo về mức tăng hiệu suất. Nếu có gì thì việc này sẽ khiến bạn khó lưu hình ảnh trên web hơn một chút".
  • "Mất nhiều chi phí để tạo và quản lý nhiều kích thước, phiên bản".
  • "Chúng chiếm nhiều dung lượng trên máy chủ của chúng tôi."

SEO

  • "Khó cân bằng giữa chất lượng hình ảnh chấp nhận được và kích thước tệp. Một mặt, tôi muốn tải nhanh để có lợi cho SEO, nhưng mặt khác, hình ảnh chất lượng kém sẽ làm giảm trải nghiệm người dùng/giao diện người dùng".

Vai trò của hình ảnh trên web

  • "Có quá nhiều trên web. Ngừng sử dụng hình ảnh vô dụng không làm nổi bật nội dung viết."
  • "Bạn có còn nhớ thời điểm web không có hình ảnh và chúng ta chia sẻ ảnh tự chụp dưới dạng ASCII-art không?"

Công cụ, hướng dẫn, tiêu chuẩn và phương pháp hay nhất: sự thất vọng và yêu cầu

  • [Một người tham gia đã viết một bài đăng trên blog để phản hồi cuộc khảo sát này]
  • "Các yêu cầu có vẻ như liên tục thay đổi. Là một nhà phát triển web, điều này cực kỳ khó chịu vì ngay từ đầu, bạn đã mất nhiều thời gian để lưu hình ảnh. Chúng tôi tối ưu hoá hết mức có thể, kiểm tra trang web và sau đó vài tháng, 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 ở định dạng khác. Điều này khiến chúng tôi không thể cung cấp giải pháp tốt nhất có thể cho khách hàng và khiến cả chúng tôi và khách hàng phải tốn kém. Một số khách hàng là doanh nghiệp nhỏ của chúng tôi 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 để 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ị cũng tốn thời gian. Sẽ rất tuyệt nếu bạn có thể tạo ra một hệ thống lưu 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 đã hiểu sai về chỉ số "Giảm số lượng yêu cầu và chuyển những tài nguyên có kích thước 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 sẽ ít quan trọng hơn 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 gọn nhẹ, nhưng tôi tải 30 tệp WebP nhỏ với 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à "Giảm số lượng yêu cầu và kích thước tệp", trong khi tốc độ tải lại rất 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à đúng là các tệp này đã có kích thước 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 "Giảm số lượng yêu cầu và chuyển những tài nguyên có kích thước nhỏ" trong Lighthouse để tính đến HTTP2 trên cùng một tên máy chủ."
  • "Mọi người thường gặp khó khăn khi nhớ phải nén hình ảnh".
  • "Hành vi trên nhiều trình duyệt vẫn khó dự đoán, vì vậy, các giải pháp đơn giản nhất thường là an toàn nhất".