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 tham gia 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 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 ý kiến phản hồ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ề tối ưu hoá hình ảnh, mặc dù đâ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ó sai sót 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 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 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, thì bài đăng này có thể giúp bạn tìm thấy các cơ hội thị trường mới.
  • Nếu bạn là nhà phát triển khung, công cụ xây dựng hoặc CMS, thì 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 định dạng này 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, 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ụ bên thứ ba để nén hình ảnh."
  • "Làm cho WebP có thể sử dụng được trên Safari".
  • "Tôi rất muốn sử dụng WebP nếu có thể xuất chúng từ Photoshop/Figma/Sketch và tất cả trình duyệt đều hỗ trợ." [Lưu ý: Sketch có hỗ trợ WebP]
  • "Giải pháp định dạng thế hệ tiếp theo sẽ rất tuyệt vời."
  • "Đừng quá chú trọng vào WebP khi trình duyệt chưa hỗ trợ tốt, và hãy cân nhắc việc 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ỉ muốn 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 khắc phục khả năng tương thích của trình duyệt và cập nhật các 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ệ tiếp theo khác để những người không phải là nhà phát triển không cần phải bận tâm về vấn đề này.

Hình ảnh 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. Nhưng khi tìm hiểu kỹ 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 hệ thống 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 hơ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à 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 để mang lại chất lượng cho thiết kế đáp ứ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 ta [cần] hướng dẫn mọi người rõ hơn để họ ngừng sử dụng GIF."

Tải chậm

  • Vui lòng lưu ý đến người dùng khi cân nhắc các tính năng như tải chậm, vì nhiều người dùng cảm thấy phiền khi gặp tính năng này.
  • Vui lòng làm cho thuộc tính tải chậm hoạt động với hình nền.
  • "Khung nên xử lý thành phần tốt hơn ngay từ đầu."
  • Chúng tôi đã chuyển đổi từ tính năng tải chậm từ lâu. Người dùng báo cáo rằng hàng triệu hình ảnh và trang web "KHÔNG TẢI ĐƯỢC". Đó là thông tin mà nhóm chúng tôi tóm tắt được. Người dùng không có chuyên môn kỹ thuật sẽ khó mô tả vấn đề."
  • Tôi muốn hiểu rõ hơn về việc sử dụng API Intersection Observer để tải chậm thay vì sử dụng các kỹ thuật truyền thống.
  • "Trang web này rất phù hợp 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 nền trong CSS."
  • "Thẻ <img> có vấn đề và khó kiểm soát các chi tiết cụ thể, đặc biệt là với nội dung do người dùng gửi. Chúng tôi sử dụng kiểu <div> và hình nền thường xuyên hơn vì kiể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 nay là năm 2019. Tại sao tệp JPG vẫn không có độ trong suốt alpha?"
  • "Tôi chỉ dùng PNG cho ảnh 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 để thu hút khách truy cập mà không cần tải hình ảnh chất lượng cao từ sớm."

Hiệu suất

  • "Gần đây, chúng tôi gặp phải một vấn đề về hiệu suất liên quan đến hình ảnh. Khi người dùng di chuyể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 cả hình thu nhỏ. Do giới hạn 6 kết nối trên cùng một miền, nê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 di chuyể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 về 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

  • "Xin lỗi vì đã dùng intrinsicsize; tôi thấy việc tận dụng chiều cao/chiều rộng có vẻ tốt hơn."
  • "Tôi đang tìm cách tạo ít kích thước hơn, hiện tại là khoảng 12."
  • "Việc đổi kích thước hình ảnh một cách linh động là rất 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 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. Ứng dụng của chúng tôi xử lý HÀNG TRIỆU hình ảnh quét có độ phân giải cao, thường là TIFF hoặc PDF."
  • "Thật phiền phức. Tệp hình ảnh có độ phân giải cao là cần thiết 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 việc rắc rối, nhưng sẽ là một trở ngại lớn nếu tác giả chỉ cung cấp tệp có kích thước nhỏ cho hình ảnh dùng để xuất bản trên báo in. Chúng tôi đưa ra những thông tin không nhất quán 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 phải xử lý các quy trình công 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 ảnh thích ứng từ trình duyệt dưới dạng tính năng [tích hợp sẵn] sẽ rất hữu ích vì việc 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 sẽ tốn nhiều thời gian. Nếu chúng ta có thể tải một ảnh lớn lên và viết một thẻ ảnh đơn giản để trình duyệt tự động tạo nhiều thuộc tính src, thì đó sẽ là một tính năng tuyệt vời."
  • "Cá nhân tôi đang gặp khó khăn trong việc tránh hiện tượng dàn lại trang khi chiều rộng hình ảnh được đặt bằng CSS cho hình ảnh thích ứng (chiều rộng tối đa: 100%; chiều cao tự động hoặc chiều cao: chiều rộng: 100%; chiều cao tự động), đặ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 vấn đề này là sử dụng "mẹo khoảng đệm âm" cho tỷ lệ hình ảnh cố định, sau đó đặt hình ảnh vào bên trong hộp tỷ lệ này. Nếu trình duyệt hỗ trợ tốt hơn/xử lý hình ảnh thích ứng thì sẽ giúp ích rất nhiều!"
  • "Vui lòng tắt tính năng "tự động phát" ảnh 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ẽ nên có thêm công cụ để thiết lập quy mô linh hoạt và CDN với nhiều nhà cung cấp."
  • "Một hình ảnh nén quá mức có kích thước quá lớn 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 có chiều rộng khoảng 1.000 pixel cho thiết bị di động (chiều rộng hiển thị 500 pixel) và đó cũng là kích thước bạn cần cho màn hình lớn/màn hình không phải màn hình Retina của máy tính. 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 nên xử lý việc đổi kích thước và nếu việc đó quá phức tạp để thiết lập, thì một giải pháp duy nhất là một giải pháp phù hợp (vào lúc này)."
  • "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, thì nền có kích thước dành cho máy tính sẽ không tải."
  • "Cloudflare thực hiện việc này ở chế độ nền mà chúng tôi không cần làm gì ngoài việc đánh dấu vào một ô trong bảng cài đặt."
  • "Tôi xin nhắc lại rằng lý do duy nhất giúp tôi sử dụng thành công srcset, v.v. là nhờ sự tiện lợi của Cloudinary. Nhưng Cloudinary lại trở nên đắt đỏ rất nhanh. Điều nà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, nhờ đó hình ảnh có thể phù hợp 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 của các nhà cung cấp khác như Unsplash, nơi tôi có rất ít quyền kiểm soát đối với độ 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 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 điều chỉnh tỷ lệ. Tôi không chắc liệu có thể đặt chiều rộng tối đa hoặc chiều cao tối đa cho hình ảnh hay không"
  • "Tôi đã sử dụng gatsby-image cho một vài dự án gần đây và chưa bao giờ phải hối hận."
  • Hình ảnh thường là phần khó vì người dùng cuối đưa hình ảnh vào CMS, họ có thể sử dụng bất kỳ kích thước, định dạng hình ảnh nào, đôi khi không có hình ảnh gốc ở định dạng hình ảnh và kích thước lý tưởng.
  • "Hình ảnh rất khó duy trì 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 của chúng tôi không hiển thị chính xác trên thiết bị di động so với 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 từng gặp phải đối với hình ảnh là: Cần phải 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 lập trình đú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 không tốt. Hình nền rất khó tải chậm.

Chi phí/lợi ích

  • "Các phương pháp mới tuy hiệu quả nhưng lại làm tăng thời gian phát triển trang web."
  • "Nhiều công ty trong danh sách Fortune 500 chậm á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 đã từ chối thay đổi vì cho rằng đây là 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. Nếu có thì tính năng này chỉ khiến việc lưu hình ảnh trên web 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, 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

  • "Thật khó để cân bằng giữa chất lượng hình ảnh và kích thước tệp ở mức chấp nhận được. Một mặt, tôi muốn trang 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 chất lượng giao diện người dùng/trải nghiệm người dùng."

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

  • "Có quá nhiều trang web. Đừng sử dụng những hình ảnh vô ích, không giúp cải thiện nội dung văn bản."
  • "Bạn có còn nhớ thời điểm web chưa có hình ảnh và chúng ta chia sẻ ảnh selfie dưới dạng 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: Những điều gây khó chịu và yêu cầu

  • [Một người tham gia đã viết một bài đăng trên blog để trả lời bản khảo sát này]
  • "Các yêu cầu dường như liên tục thay đổi. Là một nhà phát triển web, tôi cảm thấy rất bực bội vì việc lưu hình ảnh ngay từ đầu rất tốn thời gian. Chúng tôi tối ưu hoá tốt nhất có thể, chúng tôi 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 ở một đị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 lâu dài và tốt nhất có thể cho khách hàng, đồng thời khiến cả chúng tôi và khách hàng đều 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 liên tục chỉnh 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ị khác nhau cũng tốn nhiều thời gian. Sẽ thật tuyệt nếu chúng tôi có thể xây dựng một hệ thống lưu hình ảnh nhất quán trong thời gian dài hơn."
  • "Đúng vậy, tôi nghĩ bạn đã hiểu sai hoàn toàn về mục "Giữ số lượng yêu cầu ở mức thấp và kích thước tệp ở mức nhỏ" trong Lighthouse. Nếu một trang web phân phát qua HTTP1.x thì chắc chắn là có, 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ỏ trong 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à "Giữ số lượng yêu cầu ở mức thấp và kích thước tệp nhỏ", trong khi vấn đề này 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 vậy, các tệp này vốn đã 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 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ữ 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ủ."
  • "Mọi người thường quên 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, vì vậy, các giải pháp đơn giản nhất thường là an toàn nhất."