anhchanghaudau
24-10-2010, 00:39
Xem chi tiết tại đây http://linq2js.blogspot.com/2010/10/toi-uu-hoa-website-phan-cuoi.html
Với phần cuối này, mình xin trình bày về cách tối ưu hóa hình ảnh trong website. Hình ảnh là thành phần quan trọng, được sử dụng khá nhiều trong trang, chính vì vậy bạn cần phải cân nhắc khi sử dụng hình ảnh hợp lý. Tối ưu hình ảnh có những công đoạn sau:
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)
Với lỗi hình ảnh không tồn tại thì không có gì lo lắng, riêng lỗi hình ảnh không đúng định dạng thường do ta sơ xuất không kiểm tra giá trị từ CSDL
<img src="<%#Eval("Image")%>"/>
<img src="<?echo article->image?>"/>
Nếu trường Image là NULL 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 trang hiện tại chứ 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 cũng khá lâu. Nếu trong trang chứa 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 (http://linq2js.blogspot.com/2010/10/nhung-inh-dang-hinh-anh-thuong-uoc-su.html), 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 (http://www.google.com.vn/url?sa=t&source=web&cd=1&ved=0CBYQFjAA&url=http%3A%2F%2Fwww.microsoft.com%2Fdownloads%2Fd etails.aspx%3FFamilyId%3D333325fd-ae52-4e35-b531-508d977d32a6&rct=j&q=net%20framework%203.5&ei=1gzDTLbODY6YvAPSlJGmCA&usg=AFQjCNFumF6Ju-vfb8gPo_dMxPsx6a53Zw&cad=rja)). Tải ứng dụng Web Resource Optimize tại đây (http://www.mediafire.com/download.php?jyfidyyzcw6rh4j) (dung lượng ~ 600KB)
http://4.bp.blogspot.com/_-GHT-kgNuYI/TMMUOESOmFI/AAAAAAAAAEE/FZ-CI94Y0bI/s400/wro.jpg
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ượgn 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
Hiển thị đường dẫn tập tin mới tạo, đối với tập tin GIF sau khi chuyển thành PNG thì ở khung này sẽ hiển thị đường dẫn tập tin PNG mới chuyển.
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ý
Cách sử dụng phần mềm rất đơn giản, trước tiên ban cần chọn những tập tin cần xuất bản và sao chép ra một thư mục mới (không được sử dụng thư mục mã nguồn gốc), sau đó bạn nắm "kéo" toàn bộ thư mục hoặc tập tin vào cửa sổ ứng dụng, ngay lập tức ứng dụng sẽ chạy và quét những nội dung bạn đã kéo thả vào. Ứng dụng hỗ trợ những định dạng sau:
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ụ
Nén ảnh PNG-8
http://1.bp.blogspot.com/_-GHT-kgNuYI/TMMXGVSiFVI/AAAAAAAAAEI/Z2OIR2K_W8w/s1600/wro_gif_origin.gif
Ảnh GIF gốc, 2.35KB
http://4.bp.blogspot.com/_-GHT-kgNuYI/TMMXIWrywsI/AAAAAAAAAEQ/4P7W_QIEXjs/s1600/wro_png_photoshop.png
Dùng Photoshop chuyển thành PNG-8, 4.76KB
http://1.bp.blogspot.com/_-GHT-kgNuYI/TMMXHbJMzpI/AAAAAAAAAEM/0AlqDdF-AvY/s1600/wro_png_compressed.png
Dùng ứng dụng chuyển thành PNG-8, 1.8KB
Nén ảnh PNG-24
http://1.bp.blogspot.com/_-GHT-kgNuYI/TMMYjwnkhII/AAAAAAAAAEY/o8WyQTac4g8/s1600/wro_png24_origin.png
Ảnh gốc 23.5KB
http://4.bp.blogspot.com/_-GHT-kgNuYI/TMMYifh7s8I/AAAAAAAAAEU/ob1ppdnCRvs/s1600/wro_png24_compressed.png
Sau khi nén 21KB
Nén ảnh JPG
http://4.bp.blogspot.com/_-GHT-kgNuYI/TMMZclepYOI/AAAAAAAAAEc/OYQexlqAMlg/s1600/wro_jpg_origin.jpg
Ảnh gốc, 155KB
http://1.bp.blogspot.com/_-GHT-kgNuYI/TMMZm21n_DI/AAAAAAAAAEg/9Lj6zIApfCw/s1600/wro_jpg_photoshop.jpg
Sử dụng Photoshop nén 75%, 56.4KB
http://2.bp.blogspot.com/_-GHT-kgNuYI/TMMa422wdUI/AAAAAAAAAEo/a6Agj37ufd4/s1600/wro_jpg_compressed.jpg
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.
Với phần cuối này, mình xin trình bày về cách tối ưu hóa hình ảnh trong website. Hình ảnh là thành phần quan trọng, được sử dụng khá nhiều trong trang, chính vì vậy bạn cần phải cân nhắc khi sử dụng hình ảnh hợp lý. Tối ưu hình ảnh có những công đoạn sau:
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)
Với lỗi hình ảnh không tồn tại thì không có gì lo lắng, riêng lỗi hình ảnh không đúng định dạng thường do ta sơ xuất không kiểm tra giá trị từ CSDL
<img src="<%#Eval("Image")%>"/>
<img src="<?echo article->image?>"/>
Nếu trường Image là NULL 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 trang hiện tại chứ 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 cũng khá lâu. Nếu trong trang chứa 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 (http://linq2js.blogspot.com/2010/10/nhung-inh-dang-hinh-anh-thuong-uoc-su.html), 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 (http://www.google.com.vn/url?sa=t&source=web&cd=1&ved=0CBYQFjAA&url=http%3A%2F%2Fwww.microsoft.com%2Fdownloads%2Fd etails.aspx%3FFamilyId%3D333325fd-ae52-4e35-b531-508d977d32a6&rct=j&q=net%20framework%203.5&ei=1gzDTLbODY6YvAPSlJGmCA&usg=AFQjCNFumF6Ju-vfb8gPo_dMxPsx6a53Zw&cad=rja)). Tải ứng dụng Web Resource Optimize tại đây (http://www.mediafire.com/download.php?jyfidyyzcw6rh4j) (dung lượng ~ 600KB)
http://4.bp.blogspot.com/_-GHT-kgNuYI/TMMUOESOmFI/AAAAAAAAAEE/FZ-CI94Y0bI/s400/wro.jpg
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ượgn 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
Hiển thị đường dẫn tập tin mới tạo, đối với tập tin GIF sau khi chuyển thành PNG thì ở khung này sẽ hiển thị đường dẫn tập tin PNG mới chuyển.
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ý
Cách sử dụng phần mềm rất đơn giản, trước tiên ban cần chọn những tập tin cần xuất bản và sao chép ra một thư mục mới (không được sử dụng thư mục mã nguồn gốc), sau đó bạn nắm "kéo" toàn bộ thư mục hoặc tập tin vào cửa sổ ứng dụng, ngay lập tức ứng dụng sẽ chạy và quét những nội dung bạn đã kéo thả vào. Ứng dụng hỗ trợ những định dạng sau:
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ụ
Nén ảnh PNG-8
http://1.bp.blogspot.com/_-GHT-kgNuYI/TMMXGVSiFVI/AAAAAAAAAEI/Z2OIR2K_W8w/s1600/wro_gif_origin.gif
Ảnh GIF gốc, 2.35KB
http://4.bp.blogspot.com/_-GHT-kgNuYI/TMMXIWrywsI/AAAAAAAAAEQ/4P7W_QIEXjs/s1600/wro_png_photoshop.png
Dùng Photoshop chuyển thành PNG-8, 4.76KB
http://1.bp.blogspot.com/_-GHT-kgNuYI/TMMXHbJMzpI/AAAAAAAAAEM/0AlqDdF-AvY/s1600/wro_png_compressed.png
Dùng ứng dụng chuyển thành PNG-8, 1.8KB
Nén ảnh PNG-24
http://1.bp.blogspot.com/_-GHT-kgNuYI/TMMYjwnkhII/AAAAAAAAAEY/o8WyQTac4g8/s1600/wro_png24_origin.png
Ảnh gốc 23.5KB
http://4.bp.blogspot.com/_-GHT-kgNuYI/TMMYifh7s8I/AAAAAAAAAEU/ob1ppdnCRvs/s1600/wro_png24_compressed.png
Sau khi nén 21KB
Nén ảnh JPG
http://4.bp.blogspot.com/_-GHT-kgNuYI/TMMZclepYOI/AAAAAAAAAEc/OYQexlqAMlg/s1600/wro_jpg_origin.jpg
Ảnh gốc, 155KB
http://1.bp.blogspot.com/_-GHT-kgNuYI/TMMZm21n_DI/AAAAAAAAAEg/9Lj6zIApfCw/s1600/wro_jpg_photoshop.jpg
Sử dụng Photoshop nén 75%, 56.4KB
http://2.bp.blogspot.com/_-GHT-kgNuYI/TMMa422wdUI/AAAAAAAAAEo/a6Agj37ufd4/s1600/wro_jpg_compressed.jpg
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.