Các chuẩn hình ảnh cho việc thiết kế web
BẢO KHA

Khi thiết kế website nhằm mục đích kinh doanh, để phổ cập kiến thức hay chỉ để “chơi”, nếu không kể đến việc chuẩn bị nội dung, khâu xử lý hình ảnh để đưa lên cũng không phải “dễ xơi”. Tốc độ truy cập sẽ được quyết định bởi số lượng và chuẩn hình ảnh mà chúng ta đưa lên trang web. Câu hỏi được đặt ra ở đây: Có bao nhiêu dạng chuẩn và cách tạo hình ảnh để phục vụ cho việc thiết kế web?

Một file ảnh dùng cho web trước tiên phải thoả hai điều kiện: nhẹ và đẹp. Thực tế, muốn đạt cùng lúc hai điều kiện này thật không dễ chút nào vì nếu kích thước file nhỏ quá thì hình bị vỡ không xem được, còn nếu để hình đẹp thì kích thước to quá xá!

Ngoài ra, kích thước file nhỏ hay lớn còn tuỳ thuộc vào chương trình tạo ra nó, hay nôm na là... cái đuôi file!

Đuôi ở đây chỉ có ý nghĩa khi được xuất ra từ một chương trình đồ hoạ, file ảnh đã được cài đặt các thông số kỹ thuật trước khi đẩy ra (Export - chứ không phải do người dùng tự ý đặt lại bằng lệnh Rename).

Quan trọng nhất là các file ảnh dùng cho web nên để độ phân giải 72 dpi, mode màu là RGB, Gray, Index. Đại kỵ nhất là CMYK (vì đây là chuẩn dành cho chế bản). Nếu bạn để chuẩn CMYK, trình duyệt sẽ không đọc được!

Ở đây, tôi mượn tạm ứng dụng Photoshop 7.0 để minh hoạ cho bài viết này. Các bạn có thể dùng PhotoPaint, PaintShop... vì “đường nào cũng về La Mã”!

GIF

Dạng này cho ra kích thước nhỏ đến tuyệt vời, thích hợp cho các dạng hình minh hoạ, bảng biểu hay các hình chụp đen trắng. Đối với các hình chụp màu, file Gif thường tạo ra các hạt li ti trên hình, trông không bắt mắt lắm (nếu cố tình, bạn có thể lợi dụng tính chất này để tạo hiệu ứng cho ảnh).

Gif động: Dựa vào nguyên lý tạo ảnh động của phim hoạt hình, khi nhìn trên màn hình bạn thấy ảnh chuyển động, nhưng đấy chẳng qua là sự sắp xếp rất “ăn khớp” của các frame ảnh tĩnh lần lượt được thay thế nhau và hiển thị. Tốc độ thay thế này xảy ra rất nhanh nên mắt thường không phân biệt được (cũng giống như việc xem một đoạn phim xinê quay tay ở thế kỷ trước vậy).

File Gif còn có một kiểu khác lợi hại hơn: Gif có nền trong suốt - kiểu file này rất lợi hại cho việc trình bày các trang web đòi hỏi tính mỹ thuật cao. Cách làm rất dễ, hầu như bất kỳ ứng dụng đồ hoạ nào cũng cho phép chọn chức năng Transparency trước lúc xuất.

JPEG

Chuẩn này thường được áp dụng cho các hình chụp, nhưng khi xuất bạn nên chọn chất lượng High, thông số 60 (Xin đừng tham chọn cao quá 80 hay 100, mặc dù nhìn có vẻ đẹp nhưng khi tải lên web, bạn sẽ chờ ná thở luôn. Và cũng đừng quá “kẹo” chọn thông số 30 hay 15, hình sẽ vỡ hết!)

BMP, TIF

Dùng hai chuẩn này đưa lên trang web theo lý vẫn không có gì sai nhưng thường thì chỉ để dùng cho người khác download thôi (hình giữ được chất lượng cao), nếu dùng chúng nhằm mục đích trình bày hiển thị thì xin cho tui can vì chẳng có ma nào dư tiền để ghé vô thăm trang web của bạn đâu!

WMF

Dạng file này chỉ áp dụng cho các dạng ảnh vectơ, chúng được xuất ra từ các chương trình đồ hoạ vẽ minh hoạ như CorelDraw, Freehand, AI. Bởi vì các trình duyệt nhìn các dạng file nguyên thể cdr, fh, ai, eps như chúng ta nhìn chữ cổ Ai Cập vậy (điếc luôn), do đó mới bày ra cái dạng WMF này.

SWF

Dạng này hơi cao cấp, thường dùng để trình bày các banner quảng cáo hay các đoạn phim đềmô gây ấn tượng, chúng thường được tạo ra từ chương trình Flash hay Swish. Cách thực hiện tương đối phức tạp và trình duyệt phải có cài bộ lọc hỗ trợ Flash hay Flash Player mới có thể xem được chúng.

PNG

ẢNH PNG NÀY ĐƯỢC TẠO RA TỪ MACROMEDIA FIREWORKS 4.0, NẾU DÙNG PHOTOSHOP MỞ (OPEN) THÌ CHỈ THẤY CÓ MỘT LỚP BACKGROUND, NHƯNG VỚI FIREWORKS 4.0 BẠN SẼ THẤY CÓ NHIỀU LỚP VÀ SỬA TIẾP (EDIT) ĐƯỢC.

Chuẩn này cho chất lượng cao hơn Gif, đẹp ngang bằng JPEG nhưng có lợi thế là cho kích thước nhỏ hơn JPEG. Chúng tôi đã thử dùng Photoshop xuất một tập tin ảnh có kích thước 300x50 pixel, độ phân giải 72 dpi ra ba chuẩn .GIF, .JPG, .PNG thì kết quả như sau: GIF: 1,12kb, JPG: 3,32kb, PNG: 2,11kb. Thực chất, dạng file PNG là chuẩn do chương trình Macromedia Fireworks tạo ra, lợi hại của chương trình này là dù khi tạo ra file ảnh có nhiều lớp, còn nguyên font chữ, đưa lên web đọc không có vấn đề gì, nhưng lúc cần có thể lôi trở lại edit tiếp. Trong khi đó, nếu dùng Photoshop mở thì bạn vẫn đọc được nhưng đó là một tấm ảnh chết, không làm gì được.

Ngoài ra, đối với các ảnh lớn dù bất cứ dạng nào người ta cũng không bao giờ “hiền” đến mức để nguyên xi như vậy đưa lên trang web cả. Trong trường hợp này, thường phải dùng “chiêu” cắt nhỏ chúng thành từng mảnh (thường gọi đùa là “phanh thây”) rồi ghép lại, nhìn trang màn hình thì không thấy gì, nhưng nếu bạn để ý lúc trang web load lên sẽ rõ, chúng sẽ chia nhỏ ra để hiển thị từng phần, nhờ vậy sẽ khiến người xem đỡ nản hơn.

Nói túm lại, chỉ có hai chuẩn được dùng nhiều nhất trong thiết kế Web là .GIF và .JPG.