Sử dụng jQuery Picture plugin tối ưu hóa hình ảnh cho web mobile.

Như bài trước tôi có giới thiệu về jQuery Mobile - một bộ mã nguồn mở hỗ trợ xây dựng giao diện cho responsive rất chuyên nghiệp dành cho các thiết bị smartphone và máy tính bảng. Và việc tiếp theo các bạn sẽ phải quan tâm khi xây dựng được một web mobile ưng ý đó là tối ưu nó. Với các thiết bị di động thường hạn chế về tốc độ và dung lượng truy cập internet so với máy tính, vì vậy tối ưu dung lượng web sẽ là việc bạn sẽ cần làm tiếp theo. Ở bài này chúng ta sẽ sử dụng môt plugin rất nhỏ gọn là jQuery Picture, nó hỗ trợ chúng ta trong việc lựa chọn sử dụng hình ảnh theo tỷ lệ màn hình thiết bị một cách hợp lý nhất.

1. Responsive Image

- Đối với một giao diện được thiết kế responsive, thì việc hình ảnh (nội dung) trong đó cũng đáp ứng (responsive) theo là điều cần thiết để đảm bảo tính thẩm mỹ cho website của bạn. Bạn không thể để website hiện thị trong khung giao diện 400 x 800 pixcel mà kích thước hình ảnh lại lên đến 600 hay 800 pixcel được. Việc cần phải làm ở đây là đưa kích thước hình ảnh về trong khung giới hạn đó, và nếu không quan tâm đến dung lượng, bạn có thế giải quyết vấn đề này một cách rất đơn giản chỉ với vài dòng css.

.imgResponse img
            {
                max-width: 100% !important;
                height: auto;
                display: block;
            }

- Tuy nhiên khi dữ liệu web bạn nhiều lên, trên 1 trang hiện thị nhiều hình ảnh với kích thước lớn, bạn sẽ nhận thấy vấn đề cần phải giải quyết ở đây. Mặc dù bạn đã bắt hình ảnh co theo khung giao diện để đảm bảo tính thẩm mỹ cho web, hình ảnh kích thước 600 - 800 bạn co lại về 400 pixcel nhưng bản chất dung lượng không hề thay đổi? Với một website hiện thì từ 10 - 20 hình ảnh như vậy dung lượng có thể lên đến gần 2 Mb, điều này hoàn toàn không tốt cho một website dành cho thiết bị di động. Mỗi người dùng sử dụng 1 thiết bị smartphone khác nhau, và mỗi thiết bị lại có độ phân giải khác nhau, vậy làm cách nào để chúng ta lựa chọn được 1 hình ảnh có kích thước phù hợp nhất mà không phải "ép khung" như trên? jQuery Picture sẽ giúp chúng ta giải quyết vấn đề này.

2. jQuery Picture plugin

- Đây là một plugin rất nhỏ gọn, nó hỗ trợ bạn response hình ảnh cho website của bạn. Hoạt động theo nguyên tắc dựa trên tỷ lệ màn hình thiết bị để đưa ra lựa chọn hình ảnh tối ưu nhất. Hoạt động tốt trên hầu hết tất cả các trình duyệt.

Browser Status Description
Chrome Working Looks grand so it does.
Safari Working Also looks grand.
Mobile Safari Working Looks grand on iPhone, yet to test on the iPad.
Firefox 10 OSX Working Oh so grand.
Firefox 6 OSX Working Testing on a random old FF version.
IE9 Working I thought it wasn't gonna work but it does.
IE7/8 Working IE7 and 8 don't support media queries. They still load the appropriate images however as you can see in this demo. If you want to force media queries on these browsers however you can try Respond.

- Bạn có thể download plugin này tại đây.

3. Kết hợp jQuery Mobile plugin vào website asp.net

- Trong bài hướng dẫn này tôi hướng dẫn cách tích hợp plugin này vào website viết bằng Asp.Net. Sau khi download mã nguồn về, bạn giải nén và copy vào project của bạn. Ở phần header của trang *.aspx, bạn thêm đoạn mã sau

<script type="text/javascript" src="js/modernizr.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-picture-min.js"></script>
    <script type="text/javascript">
        $(function () {
            $('picture').picture();
        });
    </script>

- Chú ý đường dẫn đến các file javascript có thể khác ở project của bạn, hãy chỉnh lại cho đúng. Tiếp theo trong phần body của trang *.aspx, bạn thêm đoạn mã sau

<picture alt="" class="imgResponse">
            <source src="rsImg.aspx?img=~/images/IMG.png&w=400">
            <source src="rsImg.aspx?img=~/images/IMG.png&w=600" media="(min-width:600px)">
            <source src="rsImg.aspx?img=~/images/IMG.png&w=800" media="(min-width:800px)">
            <noscript>
                <img src="rsImg.aspx?img=~/images/IMG.png&w=800" alt="A Half Brained Idea">
            </noscript>
 </picture>

- Ở đoạn mã trên, phần source là phần khai báo danh sách các đường dẫn ảnh tương ứng với mỗi tỷ lệ màn hình người xem, jquery picture sẽ dựa vào tỷ lệ màn hình để lựa chọn hình ảnh cho hợp lý. Ở đây tôi chỉ xét cho 4 khoảng màn hình với các mốc 400, 600 và 800 pixcel.

- Các bạn có thể hiểu với màn hình có bề rộng nhỏ hơn 400px, jquery picture sẽ lựa chọn source đầu tiên, tương tự với các source còn lại. Vậy làm sao để có nhiều hình ảnh với tỷ lệ khác nhau như vậy? Chính rsImg.aspx làm điều đó giúp bạn, trang này tôi tạo ra để sinh ra các hình ảnh với kích thước khác nhau dựa vào 1 hình ảnh có sẵn. Mã nguồn của trang resize hình ảnh này như sau.

<%@ Page Language="C#" %>
<%@ Import Namespace="System.Drawing" %>
<script runat="server">
    protected void Page_Load(object sender, EventArgs e)
    {
        ResizeImg();
    }
    /// <summary>
    /// @create: khanhthuy46k2dhv@gmaill.com
    /// @date: 22/09/2013
    /// @declare: resize image from url
    /// </summary>
    protected void ResizeImg()
    {
        try
        {
            string NameImg = Request.QueryString["img"];
            String src = Server.MapPath(NameImg); //absolute location of source image
            //old size img
            System.Drawing.Image image = System.Drawing.Image.FromFile(src);
            int srcWidth = image.Width;
            int srcHeight = image.Height;
            //new size img
            int thumbWidth = Convert.ToInt32(Request.QueryString["w"]);
            int thumbHeight = (thumbWidth * srcHeight) / srcWidth;
            //create img
            Bitmap bmp = new Bitmap(thumbWidth, thumbHeight);
            System.Drawing.Graphics gr = System.Drawing.Graphics.FromImage(bmp);
            gr.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.HighQuality;
            gr.CompositingQuality = System.Drawing.Drawing2D.CompositingQuality.HighQuality;
            gr.InterpolationMode = System.Drawing.Drawing2D.InterpolationMode.High;
            System.Drawing.Rectangle rectDestination = new System.Drawing.Rectangle(0, 0, thumbWidth, thumbHeight);
            gr.DrawImage(image, rectDestination, 0, 0, srcWidth, srcHeight, GraphicsUnit.Pixel);
            Response.ContentType = "image/jpeg";
            Response.Clear();
            bmp.Save(Response.OutputStream, System.Drawing.Imaging.ImageFormat.Jpeg);
            bmp.Dispose();
            Response.Flush();
            Response.End();
            bmp.Dispose();
            image.Dispose();
        }
        catch (Exception ms)
        {
            Response.Write(ms.Message);
        }
    }
</script>

- Như vây là bạn đã kết hợp xong plugin jQuery Picture vào website của bạn rồi, bạn có thể xem demo tại đây để hiểu rõ hơn, hãy thay đổi kích thước trình duyệt trong phạm vị 400, 600 và 800 px để nhận thây sự thay đổi hình ảnh, hoặc xem kết quả sau khi áp dụng jQuery Picture vào web tại đây.

- Mã nguồn đầy đủ tôi đính kèm ở cuối bài viết, các bạn có thể download về để tiện tham khảo.

Download Source

Related Post


Sử dụng jQueryMobile để phát triển web cho thiết bị di động
Tuesday, September 17, 2013
jQuery Mobile là một bộ khung giao diện người dùng cảm ứng thân thiện, được xây dựng dựa trên jQuery Code và làm việc trên hấu hết trên các thiết bị điện thoại phổ biến, máy tính bảng và nền tảng máy tính để bàn.  
Tạo Accordion Menu đơn giản với CSS & jQuery
Monday, September 9, 2013
Accordion Menu hiện nay khá phổ biến với thiết kế web hiện tại, vì ngoài việc là một menu, nó có thể tùy biến để hiện thị nôi dung, hình ảnh một cách rất chuyên nghiệp... và rất tiết kiệm không gian khi hiển thị trên web. Hiện tại bạn chỉ cần gõ Accordion Menu là ra rất nhiều plugin, tuy nhiên bạn có thể xây dựng riêng cho mình một Accordion Menu một cách rất đơn giản và gọn nhẹ. Bài viết này sẽ hướng dẫn các bạn làm điều đó.
Search

Đăng ký nhận bài mới


Category

Blog Archive