Cách sử dụng hình ảnh
Hình ảnh hiển thị thường thông qua 2 cách, sử dụng thẻ img và sử dụng thuộc tính background. Ở đây mình xin khuyến khích các bạn nên sử dụng thuộc tính background khi có thể, vì những lợi điểm sau:
Dễ thay đổi bằng hình ảnh khác khi cần, chỉ cần thay đổi nội dung CSS là có thể chuyển đổi hình ảnh khác, thay vì phải vào mã HTML dò tìm thẻ IMG và thay đổi thuộc tính src
Có thể tạo hiệu ứng thay đổi khi di chuyển mouse vào thẻ, chỉ cần định thêm style dành cho :hover là ta có thể có 2 trang thái hiển thị khác nhau trên cùng một thẻ, điều này muốn thực hiện trên thẻ IMG phải sử dụng Javascript
Khi sử dụng thuộc tính background, bạn có thể linh động chỉ định vị trí hiển thị trên, dưới, trái, phải của thẻ
<style type="text/css">
.box {float: left; border: 1px solid silver; width: 300px; height: 300px; margin: 10px;}
</style>
<div class="box" style="background: url(http://vnexpress.net/Files/Subject/3B/A2/20/1D/xe3.jpg) no-repeat left;"></div>
<div class="box" style="background: url(http://vnexpress.net/Files/Subject/3B/A2/20/1D/xe3.jpg) no-repeat right;"></div>
<div class="box" style="background: url(http://vnexpress.net/Files/Subject/3B/A2/20/1D/xe3.jpg) no-repeat bottom;"></div>
<div class="box" style="background: url(http://vnexpress.net/Files/Subject/3B/A2/20/1D/xe3.jpg) no-repeat top;"></div>
Cũng như bạn có thể chỉ định chế độ hiển thị "lát gạch", ngang, dọc, toàn phần
<style type="text/css">
.box {float: left; border: 1px solid silver; width: 300px; height: 300px; margin: 10px;}
</style>
<div class="box" style="background: url(http://vnexpress.net/Files/Subject/3B/A2/20/1D/xe3.jpg) repeat-x top;"></div>
<div class="box" style="background: url(http://vnexpress.net/Files/Subject/3B/A2/20/1D/xe3.jpg) repeat-y left;"></div>
<div class="box" style="background: url(http://vnexpress.net/Files/Subject/3B/A2/20/1D/xe3.jpg);"></div>
Khi hiển thị bằng thuộc tính background, bạn còn có thể cho phép chữ đè lên nền hình, điều này thực hiện với thẻ IMG thì hơi "vất vả" hơn
<div style="background: url(http://vnexpress.net/Files/Subject/3B/A2/20/1D/xe3.jpg) repeat-x top; height: 200px; color: white; font-weight: bold; font-size: 2em;">Nội dung đè lên hình</div>
Tránh sử dụng hình ảnh sai kích thước cần hiển thị
Giả sử bạn có một danh sách sản phẩm, bạn cần hiển thị hình ảnh với kích thước cố định 100x100 pixel, nhưng do vô tình hay cố ý "lười", bạn bê nguyên xi một ảnh 1024x768 pixel vào chỗ đó, điều này khiến anh trình duyệt của chúng ta vật vả khi tải một hình khổng lồ nhưng chỉ để hiển thị một khung rất nhỏ
<style type="text/css">
.box {float: left; border: 1px solid silver; margin: 10px; width: 100px;}
</style>
<div class="box">
Tên sản phẩm
<img src="http://vnexpress.net/Files/Subject/3B/A2/20/1D/xe.jpg" width="100" height="100" />
</div>
<div class="box">
Tên sản phẩm
<img src="http://vnexpress.net/Files/Subject/3B/A2/20/1D/xe.jpg" width="100" height="100" />
</div>
Hình bị "ém hàng" (scale) như thế thì hiển thị cũng không đẹp, vì nguyên một hình lớn theo dạng khung chữ nhật, nay lại bị "bóp" thành hình vuông, thành ra những lúc thì hiển thị người cao lêu nghêu hay một gương mặt mẹt .v.v. Để khắc phục tình trạng này ta cần sử dụng hình ảnh đúng kích thước quy định, hiển thị khung 100x100 thì phải chuẩn bị hình ảnh 100x100, có nghĩa là bạn phải có nhiều hình dành cho những ngữ cảnh hiển thị khác nhau.
Luôn đảm bảo nguồn ảnh không được phép rỗng
Khi hiển thị hình ảnh, nguồn hình ảnh thường được truy vấn từ cơ sở dữ liệu, việc sai sót khi hình ảnh không hiển thị có những nguyên nhân sau:
- Nguồn hình ảnh không tồn tại
- Hình ảnh không đúng định dạng (do tập tin bị lỗi hay nguồn hình ảnh là một địa chỉ website)
<img src="<%#Eval("Image")%>"/>
<img src="<?echo article->image?>"/>
Nếu trường Image là NULL hoặc chuỗi rỗng thì tại chỗ src của hình ảnh sẽ là src="", vậy src rỗng thì sẽ rắc rối ra sao ? Điều này làm cho trình duyệt hiểu là src hình ảnh có giá trị bằng đúng giá trị của địa chỉ trang hiện tại chứa hình ảnh, giả sử đây là trang http://vnexpress.net, thì khi đó trình duyệt sẽ truy vấn đến địa chỉ http://vnexpress.net để tải hình ảnh, và tất nhiên là địa chỉ http://vnexpress.net sẽ trả về đoạn mã HTML chứ không phải là một hình ảnh, chính vì vậy trình duyệt sẽ không thể phân tích được nội dung hình ảnh và không hiển thị. Điểm đáng lưu ý là do việc truy vấn đến địa chỉ http://vnexpress.net là một trang chủ, có rất nhiều mã lập trình xử lý tại đây, do vậy, thời gian truy vấn khá lâu. Nếu trong trang chứa khoảng 50 hình ảnh có src="" thì trang http://vnexpress.net bị truy vấn đến hơn 50 lần, do vậy làm ảnh hưởng đến tốc độ xử lý của máy chủ. Khắc phục tình trạng này bằng cách kiểm tra dữ liệu từ CSDL có rỗng hay không, nếu có thì chuyển thành một địa chỉ hợp lệ chứa hình ảnh có câu thông báo hoặc logo mặc định của website
Nên chỉ định kích thước hình ảnh khi có thể
Việc chỉ định kích thước hình ảnh cụ thể khi sử dụng thẻ IMG, sẽ giúp cho trình duyệt tính toán được vùng hiển thị của hình ảnh, nếu không chỉ định thì trình duyệt phải tải đầy đủ hình ảnh mới có thể xác định được kích thước của vùng này.
Nên sử dụng PNG-8 thay cho GIF khi có thể
Như ở bài các định dạng ảnh, mình có trình bày sự ưu điểm của từng loại hình ảnh, trừ khi bạn muốn hiển thị hình ảnh "hoạt họa" (animation), còn ngoài ra bạn nên dùng PNG-8 thay thế cho GIF, đơn giản bởi vì định dạng PNG-8 có tỉ lệ nén trung bình cao hơn GIF khoảng 10%, tất nhiên trong một số trường hợp với số màu của ảnh nhỏ hơn 8, GIF lạic hiếm ưu thế.
Nên sử dụng ảnh JPG với chất lượng 75-90%
Khi sử dụng định dạng ảnh JPG, bạn không nên sử dụng hình nguyên bản mà hãy chọn chế độ nén với chất lượng 75-90% so với ảnh gốc, dung lượng ảnh sẽ đáng kể
Sử dụng công cụ nén
Trong phần cuối này, mình xin giới thiệu một công cụ đơn giản, đáp ứng khá đủ nhu cầu tối ưu tài nguyên của một website designer. Phầm mềm này do mình tự phát triển, dựa trên nhu cầu cá nhân. Để sử dụng phần mềm này bạn cần có .NET Framework 3.5 (bạn có thể tải tại đây). Tải ứng dụng Web Resource Optimize tại đây (dung lượng ~ 600KB)
 |
| Giao diện chính của chương trình |
- Những tham số khi nén JPG, các bạn chỉ cần thay đổi chữ -m75 thành con số chất lượng ảnh mong muốn, ví dụ -m90 (chất lượng 90%)
- Tham số khi nén PNG
- Ứng dụng sẽ tiến hành nén lại những tập tin có trong danh sách
- Hiển thị đường dẫn tập tin gốc
- Hiển thị số lương tập tin có trong thư mục
- Hiển thị dung lượng ban đầu của tập tin
- Hiển thị dung lượng sau khi nén
- Hiển thị dung lượng giảm hoặc tăng so với dung lượng gốc
- Hiển thị tương quan % dung lượng so với tập tin gốc
- Khi danh sách tập tin cần nén nhiều, thời gian xử lý sẽ lâu, tùy chọn này cho phép chương trinh tự thoát khi thực hiện xong
- Chương trình hỗ trợ 2 loại nén PNG, bạn có thể chuyển đổi qua lại giữa các kiểu nén để chọn ra kết quả tối ưu nhất
- Hiển thị danh sách tập tin / thư mục đang xử lý
- Nếu tập tin là .html, .htm, .js, .cs, ứng dụng sẽ nén cho nhỏ lạ.
- Nếu tập tin là .gif, ứng dụng sẽ chuyển hóa thành ảnh PNG-8, vì định dạng này sẽ cho ra kết quả nén cao hơn. Nếu tập tin là ảnh animated gif thì ứng dụng sẽ bỏ qua.
- Nếu tập tin là .jpg, .jpeg, ứng dụng sẽ nén theo tỉ lệ được định ở khung cấu hình phía trên.
- Nếu là thư mục, ứng dụng sẽ quét tất cả tập tin có trong thư mục và tiến hành nén tùy theo phần mở rộng của tập tin như đã nêu, sau đó ứng dụng tiếp tục quét sâu vào các cấp thư mục / tập tin con.
- Nếu không thuộc những định dạng hỗ trợ, ứng dụng sẽ bỏ qua
Một số ví dụ so sánh
Nén ảnh PNG-8
 |
| Ảnh GIF gốc, 2.35KB |
 |
| Dùng Photoshop chuyển thành PNG-8, 4.76KB |
 |
| Dùng ứng dụng chuyển thành PNG-8, 1.8KB |
Nén ảnh PNG-24
 |
| Ảnh gốc 23.5KB |
 |
| Sau khi nén 21KB |
Nén ảnh JPG
 |
| Ảnh gốc, 155KB |
 |
| Sử dụng Photoshop nén 75%, 56.4KB |
 |
| Sử dụng ứng dụng nén 75%, 23.8KB |
Với ứng dụng nhỏ này, sẽ giúp bạn giảm thiểu thời gian khi phải phối hợp nhiều công cụ nén khác nhau. Ứng dụng trong giai đoạn hoàn thiện, nếu có ý kiến đóng góp nâng cấp ứng dụng, bạn vui lòng góp ý bên dưới.
Không có nhận xét nào:
Đăng nhận xét