Tối ưu hoá ảnh cho Web: Một số điều nên biết

Web là môi trường của thị giác, nhưng cho dù văn bản tạo nên phần lớn nội dung thì hình ảnh vẫn đóng vai trò quan trọng. Chỉ cần duyệt qua một số trang Web đang hiện hữu trên mạng, chúng ta sẽ thấy nhiều vấn đề cần bàn tới.
Ngay cả những người thiết kế Web rành nghề vẫn có thể mắc những lỗi về việc xử lý các bức ảnh để đưa lên mạng. Đối với những người thiết kế nghiệp dư, do thiếu kinh nghiệm, lỗi lại càng dễ mắc phải. Bài viết này nhằm mục đích giúp bạn nắm được những nguyên lý cơ bản nhất liên quan tới xử lý ảnh cho Web để giảm tới mức tối đa những lỗi không mong muốn.
Có một câu nói trong ngành thiết kế:” rác rưởi sẽ lại phải vứt vào thùng rác”. Câu nói này đặc biệt đúng khi chúng ta lựa chọn các bức ảnh để xử lý đưa lên mạng. Các bức ảnh trong các trang Web thường đã được nén và do đó có chất lượng tương đối thấp. Một khi đã được đưa lên mạng, chất lượng của ảnh không thể nào cải thiện, do vậy khi lựa chọn ảnh gốc, bạn phải chọn những bức ảnh có chất lượng càng cao càng tốt.
Nếu ảnh gốc không phải là ảnh số mà là ảnh in (ảnh chụp bằng máy ảnh thông thường hay ảnh lấy ra từ tạp chí), bạn sẽ cần quan tâm tới nhiều thứ hơn. Thứ nhất, độ phân giải của các bức ảnh in rất khác nhau trong khi đó độ phân giải chính xác của các bức ảnh sử dụng cho Web là 72 pdi. Tuy nhiên, khi quét ảnh in để số hoá, bạn cần lưu ý là không được quét ở độ phân giải thấp như vậy. Cái gì sẽ xảy ra nếu sau đó bạn cần tăng kích thước của ảnh cho trang Web hay nhận ra rằng nếu cắt bớt đi, ảnh sẽ phù hợp hơn. Đó là điều rất khó thực hiện nếu bạn quét ảnh ở độ phân giải thấp. Nếu bạn quét ảnh ở độ phân giải cao, chẳng hạn 300 pdi, bạn sẽ có nhiều lựa chọn hơn cho các việc xử lý về sau.
Còn có nhiều vấn đề khác có thể xảy ra khi quét các bức ảnh in. Nếu bạn sở hữu một chiếc máy quét có cấu hình tương đối thấp, màu của ảnh quét có thể khác xa so với bức ảnh gốc, mặc dù những cải tiến gần đây trong các phần mềm đồ họa có thể giúp bạn chỉnh sửa lại rất nhanh chóng. Ví dụ, trình đơn “Enhance” trong Adobe Photoshop Elements có một số lựa chọn mà bạn chỉ cần thao tác với một lần kích chuột để xử lý về độ tương phản hay chỉnh màu; hay trình đơn “Adjust” trong Jasc Paint Shop Pro cũng cung cấp những tính năng tương tự.
Thường gặp nhất khi quét ảnh từ tạp chí là hiện tượng ảnh quét bị rạn xương cá, mức độ phụ thuộc vào loại giấy in tạp chí. Tuy nhiên, nếu quét ảnh ở độ phân giải 300dpi và áp dụng hiệu ứng Gaussian Blur nhẹ nhàng, hiện tượng rạn xương cá sẽ giảm hoặc không còn khi bạn giảm độ phân giải hay kích thước ảnh Web. Các chi tiết của ảnh sẽ rõ ràng trở lại nếu bạn sử dụng cẩn thận bộ lọc “Unsharp Mask”. Nếu sử dụng Photoshop hay Photoshop Elements, bạn có thể có kết quả tương tự hay thậm chí còn tốt hơn nếu dùng bộ lọc “Despeckle” (Filter -> Noise -> Despeckle) đối với ảnh gốc.
Kỷ nguyên số
Một nguồn tài nguyên dồi dào cho đồ họa Web là các bức ảnh số. Vấn đề thường gặp nhất ở đây nằm ở thiết bị phần cứng sử dụng để chụp ảnh gốc. Nếu bạn có một máy ảnh số cấu hình thấp, do bị nén nhiều nên sẽ có những khoảng thô JPG trong bức ảnh của bạn. Màu sắc của ảnh cũng không rõ ràng, trừ khi bạn chọn góc sáng tốt cho vật thể cần chụp. Trong trường hợp này thì lời khuyên khi xử lý ảnh quét ở trên cũng có tác dụng: Hãy sử dụng các tính năng tăng cường chất lượng cho ảnh gốc trong các ứng dụng đồ họa để cải thiện màu sắc của ảnh số và áp dụng hiệu ứng Gaussian Blur một cách nhẹ nhàng để giảm các khoảng thô JPG.
Có 3 điều bạn luôn luôn phải nhớ khi chọn các bức ảnh gốc. Thứ nhất, bạn chỉ nên sử dụng các bức ảnh bạn được quyền sử dụng (nếu không sau này có thể sẽ gặp những vấn đề rắc rối về bản quyền). Thứ hai, bạn thường xuyên lưu (Save) lại các tệp ảnh gốc, sau đó làm việc trên một bản sao để đề phòng trường hợp bạn muốn lấy lại ảnh gốc ban đầu. Nếu bạn thực hiện nhiều thay đổi trên bức ảnh đang xử lý, chẳng hạn cắt gọn ảnh, tăng giảm độ phân giải hay kích thước, hãy lưu ảnh lại thành các tệp khác nhau sau mỗi bước thay đổi lớn để bạn có thể quay lại bước trước đó nếu có gì trục trặc xảy ra. Cuối cùng, khi lưu ảnh ở những bước trung gian này, bạn nên sử dụng các định dạng tệp không nén (hoặc định dạng JPEG có độ nén đặt thành 0%).
Cũng luôn luôn phải nhớ rằng bạn đang làm việc trong môi trường số và vì vậy còn có nhiều khía cạnh khác liên quan tới. Hãy cân nhắc kỹ bạn sẽ lấy phần nào từ ảnh gốc để tạo ảnh Web, vì một phần bức ảnh có thể sẽ đẹp và ấn tượng hơn so với toàn bộ. Một điều lưu ý nữa là phải sử dụng các bộ lọc rất cẩn thận. Vào tay những người thiết kế chuyên nghiệp, các bộ lọc phát huy tác dụng rất rõ ràng nhưng nếu bạn sử dụng không đúng liều lượng, bức ảnh của bạn trông càng có vẻ nghiệp dư.
Vì được tự do chỉnh sửa bức ảnh của mình, bạn có thể sẽ thực hiện một số thao tác, chẳng hạn như loại bỏ các yếu tố không mong muốn từ ảnh gốc. Làm như vậy thực ra khá dễ, chỉ cần thời gian và sử dụng khéo léo các công cụ cắt gọn (cloning). Phần lớn mọi người đều đồng ý cách tốt nhất là thực hiện những thao tác như vậy ở độ phân giải của ảnh như đã quét vào, nhưng nếu chỉ với một số thay đổi nhỏ thì trong một số trường hợp sẽ hiệu quả hơn nếu bạn thực hiện ở độ phân giải 72 dpi. Đó là vì ở độ phân giải đó, số điểm ảnh bạn cần thao tác sẽ ít đi, thời gian thực hiện cũng tiết kiệm đáng kể.
Giải thích thêm về định dạng tệp
Khi bạn đã thực hiện xong các công việc chỉnh sửa trên ảnh gốc, khi lưu ảnh đã chỉnh sửa lên đĩa để dùng cho Web bạn cần lựa chọn một định dạng phù hợp. Có hai loại định dạng được sử dụng nhiều nhất cho các bức ảnh trên Web và mỗi loại định dạng có những qui tắc nhất định bạn cần nắm rõ.
JPEG là định dạng phù hợp nhất với các bức ảnh chụp, với tính chất tông và màu chuyển biến đều đặn. Đó là do định dạng JPEC hỗ trợ tới hàng triệu màu và vì vậy bức ảnh trông vẫn được đẹp thậm chí khi bị nén. JPEC là định dạng nén có mất mát, có nghĩa là các chi tiết và màu sắc của bức ảnh gốc sẽ bị giảm dần dần khi tỉ lệ nén tăng lên và thuật toán nén sẽ “cố tình” loại bỏ các thông tin mà mắt thường không cảm nhận được. Trong trường hợp các bức ảnh sử dụng cho Web, bạn có thể nén tới 50% mà bức ảnh trông vẫn rõ nét. Nếu tăng thêm tỉ lệ nén, bạn có thể thấy các vùng ảnh JPEG trên ảnh gốc nổi lên với màu sắc bị nhoà vào nhau. Khi tỉ lệ nén ở mức cực đại, ảnh gốc ban đầu trông giống như được tạo thành từ các khối và trong thực tế, gần như không có lý do nào để bạn buộc phải nén với tỉ lệ như vậy. Nếu tệp quá lớn, hãy giảm bớt kích thước ảnh hay sử dụng một bức ảnh khác nếu bạn không muốn trang Web sau này trở nên quá nặng.
Phần lớn các ứng dụng cho phép bạn có thể lưu ảnh dưới định dạng JPEG cải tiến (progressive JPEC). So với định dạng JPEC chuẩn (standard JPEC), kích thước của tệp lưu dưới định dạng này lớn hơn nhưng lại bức ảnh có thể được tải về theo nhiều bước. Trước tiên, một phiên bản của bức ảnh với độ phân giải thấp sẽ xuất hiện gần như ngay tức thì trong cửa sổ trình duyệt và các chi tiết sẽ dần dần được bổ sung để “lắp ghép” thành ảnh ở chất lượng ban đầu.
Một định dạng phổ biến khác là GIF. Đây là định dạng nén không mất mát, có nghĩa là bạn sẽ không thấy sự suy giảm về chi tiết và màu sắc khi tăng tỉ lệ nén như trong định dạng JPEG. Khi lưu ảnh dưới dạng GIF, các màu sẽ được “khóa” một cách sao cho hiệu quả nhất, nhưng có điều là định dạng này chỉ cho phép tối đa 256 màu. Như vậy, định dạng GIF sẽ không phù hợp với các ảnh chụp, bởi vì ảnh lưu sẽ bị mất bớt màu và chất lượng không còn được như ảnh gốc. Tuy nhiên, tính chất không “mất mát” của thuật toán nén làm cho định dạng này rất thích hợp với những ảnh chỉ có ít màu và đặc biệt là những ảnh với những vùng màu đồng nhất. Chính vì vậy bạn thường lấy logo của các công ty hay các ảnh line-art thường được lưu dưới định dạng GIF.
GIF còn là định dạng rất thích hợp để tạo các ảnh chứa nội dung văn bản. Các máy PC và MAC chỉ có một số ít font có thể chia sẻ với nhau, gây nên nhiều khó khăn cho các nhà thiết kế Web. Văn bản trên nền đồ hoạ có thể là một giải pháp. Mặc dù bạn không nên sử dụng hình GIF để thể hiện toàn bộ nội dung văn bản cần hiển thị, bởi vì các font mĩ thuật thường rất khó đọc và văn bản trên nền ảnh GIF không thể phóng to, thu nhỏ hay copy sang các ứng dụng khác, nhưng trong trường hợp nếu chỉ là một đoạn văn bản ngắn, lại yêu cầu cao về tính mỹ thuật, thì định dạng này lại rất phù hợp.
GIF cũng có một số lựa chọn cho bạn lưu ảnh. Interlaced GIF, cũng giống như progressive JPEG, cho phép việc download ảnh về trang Web diễn ra trong nhiều giai đoạn. Bảng màu còn có thể giảm thiểu hơn nữa từ số màu mặc định là 256 và kích thức của tệp nhẹ thêm tới hàng kilobyte mà không ảnh hưởng tới chất lượng ảnh. Nếu muốn thử, bạn có thể sử dụng bảng màu “Web-safe”, mặc dù trong thực tế không nên sử dụng, bởi vì bảng màu này rất hạn chế khi phần lớn máy tính ngày nay có khả năng hiển thị tới hàng triệu màu.
Một lựa chọn thú vị khác khi lưu ảnh GIF là lưu ảnh với nền trong suốt. Tuy nhiên, cũng cần nói thêm đây không phải là sự trong suốt hoàn toàn. Chẳng hạn, nếu bạn tạo một ảnh gồm một đoạn chữ trên nền xanh (với hiệu ứng chống răng cưa anti-aliased) và sau đó bỏ nền của ảnh và lưu tệp dưới dạng ảnh GIF trong suốt. Sau đó bạn đưa ảnh này vào một trang Web có nền màu đỏ thì kết quả sẽ thấy màu nền của trang Web trong vùng ảnh không đúng như ban đầu. Đây là một lỗi thường gặp trên nhiều trang Web, vì vậy bạn nên chú ý phải đặt màu nền của ảnh GIF giống với màu nền của trang Web. Việc loại bỏ màu nền của ảnh GIF thường là một ý tưởng tốt bởi vì màu nền của nó và giá trị màu tương ứng định nghĩa trong các trang HTML có thể khác nhau chút ít.
Ngoài hai định dạng cơ bản như đã nói trên, có nên sử dụng định dạng nào nữa cho ảnh Web không? Câu trả lời là không nên. Mặc dù trong môi trường của một hệ điều hành nhất định, các trình duyệt Web có thể xử lý tốt các định dạng tệp khác nhưng thường các định dạng đó sẽ không tương thích với môi trường hệ điều hành khác. Nếu bạn cố gắng sử dụng các bức ảnh với định dạng TIF không nén hay BMP trong các trang Web, chắc chắn sẽ thấy điều đó là không thể được.
Trong số 2 định dạng khác đã được xây dựng để hiển thị ảnh trực tuyến, một loại không được hỗ trợ đầy đủ trong các môi trường khác nhau và định dạng kia lại chỉ thích hợp với một số điều kiện “đặc biệt”. Định dạng thứ nhất, PNG (Portable Network Graphic), kết hợp các đặc tính tốt nhất của JPEG và GIF, trong suốt hoàn toàn, chứ không phải trong suốt một cách hạn chế như GIF86. Nhưng vấn đề là ở chỗ trình duyệt Internet Explorer lại không hỗ trợ khả năng này và ngay khi các phiên bản trình duyệt IE mới hơn có thể hỗ trợ thì phần lớn người sử dụng vẫn quen với trình duyệt cũ và vì vậy, ưu điểm này của định dạng PNG vẫn chưa có nhiều ý nghĩa ở thời điểm hiện nay.
Flash, dùng để xử lý hoạt ảnh, cũng là một “ứng cử viên” cho đồ họa Web, rất hiệu quả để đưa lên mạng các ảnh vector hay dùng cho các đoạn sao chép văn bản lớn (Tệp Flash thường có kích thước bé hơn tệp GIF). Nếu sử dụng Flash, nên lưu các tài liệu của bạn thành các tệp Flash 6 hay phiên bản thấp hơn, bởi vì không phải ai cũng có các chương trình plug-in mới nhất để xem site của bạn.
Cũng có một số nguyên tắc khác bạn phải tuân thủ khi thiết kế ảnh cho Web và đưa ảnh đã thiết kế vào các trang Web thực sự. Bất kể định dạng nào bạn đã chọn, tệp phải có độ phân giải 72 dpi. Bạn cũng phải tuân theo các qui tắc về đặt tên tệp. Nói chung, nên tránh dùng ký tự khoảng trống trong tên tệp (có thể thay thế bằng dấu gạch dưới) và một qui tắc tốt là thường xuyên sử dụng chữ thường. Luôn luôn nhớ phải thêm phần mở rộng của tệp (mặc dù nhiều chương trình soạn thảo đồ hoạ tự động làm việc này cho bạn). Đuôi đúng của các tệp GIF là .gif và các tệp JPEG là .jpg (.jpeg cũng được sử dụng trong một số trường hợp, nhưng không phổ biến).
Có thể bạn đã được nghe nhiều ý kiến khác nhau, thực ra không có một qui tắc chung nào liên quan tới kích thước của các tệp sử dụng cho Web. Phần lớn các chương trình đồ hoạ có một chỉ số cho bạn biết thời gian ước tính tải tệp về từ mạng nhưng thực ra định kích thước còn phụ thuộc vào chính site của bạn, vào đối tượng khác hàng mục tiêu và rất nhiều yếu tố khác. Ví dụ, bạn thường xuyên phải cân bằng giữa yếu tố chất lượng hình ảnh và thời gian tải tệp về. Lưu ý thêm rằng các tệp ảnh được sử dụng chung cho nhiều trang khác nhau sẽ được trình duyệt lưu trong bộ nhớ cache, nên bạn có thể không cần phải nén quá nhiều. Hơn nữa, nếu bạn thiết lập một phòng tranh trực tuyến, người xem sẽ yêu cầu rất cao về chất lượng của ảnh và họ sẵn sàng chấp nhận thời gian tải về lâu. Một lỗi khá phổ biến nhiều người mắc phải là thay đổi kích thước của ảnh trong các trình thiết kế Web. Trừ một số trường hợp đặc biệt, bạn không nên kéo căng ảnh so với ảnh gốc mà hãy thực hiện việc này trên ảnh gốc trong trình thiết kế đồ hoạ. Nếu bức ảnh bị mờ sau khi bị giảm độ phân giải và thay đổi kích thước, hãy sử dụng bộ lọc “Unsharp Mask” để phục hồi lại các chi tiết đã mất.