Tin Tức/Blog

Chọn bài viết

5 cách để tạo hình ảnh tuỳ chỉnh (resposive web)

05 Tháng 9 2013

Ethan Marcott, một trong những người đưa ra thuật ngữ "Web tuỳ chỉnh kích thước" (responsive web) đã tuyên bố trong một bài viết của mình rằng hình ảnh là công thức của responsive web. Vấn đề của hình ảnh co giãn là nó có thể đáp ứng trên nhiều kích thước trình duyệt, nhưng chất lượng hình ảnh được tải về không phụ thuộc vào phương tiện trình duyệt.

Đây là tin xấu cho những ai giới hạn dữ liệu mà không biết, và dĩ nhiên nó làm cho khả năng truyền tải chậm khi khả năng kết nối yếu. Đây cũng một trong những đề tài được thảo luận nhiều nhất giữa các nhà lập trình web. Sau đây là một vài kỹ thuật và công cụ khẩn cấp để khắc phục.

1. Thích ứng hoá hình ảnh/Adaptive Image

Adaptive Image là một đoạn mã PHP để nhận dạng kích thước màn hình và gửi hình ảnh phù hợp cho kích thước đó. Bạn không cần phải thay đổi lệnh <img>, nếu người dùng ít am hiểu thực ra cũng đáng sợ.


(Ảnh gốc: AdaptiveImage)

2. Hình tuỳ bến sử dụng Cookies

Keith Clark đã dùng cách này để tạo ảnh tuỳ biến với Cookies. Đây là kỹ thuật nhận diện kích thước màn hình bằng cách sử dụng JavaScript và thay đổi các kích thước của hình bằng PHP trước khi tải lên.

Tuy nhiên, kỹ thuật này có rất nhiều vấn đề và cần thử nghiệm trước. Bạn có thể tham khảo bài viết trên blog của Clark - Responsive Image Using Cookies.

3. Sencha.Io Src

Sencha là một cơ cấu (framework) phát triển di động cho phép chúng ta tạo những ứng dụng gần gũi với HTML, CSS và JavaScript. Nếu bạn thiết kế ứng dụng bằng Sencha, bạn có thể sử dụng API, Sencha.io Src, để thay đổi kích thước hình của bạn một cách thông minh dựa trên kích thước phương tiện được sử dụng.

API có gói tính năng cho phép linh động khi truy xuất. Chi tiết về kỹ thuật, bạn có thể tham khảo ở đây.


(Ảnh nguồn: Sencha)

4. HTML5

Được coi là tiêu chuẩn tương lai của hình ảnh tuỳ chỉnh. Thẻ mới <picture> được đưa ra cho phép chúng ta thiết lập các nguồn ảnh khác nhau, đồng thời quy định "điểm dừng" cho nó (theo kích thước phương tiện-ND), ví dụ:

  1. <picture id="images">
  2. <source media="(min-width: 45em)" srcset="large-1.jpg 1x, large-2.jpg 2x">
  3. <source media="(min-width: 18em)" srcset="med-1.jpg 1x, med-2.jpg 2x">
  4. </picture>

Tuy nhiên thẻ này vẫn chưa chính thức áp dụng, bạn cần sử dụng môt Polyfill gọi là Picture Fill.

Picture Fill

Picture Fill là một thư viện JavaScript nhỏ xíu được phát triển bởi Scott Jehl. Nó bắt chước thẻ <picture> và nằm trong thẻ <span>

 

  1. <span data-picture data-alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia">
  2. <span data-src="/small.jpg"></span>
  3. <span data-src="/medium.jpg" data-media="(min-width: 400px)"></span>
  4. </span>

 

Plugins

Nếu bạn sử dụng WordPress để tạo giao diện coi như bạn gặp may, có một vài plugin cung cấp hình ảnh tương tự như thẻ <picture>

Nếu bạn dùng Drupal, thì Picture cũng tương tự.

5. Focal Point

Focal Point là framework cho phép người lập trình “xén” hình và điều khiển vị trí hình ảnh trong thiết kế tuỳ chỉnh. Kỹ thuật này sử dụng CSS; người làm chỉ đơn giản thêm các định dạng (class) trong các thẻ có chứa hình.

Đáng chú ý là mẹo này là che phần tràn, không phải xén hình thật sự, tức là chỉ có 1 kích thước hình khi tải về. Thêm nữa, mẹo này chỉ hoạt động trong trường hợp thẻ hình ảnh nằm trong thẻ khác.


Ảnh nguồn: Noupe

 

 

Lời kết

Như đã nêu, không có một tiêu chuẩn cụ thể nào để giải quyết hoàn toàn các vấn đề. Các công cụ và kỹ thuật được liệt kê ở trên chỉ là giải pháp, cái nào cũng có ưu nhược điểm riêng của nó.

Cũng không có gì chắc chắn là thẻ <picture> sẽ trở thành giải pháp cụ thể đề xuất trong tương lai. Vì vậy, cho đến giờ thì chúng ta cũng còn kẹt với Hình tuỳ chỉnh

 

Tác giả

Tin Tức/Blog

Ngân hàng Shinhan - giới thiệu chức năng đăng ký vay online Hướng dẫn phân giải DPI trong thiết kế digital (p.1) Tiêu chuẩn vẻ đẹp của mỗi quốc gia thông qua Photoshop Tăng cường trải nghiệm thanh toán với các hiệu ứng động Điều sẽ xảy ra với dữ liệu của chúng ta khi chúng ta qua đời? Giới thiệu website Suboi Entertainment 13 ebook miễn phí dành cho quản trị Social Marketing Vì sao bạn cần chiến lược Digital marketing? P3 Những thiết kế sử dụng Typography sáng tạo Vì sao bạn cần chiến lược Digital marketing? P2 Vì sao bạn cần chiến lược Digital marketing? P1 Sự quan trọng của cảm xúc trong thiết kế Số liệu người dùng trực tuyến đầu năm 2014 Tổng quan về thiết kế trải nghiệm người dùng (P2) Tổng quan về thiết kế trải nghiệm người dùng (P1) Làm gì với mỗi visit ở Website bán hàng? Thiết kế Web có cần hiểu lập trình? Bạn và khách hàng: Ai quan tâm đến thiết kế nhiều hơn? Website NƯỚC 2030 chính thức ra mắt 10 xu hướng thiết kế web mà tôi không muốn thấy ở năm 2014 Tại sao trong in ấn lại dùng hệ màu CMYK? 9 yếu tố của một website thành công Một số cách để nén File PDF và PSD hiệu quả Sơ lược về chiếc phong bì. Những Poster "Âm Dương" độc đáo Túi giấy: tấm Billboard di động 10 xu hướng thiết kế Web 2013 Thiếu chuẩn bị, website là sự phí phạm Marketing mobile 2013 Top 10 thuật ngữ hay dùng trong thiết kế Web Ý tưởng độc đáo của Moto Corsa WebP: Định dạng ảnh mới của Google. Sáng tạo từ ảo giác không gian thực Creative Brief: Định hướng ban đầu cho phát triển dự án. Cách làm một logo phong cách hipster Các loại hình công ty quảng cáo Việt Nam Google Web Designer Final Artwork - những điều cần biết Quá trình in offset Google ra mắt Chim ruồi. Bing.com tiết lộ nhận diện và website mới Thông báo: Doda giới thiệu website mới Facebook Hashtags: hoạt động và sử dụng đúng cách Những điều cần biết khi thiết kế danh thiếp Ngôn ngữ của màu sắc