Ảnh nền luôn là thành phần chính đối với các thiết kế website tốt. Các thiết kế hiện đại có xu hướng nhấn mạnh đến chúng nhiều hơn. Chúng ta giờ không chỉ muốn thấy nội dung, mà còn muốn cung cấp các phân tách thị giác khác nhau cho các phần đa dạng trong trang nữa.
Khi sử dụng ảnh làm nền cho website, tốt nhất là chọn nó thật cẩn thận. Lựa chọn sai lầm có thể làm mất thông điệp của bạn, chưa kể đến khả năng ảnh hưởng tiêu cực đến khả năng tiếp cận (accessibility).
Với những cân nhắc kỹ lưỡng đó, hãy khám phá một số phương pháp hay nhất để chọn và triển khai ảnh nền.
Khả năng tiếp cận phải là yếu tố được cân nhắc đến đầu tiên
Câu hỏi đầu tiên mà bạn phải hỏi bản thân mình khi tính đến việc sử dụng hình nền đó là: nó sẽ ảnh hưởng thế nào đến tính dễ đọc (readability) của nội dung? Bạn sẽ muốn đảm bảo rằng văn bản là dễ đọc và rằng khi kết hợp với ảnh nền, một tỷ lệ tương phản chấp nhận được cần được thiết lập.
Nếu bạn lo lắng về khả năng tiếp cận của nội dung nhưng bạn lại thực sự thích bức hình nào đấy, có vài cách bạn có thể thực hiện. Bạn có thể sử dụng các phần mềm chỉnh sửa ảnh hoặc thậm chí là CSS để thay đổi opacity (thuộc tính trong suốt) và độ tương phản (contrast), hoặc thêm lớp layer theo thứ tự để giúp nội dung dễ đọc hơn. Cũng rất quan trọng việc bạn chọn được đúng font và kích cỡ font cho bản thân nội dung.
Điều thiết yếu ở đây là ảnh nền của bạn phải không được can thiệp vào khả năng tiện lợi, chính xác của việc xem, đọc nội dung.
Các bức hình cần phải liên quan và không lộn xộn
Hình nền dạng ảnh chụp (photo) đã trở nên rất phổ biến trên web, và là lựa chọn hoàn hảo cho việc phủ đầy các khu vực có diện tích lớn. Đây là ý tưởng tốt khi bạn muốn chọn bức hình liên quan đến trang web của bạn theo một số cách nào đó. Điều này có thể là một bức ảnh về vị trí địa lý, sản phẩm hoặc dịch vụ cụ thể của bạn. Nhưng bạn cũng có thể tìm bất cứ hình nào mà bạn cảm thấy nó giúp truyền tải thông điệp của nội dung. Ảnh nền cần phải là một phần trong chiến lược thương hiệu tổng thể.
Bạn cũng muốn tìm các bức hình có không gian mở (hãy nghĩ về đường chân trời hoặc cánh đồng cỏ). Một bức hình lộn xộn có thể làm hỏng nội dung của bạn, ngay cả khi bạn thay đổi opacity và màu sắc. Điều này không có nghĩa là bạn không thể sử dụng các cảnh quay động hoặc hình ảnh hấp dẫn khác. Điều quan trọng hơn ở đây là tránh các ảnh vượt quá ngưỡng chấp nhận được.
Sử dụng các textures có kết cấu tinh tế và liền mạch
Textures có thể giúp trang của bạn trên tổng thể thêm phần đẳng cấp. Cho dù là bạn định sử dụng để làm nền cho cả trang hoặc chỉ một khu vực cụ thể, hãy để ý đến các textures liền mạch (seamless) – điều này có nghĩa là bạn có thể lặp lại nó trên toàn màn hình mà trông nó như một tấm ảnh lớn vậy.
Đôi khi bạn có thể không cần sử dụng ảnh textured kích cỡ đầy đủ, đặc biệt là các hình chi tiết không phải lúc nào cũng hoạt động tốt trên nhiều kích cỡ màn hình khác nhau. Ngoài ra, các ảnh có kích cỡ lớn có khả năng ảnh hưởng tiêu cực đến thời gian tải trang.
Tinh tế cũng là một yếu tố chất lượng mà bạn mong muốn đạt được trong texture (trừ khi bạn muốn một cái nhìn táo bạo). Một lần nữa, ý tưởng không được gây quá tải người dùng với các patterns đậm. Chúng ta nên tìm các bức hình với các đường mềm mại và màu sắc cần không được tương phản quá mức với nội dung.
Cân nhắc đến vấn đề đa màn hình và đa thiết bị
Khu vực hiển thị của background có thể thay đổi rất đột ngột trên nhiều kích cỡ màn hình khác nhau. Điều này đặc biệt ảnh hưởng đến ảnh. Hình trông tuyệt trên màn hình rộng có thể trông không ra sao trên thiết bị di động. Phần chính của ảnh có thể bị cắt đi, và kết quả là làm mất ý tưởng tổng thể của bạn.
Thách thức ở đây là chọn ảnh một phần và mã bộ phận. Trước hết, hãy tìm các hình khớp với tỷ lệ bạn mong muốn (phong cảnh, chân dung hay hình vuông) cho thẻ bao cha (parent container). Chúng có nhiều khả năng đem đến tỷ lệ phóng đẹp mắt cho màn hình cỡ nhỏ.
Bạn cũng cần xem xét cách các đoạn mã CSS trên website xử lý ảnh background cho các kích cỡ màn hình khác nhau. Lấy ví dụ, sử dụng background-size: cover;
Thuộc tính CSS trên đảm bảo rằng ảnh full sẽ được hiển thị. Nhưng chúng ta cũng cần biết rằng nó có thể làm lệch container một chút. Rất có thể, cần phải điều chỉnh một vài cái để mọi thứ trông hoàn hảo đến từng pixel trên nhiều thiết bị.
Bắt đầu với ảnh có độ phân giải cao, sau đó crop chúng lại
Khi tải về các ảnh mà bạn dự tính dùng chúng làm ảnh nền, hãy chọn ảnh có độ phân giải cao nhất có thể. Điều này sẽ cho phép bạn chỉnh sửa và crop ảnh về kích cỡ thích hợp mà bạn muốn dễ dàng hơn. Bạn sẽ muốn rằng mình sẽ lưu các phiên bản chỉnh sửa thành các file riêng biệt.
Tìm ra được kích cỡ thích hợp sẽ phụ thuộc vào chiều rộng của thẻ chứa bên trong website. Trong khi một số ảnh khi kéo dài hoặc lặp lại khá ổn (một trong các ưu điểm quan trọng của ảnh textures liền mạch), một số cái có thể xuất hiện méo mó. Trong trường hợp đó, crop tương ứng với chiều rộng lớn nhất là điều cần thiết. Bạn cũng có thể sử dụng câu lệnh CSS Media Queries để gọi các phiên bản nhỏ hơn của hình ảnh dành cho các kích cỡ màn hình khác nhau.
Biến hình nền thành điều đáng quan tâm
Điều này dễ hiểu thôi, với rất nhiều công nghệ hấp dẫn ảnh hưởng đến thiết kế web, chúng ta có xu hướng bỏ qua sự tập trung vào nền. Nhưng chúng đóng một vai trò rất quan trọng trong việc kể câu chuyện và giúp chúng ta tạo ra được UI hấp dẫn. Các ảnh nền FULL trang sẽ giúp tạo thành âm sắc nổi bật cho website, trong khi đó các background một phần sẽ đem cho nội dung của chúng ta không gian để thở.
Tất nhiên, tất cả đều hoạt động tốt nhất khi chúng ta chọn ảnh đúng nhu cầu. Ảnh được chọn lựa cẩn thận, bố trí khéo léo sẽ không gây ảnh hưởng đến khả năng tiêu thụ nội dung của người dùng. Nhưng chúng ta cần phải quan tâm đến các chi tiết như kích cỡ, tỷ lệ, và sự phù hợp cho các thiết bị di động. Cần nhớ rằng chi tiết rất quan trọng, ngay cả khi nói đến các mục nhỏ được sử dụng trong nền.
(Dịch từ bài viết A Web Designer’s Guide to Selecting the Perfect Background Image của tác giả Eric Karkovack)