Làm thế nào xây dựng một trang Web nặng về Multimedia mà không bị truy cập chậm

Tác giả:   Ashley Kemper 
Người dịch:
Nguyễn Tôn Hùng Trường – TAA Lab & Studio founder.

Một trang  web sẽ sinh động hơn khi sử dụng nhiều hình ảnh hoặc video để thiết kế tuy nhiên việc lạm dụng quá nhiều dữ liệu này sẽ làm cho trang Web hiển thị rất chậm và làm cho người xem cảm nhận không tốt về thiết kế.  Năm ngoái, tờ báo the New York Times đã ấn hành một infographic thể hiện chi tiết về việc đánh giá tổng số giây (bao gồm cả đánh giá chi phí cho việc sử dụng tài nguyên mạng) mà một ấn phẩm quảng cáo và một nội dung bài viết thể hiện trên một thiết bị di động. Trong khi các nội dung quảng cáo làm kéo dài thời gian hiển thị của bất cứ website nào thì trang New York Post cũng có chung số phận vì bị đánh giá là mất nhiều thời gian hiển thị nhất khi trang Web chi chít hình ảnh.

Nhưng các vấn đề này không làm trì hoãng các nhu cầu về xây dựng website và tất nhiên nó cũng không là hạn chế riêng cho người dùng sử dụng thiết bị di động. So với một trang web về thương mại điện tử với số lượng hàng trăm, thậm chí hàng ngàn sản phẩm thì số lượng hình ảnh xuất hiện không phải là con số nhỏ. Hoặc tương tự như vậy, một website về giáo dục trực tuyến với số lượng hình ảnh và âm thanh cùng xuất hiện trong từng bài học cho thấy số lượng dữ liệu của một trang web không bao giờ thấp… Vấn đề này khá bổ biến và Google đã tạo ra riêng chủ đề phát triển website cho các nhà phát triển web toàn cầu.

Một tấm hình quá khổ cần được hiển thị có thể không là một vấn đề lớn đối với một trang web nhưng nếu điều này trở nên cực kỳ phức tạp nếu chúng được lập lại nhiều lần, dung lượng (kb) của trang Web tăng lên nhanh chóng. Các file hình ảnh dạng JPG, PNG và SVG là những định dạng phổ biến nhất, tuy nhiên các website mới đang có xu hướng sử dụng các hình ảnh động. Việc đưa và các hình GIF (định dạng như một dạng hình động) và các files video vào website trong trường hợp này là nguy cơ làm cho tốc độ hiển thị trang web trở nên ì ạch và lờ đờ. Trong khi đó, việc đánh giá vào thứ hạn trang web của các máy tìm kiếm lại dựa nhiều vào tốc độ hiển thị trọn vẹn (load time) của chúng, và tốt nhất các nhà quản trị hoặc thiết kế website phải nổ lực để nén các file hình ảnh, âm thanh, video để trang web được tải nhanh hơn.

Một khi bạn đã nhận thấy các vấn đề một cách rõ ràng, làm thế nào để chúng ta có thể giới hạn được kích thước của các file hình ảnh để luôn giữ cho trang Web nhanh và nhẹ?

“Nén” từng công đoạn

Để tối ưu dung lượng và chất lượng file hình ảnh cho trang web, bạn cần phải siêng năng và chủ động nén toàn bộ các file hình ảnh, ảnh động, video hoặc âm thanh cho chúng và tất nhiên sẽ phải tiếp tục duy trì công việc này trong toàn bộ quá trình thiết kế cũng như vận hành trang web.

Để đạt được điểm tới hạn tốt nhất của việc tạo ra một trang web nhẹ đòi hỏi sự hợp tác của hầu hết các thành viên trong nhóm xây dựng  website như: thiết kế, lập trình hay bất cứ ai tham gia vào qui trình tạo ra nội dung hoặc cung cấp nội dung cho trang web. Dưới đây là các “công đoạn nén” mà các thành viên có thể phối hợp thực hiện:

  • Thiết kế: Bất cứ khi nào có thể, tránh việc sử dụng quá nhiều màu sắc cho thiết kế. Việc giới hạn số lượng màu sắc trong một bức hình hoặc ảnh động đều giúp cho dung lượng của file hình giảm đáng kể mà vẫn giữ được chất lượng và ý tưởng nội dung của chúng. Sử dụng hình ảnh đơn sắc (monochromatic photos) có thể tạo ra một ảnh hưởng tích cực khi các màu sắc thiết kế được sử dụng một cách chọn lọc. Nếu nhà thiết kế, phát thảo mẫu làm được việc này thì nhóm có thể xem đây như là một phần thưởng xứng đáng cho công đoạn này.
  • Phát triển, lập trình: Xem xét việc sử dụng 2 loại file khác nhau để bảo đảm được chất lượng hiển thị vẫn tốt nhất trên màn hình siêu nét rentia mà không làm chậm khi người dùng sử dụng các loại màn hình khác.
  • Biên tập, tạo ra nội dung: Nếu bạn sử dụng kho hình ảnh, ảnh động hoặc video để minh hoạ cho một bài viết hoặc một trang web, sử dụng vài phương pháp nén sau đây để làm giảm dung lượng file trước khi upload.

“Giảm ký” cho hình ảnh

Cho dù bạn đã có một hình ảnh ưng ý được tối ưu trong công đoạn thiết kế mẫu hoặc bạn tìm mua được một hình ảnh phù hợp trong kho dữ liệu (ShutterStock) khớp với nội dung biên tập thì chúng vẫn còn có thể tiếp tục được cải thiện về dung lượng. Dưới đây là những bước đơn giản, nhanh chóng để tăng tốc hiển thị hình ảnh cho trang web của bạn.

Bước 1: “Tự xử” 

Có 2 công cụ miễn phí bạn có thể sẽ cần cho cộng đoạn này. Có thể download phần mềm ImageAlpha ImageOptim để bắt đầu, sau đó chọn một bức hình của bạn để kiểm thử. Chúng ta hãy sử dụng tấm ảnh color-dense pizza bên dưới để làm ví dụ. Tấm hình ban đầu của chiếc bánh pizza này là 1MB, dung lượng này được xem là lớn so với một tấm hình được khuyên dùng cho website.

Bước 2: Giảm màu 

compress files for web

Mở phần mềm ImageAlpha kéo và thả tấm hình này vào màn hình chính của công cụ. Tên góc trái của phần mềm bạn thấy một thanh trượt “Colors” cho phép bạn điều chỉnh tăng hoặc giảm số lượng màu sắc bên trong tấm hình. Mỗi khi bạn kéo giảm giá trị về số lượng của màu nhỏ xuống bạn sẽ nhận thấy số tấm hình bên dưới tăng lên và các hình trở nên đơn sắc hơn. Chúng ta phải tự quyết định để cân bằng được điểm ưng ý giữa kích thước của tấm hình và chất lượng của tấm hình, thông thường thông số 256 màu là số màu cơ bản của 1 tấm hình.

Ngay bên dưới thanh trạng thái của ImageAlpha, bạn có thể nhìn thấy dung lượng của hình ảnh giảm xuống đáng kể từ file gốc với định dạng 256 màu, chúng được giảm xuống tới gần 54%. Để hoàn tất công việc bạn chỉ cần vào File và chọn Save as để lưu phiên bản hình ảnh hoàn tất nào trong danh sách mà bạn ưng ý sau khi xử lý. Tuy nhiên, chúng ta vẫn chưa kết thúc ở đây.

Bước 3: Tiếp tục “giảm ký”

compress files for web

Mở phần mềm ImageOptim, kéo thả file bạn cần làm giảm dung lượng vào màn hình chính (nếu bạn muốn xử lý cùng một lúc một số lượng file lớn bạn vẫn có thể kéo và thả nhiều file vào vùng làm việc).  Ngay lập tức bạn có thể nhìn thấy ImageOptim tiến hành làm giảm dung lượng hình anh và tiếp tục “giảm ký” cho các tấm hình của mình thêm 15-20% nữa. Bạn sẽ nghi vấn làm thế nào mà phần mềm có thể xử lý được việc này? Về cơ bản, phần mềm sẽ loại trừ các dữ liệu không cần thiết trong hệ thống lưu trữ gốc (metadata) và các thông số màu sắc kết hợp bên trong tập tin mà thậm chi bạn không biết nó ở chổ nào bên trong tấm hình.

Bước 4: Cảm nhận về trọng lượng

compress files for web

Phải thừa nhận thực tế rằng bạn đang thực hiện các bước cải thiện đáng kể cho việc tăng hiệu quả của website. Trong ví dụ này, tập tin hình ảnh ban đầu trên 1M và đã được giảm xuống còn 412KB – một kết quả không quá tệ cho 2 phút làm việc! Nếu bạn so sánt với hình gốc trước đó (bên trái) và hình sau khi xử lý (bên phải) bạn có thể nhận thấy rất ít sự thay đổi về độ “rổ” (grain) của hình ảnh.

Nén các ảnh động

compress files for web

Ảnh GIF là loại file hình ảnh có chứa nhiều ảnh bên trong để tạo ra chuyển động, vì vậy nó cũng sẽ được nén với những phương pháp tương tự như 1 bức ảnh đơn thuần.  Bắt đầu với việc giới hạn bảng thông số màu sắc của chúng cùng với giới hạn số chuyển động sẽ có thể giúp cho các hình động có thể giảm dung lượng.

Các công cụ hiệu chỉnh

Có rất nhiều công cụ nén hình GIF tốt trên thị trường. Chủ yếu chúng hoạt động bằng cách loại trừ các thông tin dư thừa trong hình ảnh bằng một giải thuật tính toán để giảm bớt thông số màu sắc cũng như số lượng các chuyển động chi tiết. Bên dưới là danh sách các phần mềm bạn bạn có thể sử dụng để thực hiện công việc này.

Tuy nhiên, có một vấn đề với các công cụ tự động là nó thường không tạo ra cách kiểm soát tốt một file hình ảnh được nén như thế nào. Và cũng thật trớ trêu là các công cụ này cũng giới hạn về kích thước và dung lượng của file mà người dùng cần xử lý. Nếu bạn muốn xử lý một file GIF có dung lượng lớn hơn 20MB bạn sẽ không thể sử dụng các cộng cụ trên. Mặc dù vậy, nếu bạn đang thật sự cần phải xử lý một file lớn, bạn vẫn còn các cơ hội để tối ưu chúng. Dưới đây là một số bước thủ công bạn có thể thực hiện trong vài phút để xử lý việc tạo ra các ảnh động một cách tối ưu.

Bước 1: Giảm số lượng các khung hình. 

Các tập tin bắt đầu trong ví dụ này là một con số khổng lồ, 84.2MB, và khi nó được mở trong Photoshop chúng ta có thể thấy các yếu tố tạo ra một file có dung lượng lớn như thế nào vì chúng có tổng cộng tới 450 khung hình được tạo ra cho chuyển động này. Tất cả các khung hình để tạo ra một file GIF 13 giây này lớn hơn nhiều so với thời gian mà một người duyệt web thường tập trung vào một nội dung nào đó.

Việc đầu tiên để tối ưu hình ảnh GIF này là hiện thực hoá số lượng khung hình của chuyển động. Trong trường hợp này, chúng ta hoàn toàn có thể loại bỏ các khung hình từ 301 đến 450, sau đó xoá các khung hình dư thừa còn lại. Việc làm này có thể làm giảm sự mềm mại trong chuyển động nhưng ngay lập tức có thể giảm đáng kể dung lượng của file. Để bù đấp vào các khung hình đã xoá, chúng ta chọn tất cả các khung hình ưng ý còn lại và tăng gấp đôi thời gian xuất hiện của nó (trong ví dụ này, tăng từ 0.03s thành 0.06s) để hình động không bị mất tự nhiên khi các khung hình ngay lập tức xuất hiện rồi mất đi nhanh gắp 2 lần hình gốc. 124840-Screen_Shot_2016-08-10_at_8.04.09_PM

Bước  2: Lưu lại dạng Web (Save For Web)

Trong Photoshop, chọn File trong menu và chọn Save for Web & Devices. Chuyển qua chế độ xem 2-Up để so sánh giữa hình gốc và hình mới được tạo ra nhằm so sánh về chất lượng của ý tưởng sau khi hiệu chỉnh. Tiếp sau đó chúng ta tinh chỉnh để giảm thêm dung lượng của file. Nếu các khung hình trong file là những hình có màu đơn sắc, thực hiện thêm bước giảm thông số màu trong menu Color drop-down. Trong ví dụ này, các hình ảnh có quá nhiều cường độ về sắc thái và bóng mờ nên việc giảm số lượng màu có thể ảnh hưởng đến chất lượng của hình ảnh vì vậy chúng ta vẫn duy try thông số 256. Chức năng Dithering giúp chúng ta tăng chất lượng của hình ảnh sau khi nén file bằng cách pha trộn các màu sắc gần với nhau (tuy vậy, chúng vẫn có thể làm tăng kích thước file). Chúng ta sẽ quyết định cân bằng 20% giá trị giữa chất lượng hình ảnh và dung lượng file. Tương tự như chức năng này, nếu tăng giá trị thiết lập Lossy có nghĩa là dữ liệu trong file có thể sẽ bị mất đi (giảm dung lượng file) nhưng nó cũng đồng nghĩa với việc giảm chất lượng hình ảnh. Và chúng ta cũng quyết định cân bằng vấn đề này ở mức 20% tương tự như chức năng . Cuối cùng cập nhật lại kích thước hình ảnh vừa với kích thước mà bạn muốn chúng hiển thị để không vô tình tạo ra một  hình ảnh lớn hơn cái mà bạn đang thật sự cần  đến.

Đối với tất cả mọi sự thay đổi, bạn sẽ cần phải đàm phán xem việc đánh đổi giữa chất lượng của hình ảnh giảm xuống bằng hiệu xuất của trang web và tất nhiên, công thức để tối ưu file GIF là không thể giống nhau.

Trong ví dụ này, dung lượng file ban đầu là 84.2MB đã được tối ưu bằng Photoshop để giảm xuống còn 18.9MB, tương ứng với việc giảm được 78% dung lượng của hình gốc.

Chuyển cảnh nhanh 

Một khi việc “giảm ký” hoặc nén các file hình ảnh, file GIF không làm bạn lo ngại, việc tiếp theo là bạn phải thực hiện việc “giảm ký” cho các file Video. Một số công cụ và website trực tuyến cho phép thực hiện việc chuyển đổi và nén các file video khá phổ biến như:

Tuy nhiên, cũng giống như việc “giảm ký” cho file GIF, kết quả tạo ra có thể không dự đoán trước được và không cho phép bạn hiệu chỉnh lại kết quả đã thực hiện. Tất cả các công cụ edit video đều cho phép bạn tự thực hiện công việc nén của mình. Dưới đây là các thành phần bạn cần tìm hiểu để nắm rõ trong quá trình thực hiện và sử dụng công cụ xử lý nén các file video của bạn.

  • Codec: Máy tính nhìn vào các hình khác nhau để tạo ra một file video và xác định phần nào của tấm hình đó di chuyển trong khi các phần khác thì không thay đổi. Codec là một phần mềm cho phép thực hiện sự phân tích đó.  Loại định dạng H.264 là một trong những định dạng được sử dụng nhiều nhất cho những file video chất lượng cao.
  • Keyframe interval: Điểm xác đinh sự thay đổi (keyframe interval) dùng để đánh dấu để làm thế nào một hệ thống phân tích xác định một điểm bắt đầu cho một sự di chuyển hoặc một chuyển động xảy ra.  Một khoảng thời gian rất nhỏ cho phép codec xác định một chuyển động rất nhỏ những cũng tạo ra một file khá lớn khi lưu trữ chúng cùng với file video. Để tối ưu các file video, trước hết bạn phải xác định điểm keyframe ưng ý đầu tiên cho video sau đó xác định tốc độ di chuyển của các frame hình và từ từ di chuyển giá trị keyframe interval cho đến khi bạn cảm nhận được chất lượng của hình ảnh đã tới hạn chấp nhận.
  • Bit rate/data rate: Tỷ lệ này được đo bằng kilobits per second, và sẽ xác định bao nhiêu dữ liệu được load cho mỗi giây của 1 file video. Sử dụng một biến số thay đổi về tỷ lệ này sẽ ảnh hưởng đến số lượng dũ liệu được tải/hiển thị cho mỗi giây. Và dựa vào số lượng các chuyển động tồn tại trong một file video thì dung lượng của file video đó sẽ lớn hay không.
  • Frame rate: Tỷ lệ khung hình xuất hiện trong một giây. Giảm giá trị này cũng được hiểu tương tự như việc loại bỏ một khung hình tương tự như chúng ta đã thực hiện đối với file GIF. Nếu bạn tải file video của bạn lên một công cụ hiển thị online, bạn phải hiểu rằng có thể chúng sẽ được tự động làm giảm giá trị này xuống. Cả Vimeo và YouTube đều yêu cầu Frame rate thấp hơn 60 hình mỗi giây (FPS) (thường các file video sử dụng framerate là 24-30 FPS)

Tương tự như các cách xử lý tối ưu khác, việc sử lý tối ưu video cũng cần phải cân bằng giữa độ lớn của video và chất lượng của chúng. Chuyển đổi file video gốc sang các phiên bảng có định dạng khác nhau để đánh giá kết quả cuối cùng của công việc tối ưu các file video và quyết định sẽ chọn lựa một kết quả cân bằng giữa dung lượng và chất lượng vẫn là cảm nhận riêng của các nhà phát triển web.

Việc cân bằng giữa chất lượng và hiệu xuất của trang Web không phải là một việc dễ dàng, nhưng bây giờ bạn đã có trong tay một số công cụ hữu ích hỗ trợ bạn tiếp tục hành trình với các dự án Web.

Tất cả các hình ảnh được chụp từ màn hình của Ashley Kemper