Cách làm cho hình ảnh thích ứng với các ví dụ – cách làm cho hình ảnh thân thiện với thiết bị di động

Tìm hiểu cách làm cho hình ảnh đáp ứng trên trang web của bạn. Đọc hướng dẫn để hiểu cách tạo hình nền đáp ứng và tối ưu hóa chúng.

Bạn đang xem : cách làm cho hình ảnh thân thiện với thiết bị di động

Mục lục

Bạn có biết?

Các số liệu thống kê trên tiết lộ điều gì không còn nghi ngờ gì nữa?

Mọi trang web muốn có cơ hội thành công cần phải triển khai thiết kế đáp ứng .

Tuy nhiên, do hầu hết các trang web hiện đại có thiết kế nhiều lớp, phong phú kết hợp văn bản, hình ảnh và video để thu hút, giao tiếp và giữ chân người dùng, việc triển khai thiết kế đáp ứng có thể không quá dễ dàng.

Sử dụng hình ảnh phù hợp là yếu tố không thể thiếu để tạo ra một thiết kế trang web phù hợp và đẹp mắt về mặt thẩm mỹ. Không ai muốn đọc lướt qua các khối văn bản không có hình ảnh ở giữa. Hình ảnh mô tả, làm rõ và làm cho thông tin dễ tiếp cận và dễ hiểu hơn. Do đó, bất kể thiết bị nào được truy cập trang web, hình ảnh phải hiển thị chính xác và hiển thị rõ ràng. Nói cách khác, nhà phát triển web phải làm cho hình ảnh đáp ứng.

Bài viết này sẽ khám phá và mô tả quy trình mà nhà phát triển web có thể tạo hình ảnh đáp ứng.

Hình ảnh đáp ứng là gì. ?

Trước khi tự hỏi làm thế nào để tạo hình ảnh phản hồi, bạn nên dành thời gian để hiểu hình ảnh phản hồi là gì.

Rất đơn giản, hình ảnh phản hồi sẽ phản hồi và điều chỉnh theo kích thước màn hình khác nhau. Khi sử dụng trong thế giới thực, điều đó có nghĩa là hình ảnh phải có các thuộc tính / khả năng sau:

  • Hình ảnh phải có thể hiển thị sắc nét ở các tỷ lệ pixel-thiết bị khác nhau. Điều đó có nghĩa là màn hình có độ phân giải cao hiển thị hình ảnh có độ phân giải cao, nhưng màn hình có độ phân giải thấp sẽ không phải xử lý nhiều pixel hơn.
  • Trong trường hợp bố cục linh hoạt (đáp ứng), hình ảnh cần phải kéo dài hoặc để phù hợp với các thay đổi của nó.
  • Đối với cả hai trường hợp trên, hình ảnh sẽ phải được tạo ra ở nhiều độ phân giải để chúng có thể thay đổi tỷ lệ phù hợp.

Các trình duyệt khác nhau hỗ trợ các định dạng hình ảnh đa dạng. Các định dạng mới hơn như WebP có thể không tương thích với mọi trình duyệt, trong trường hợp đó, hình ảnh cũng sẽ phải được cung cấp ở định dạng JPEG.

Nên đọc : Cách kiểm tra trang web ở các kích thước màn hình khác nhau

Cách tạo hình ảnh phản hồi

Bắt đầu với câu hỏi “làm thế nào để tạo hình ảnh phản hồi trong CSS?” Khi một hình ảnh được tải lên một trang web, nó có chiều cao và chiều rộng mặc định. Chúng cần được thay đổi bằng CSS.

Chỉ cần gán một giá trị mới cho thuộc tính chiều rộng của hình ảnh. Do đó, chiều cao của hình ảnh sẽ tự điều chỉnh cho phù hợp. Đảm bảo sử dụng các đơn vị tương đối (như phần trăm) cho thuộc tính width thay vì các đơn vị tuyệt đối như pixel.

Ví dụ:

 img {
chiều rộng: 800px;
} 

Đoạn mã trên đặt chiều rộng cố định là 800px. Hình ảnh này sẽ không phản hồi vì đơn vị là tuyệt đối và sẽ không tự điều chỉnh. Tuy nhiên, hãy xem mã bên dưới:

 img {
chiều rộng: 70%;
} 

Với đơn vị tương đối như 70%, hình ảnh sẽ linh hoạt và tự thay đổi kích thước, bất kể kích thước màn hình.

Kiểm tra khả năng phản hồi

Sử dụng truy vấn phương tiện

Truy vấn phương tiện hoặc điểm ngắt CSS là các điểm được xác định trong mã . Nội dung trang web đáp ứng những điểm này và tự điều chỉnh kích thước màn hình để hiển thị bố cục chính xác. Với các điểm ngắt CSS tại chỗ, nội dung trang web sẽ tự căn chỉnh với kích thước màn hình và tự hiển thị theo cách dễ nhìn và tạo điều kiện cho người xem trực quan.

Tìm hiểu mọi thứ bạn cần biết về CSS và Media Query Breakpoints .

Rõ ràng, hình ảnh đáp ứng yêu cầu sử dụng các truy vấn phương tiện để tự thay đổi kích thước theo kích thước màn hình thiết bị.

< p> Trong ví dụ dưới đây, hình ảnh có chiều rộng 50% cho bất kỳ màn hình nào. Để làm cho chúng tối đa hóa đến kích thước đầy đủ cho bất kỳ thiết bị di động nào, hãy sử dụng truy vấn phương tiện:

 @ media only screen and (max-width: 480px) {
img {
chiều rộng: 100%;
}
} 

Nguồn

Nhờ truy vấn phương tiện ở trên, bất kỳ thiết bị nào có kích thước màn hình nhỏ hơn 480px sẽ có hình ảnh ở kích thước đầy đủ dọc theo chiều rộng của màn hình.

Hình ảnh trên Bố cục Linh hoạt

Tạo hình ảnh đáp ứng trên một bố cục linh hoạt sẽ khó hơn một chút. Trên hầu hết các trang web, hình ảnh là yếu tố nặng nhất và cần phải bắt đầu (và kết thúc) tải trước bất kỳ thứ gì khác. Do đó, các trình duyệt bắt đầu bằng cách quét HTML của trang web để tìm URL hình ảnh và tải chúng. Điều này xảy ra trước khi trình duyệt xây dựng DOM, đặt bố cục lại với nhau hoặc tải CSS bên ngoài.

Do đó, trình duyệt cần biết nguồn hình ảnh ngay cả trước khi họ phát hiện ra kích thước hiển thị của hình ảnh.

< p> Hãy nhớ rằng trình duyệt tự động biết các môi trường mà tất cả các phần tử web đang hiển thị: kích thước khung nhìn, độ phân giải màn hình của người dùng, v.v. Dữ liệu này được sử dụng để xác định các truy vấn phương tiện. Do đó, để điều chỉnh hình ảnh theo bố cục linh hoạt, các nhà phát triển cũng có thể xác định kích thước hiển thị của hình ảnh cho trình duyệt.

Hãy cho trình duyệt biết cần có bao nhiêu pixel bằng cách sử dụng kích thước thuộc tính. Sử dụng bộ mô tả w trong srcset để truyền đạt số lượng pixel trong mỗi nguồn hình ảnh. Được trang bị dữ liệu này, trình duyệt có thể chọn nguồn hình ảnh nhỏ nhất cho phép hình ảnh hiển thị trong khung nhìn của nó.

Hãy lấy một ví dụ trong đó có ba kích thước hình ảnh:

  • large.jpg (1024 × 768 điểm ảnh)
  • medium.jpg (640 × 480 điểm ảnh)
  • small.jpg (320 × 240 điểm ảnh)
  • < / ul>

    Những hình ảnh này phải được đặt trong một lưới linh hoạt – lưới bắt đầu từ một cột duy nhất, nhưng trong các chế độ xem lớn hơn, chuyển đổi thành ba cột:

     & lt; img srcset = "large.jpg 1024w,
    medium.jpg 640w,
    small.jpg 320w "
    kích thước = "(chiều rộng tối thiểu: 36em) 33,3vw,
    100vw "
    src = "small.jpg" 

    Nguồn

    Mã sử ​​dụng srcset với w bộ mô tả đề cập đến nguồn hình ảnh – thông báo chiều rộng pixel thực tế của tệp được tham chiếu tới trình duyệt.

    Trong ví dụ này, chỉ chiều rộng hình ảnh được xác định chứ không phải chiều cao. Trong trường hợp cụ thể này, hình ảnh trong bố cục có chiều rộng được CSS thiết lập rõ ràng nhưng không có chiều cao của chúng. Hầu hết các hình ảnh đáp ứng có xu hướng giống nhau, vì vậy điều này giúp mọi thứ trở nên đơn giản.

    Trong khi bộ mô tả w xác định số lượng pixel cho mỗi nguồn hình ảnh, thuộc tính kích thước < / strong> liên quan đến trình duyệt cần bao nhiêu pixel bằng cách xác định chiều rộng hiển thị cuối cùng của hình ảnh. Nó cung cấp cho trình duyệt một số dữ liệu về bố cục của trang ngay từ đầu để giúp nó chọn nguồn hình ảnh trước khi hiển thị mã CSS của trang.

    Hiểu thuộc tính max-width

    Để làm cho hình ảnh đáp ứng, các nhà phát triển và nhà thiết kế thường sử dụng thuộc tính max-width. Nó xác định chiều rộng tối đa cho một phần tử; không phần tử nào có thể rộng hơn giá trị chiều rộng tối đa của nó.

    Điều đó có nghĩa là nếu hình ảnh có chiều rộng tối đa là 800px và đang được hiển thị trên kích thước màn hình chỉ 360px, thiết bị sẽ không hiển thị hình ảnh hoàn chỉnh do thiếu dung lượng.

     img {
    chiều rộng tối đa: 100%;
    chiều rộng: 800px; // giả sử đây là kích thước mặc định
    } 

    Bằng cách xác định chiều rộng tối đa và đặt thành 100%, hình ảnh 800px sẽ thu nhỏ để vừa với không gian trên thiết bị 360px. Sử dụng đơn vị tương đối (như hình trên) sẽ làm cho hình ảnh linh hoạt trên bất kỳ thiết bị nào nhỏ hơn 800px.

    Tuy nhiên, nếu kích thước màn hình lớn hơn 800px, hình ảnh sẽ không thể mở rộng để vừa bằng. Điều này ảnh hưởng xấu đến khả năng đáp ứng của nó. Đây là nơi mà thuộc tính chiều rộng tối đa bị thiếu.

    Bạn muốn chạy Kiểm tra hình ảnh đáp ứng nhanh trên Trang web của mình? Chạy ngay bây giờ .

    Hình ảnh cho các trình duyệt không hỗ trợ

    Giả sử định dạng của một hình ảnh cụ thể không tương thích với các trình duyệt. Điều này thường bật lên khi các trình duyệt cũ hơn phải hiển thị hình ảnh ở các định dạng mới hơn. Trong những trường hợp như vậy, hãy sử dụng mã bên dưới:

     & lt; picture & gt;
    & lt; source type = "image / svg" src = "logo.svg" / & gt;
    & lt; source type = "image / png" src = "logo.png" / & gt;
    & lt; img src = "logo.gif" alt = "RadWolf, Inc." / & gt;
    & lt; / picture & gt; 

    Nguồn

    Lưu ý : Thay thế alt = “RadWolf, Inc.” với tên hình ảnh có liên quan.

    Trong trường hợp trình duyệt không thể giải mã loại phương tiện image / svg , trình duyệt sẽ bỏ qua nguồn đầu tiên. Nếu nó không thể hoạt động với image / png , thì nó sẽ sử dụng tệp .gif .

    Cách tạo hình nền responsive

    Dưới đây là cách tạo hình nền đáp ứng bằng CSS:

    • Sử dụng thuộc tính kích thước nền để bao gồm chế độ xem. Cung cấp cho thuộc tính này một giá trị cover sẽ yêu cầu trình duyệt chia tỷ lệ chiều cao và chiều rộng của hình nền để chúng luôn bằng hoặc lớn hơn chiều cao / chiều rộng của khung nhìn thiết bị.
    • Sử dụng truy vấn phương tiện để cung cấp các phiên bản thu nhỏ của hình nền cho màn hình thiết bị di động. Đây là một bước tùy chọn; với việc sử dụng rộng rãi các thiết bị di động, nó nên được đưa vào quy trình.

    Ví dụ:

     & lt;! doctype html & gt;
    & lt; html & gt;
    & lt; body & gt;
    ... Nội dung của bạn ở đây ...
    & lt; / body & gt;
    & lt; / html & gt; 

    Nguồn

    Hình nền đi vào phần thân để luôn bao phủ toàn bộ khung nhìn của trình duyệt.

    Lưu ý rằng mã cũng sẽ hoạt động hoàn hảo trên các phần tử cấp khối (một div hoặc biểu mẫu). Miễn là chiều cao và chiều rộng của vùng chứa mức khối là linh hoạt, hình nền sẽ chia tỷ lệ để bao phủ toàn bộ vùng chứa.

    Bây giờ, hãy khai báo quy tắc kiểu cho phần tử body với:

     body {
    / * Vị trí của hình ảnh * /
    background-image: url (images / background-photo.jpg);
    
    / * Hình nền luôn được căn giữa theo chiều dọc và chiều ngang * /
    background-position: trung tâm trung tâm;
    
    / * Hình nền không xếp * /
    background-repeat: không lặp lại;
    
    / * Hình nền được cố định trong khung nhìn để nó không di chuyển khi
    chiều cao của nội dung lớn hơn chiều cao của hình ảnh * /
    background-attachment: cố định;
    
    / * Đây là những gì làm cho hình nền dựa trên tỷ lệ bán lại
    về kích thước của thùng chứa * /
    background-size: bìa;
    
    / * Đặt màu nền sẽ được hiển thị
    trong khi hình nền đang tải * /
    màu nền: # 464646;
    } 

    Nguồn

    Một vài lưu ý về mã

    Đặc biệt chú ý đến:

     background-size: cover; 

    Cặp thuộc tính / giá trị này hướng dẫn trình duyệt điều chỉnh hình nền sao cho chiều cao và chiều rộng bằng chiều cao và chiều rộng của phần tử; ở đây, phần tử body.

    Tuy nhiên, nếu hình nền nhỏ hơn phần thân, trình duyệt sẽ mở rộng kích thước hình ảnh theo chương trình. Việc phóng to một hình ảnh vượt quá kích thước tự nhiên của nó thường khiến nó bị giảm chất lượng. Tình huống này thường xuất hiện trên màn hình có độ phân giải cao hoặc trên các trang có quá nhiều nội dung.

    Để tránh điều này, hãy cố gắng sử dụng hình ảnh đủ lớn cho hầu hết các kích thước và độ phân giải màn hình.

    Bây giờ, hãy xem:

     background-position: center center; 

    Điều này được sử dụng để đảm bảo rằng hình nền luôn ở giữa khung nhìn. < / p>

    Tiếp theo, hãy xem:

     background-attachment: fixed; 

    Một thanh cuộn xuất hiện trong trường hợp chiều cao nội dung lớn hơn của khung nhìn có thể nhìn thấy. Nhưng ảnh nền phải giữ nguyên vị trí của nó ngay cả khi người dùng cuộn xuống. Đặt thuộc tính tệp đính kèm nền (như đã thực hiện ở trên) đảm bảo điều này.

    Kiểm tra khả năng phản hồi của hình ảnh trên thiết bị thực

    Định hình và kết hợp mã thích hợp để triển khai hình ảnh đáp ứng cho tất cả các thiết bị có thể không phải là con người có thể. Tùy chọn tốt nhất là triển khai mã, truy vấn phương tiện và điểm ngắt phù hợp với sở thích thiết bị của đối tượng mục tiêu. Ngoài ra, việc giữ cho hình ảnh có thể điều chỉnh và thích ứng với sự thay đổi cũng sẽ giúp hoàn thành nhiều hơn trong dài hạn với mức độ nỗ lực hợp lý.

    Sau khi hình ảnh được hiển thị đáp ứng, hãy nhớ kiểm tra chúng trên các thiết bị thực để kiểm tra khả năng phản hồi của chúng. Tùy thuộc vào số lượng kích thước màn hình được đề cập, việc kiểm tra thiết kế đáp ứng dễ dàng nhất khi sử dụng đám mây thiết bị thực .

    BrowserStack cung cấp hơn 3000 trình duyệt và thiết bị thực để thử nghiệm trình duyệt chéo theo yêu cầu, tức thì trên đám mây. Chỉ cần đăng ký miễn phí, chọn trong số các thiết bị mới nhất, điều hướng đến trang web có liên quan và bắt đầu xác minh thiết kế đáp ứng của nó .

    Dùng thử BrowserStack miễn phí

    Trình kiểm tra thiết kế đáp ứng của BrowserStack cung cấp một cách dễ dàng cách xác minh thiết kế đáp ứng. Chỉ cần nhập URL, nhấp vào Kiểm tra và nhận chế độ xem trang web trên nhiều thiết bị thực, cả máy tính để bàn và thiết bị di động. Đảm bảo rằng các điểm ngắt trong thiết kế đáp ứng của bạn được đặt chính xác và tạo điều kiện cho họ trải nghiệm người dùng hài lòng nhất có thể.


Xem thêm những thông tin liên quan đến chủ đề cách làm cho hình ảnh thân thiện với thiết bị di động

Công cụ Kiểm tra tính thân thiện với thiết bị di động

  • Tác giả: Kenh Kien Thuc
  • Ngày đăng: 2018-05-20
  • Đánh giá: 4 ⭐ ( 5234 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Công cụ Kiểm tra tính thân thiện với thiết bị di động
    Đăng ký kênh [MIỄN PHÍ]: https://goo.gl/vfXi5B
    ▶ Hướng dẫn sử dụng Camtasia 9: https://goo.gl/gs2ByV
    ▶ Sáng tạo video với Camtasia: https://goo.gl/P6bAq4
    ▶ Kiếm tiền YouTube 2018: https://goo.gl/QBUosu
    ▶ Kiếm tiền YouTube 2017: https://goo.gl/EmaKSJ
    ▶ Hướng dẫn sử dụng TubeBuddy: https://goo.gl/ewJrHk
    ▶ Kiếm Tiền Từ LiveStream YouTube: https://goo.gl/LHX7Qj
    ▶ Thủ Thuật YouTube 102: https://goo.gl/QXhebN
    ▶ Biên tập video bằng Sony Vegas Pro: https://goo.gl/QwPxAG
    ▶ Tự tạo Website/Blog chuyên nghiệp: https://goo.gl/12EPjx
    ▶ Thủ thuật Máy tính: https://goo.gl/GKmZXQ

    Fanpage: https://www.facebook.com/KenhKienThuc.net

    Hãy nhấn nút Đăng Ký (Subscribe) https://goo.gl/vfXi5B để nhận những Video mới nhất của chúng tôi, nhấn Like để ủng hộ tác giả và phát triển kênh. Chúng tôi vô cùng biết ơn việc làm đó của các bạn!

10 mẹo giúp website thân thiện với thiết bị di động

  • Tác giả: vnexpress.net
  • Đánh giá: 3 ⭐ ( 4692 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Website của bạn sẽ lỗi thời nếu không thân thiện với các thiết bị di động khi ngày càng nhiều người dùng Internet qua smatphone, máy tính bảng. – VnExpress

[2021] Thân thiện thiết bị di động không có nghĩa là ưu tiên lập chỉ mục thiết bị di động

  • Tác giả: seothongminh.net
  • Đánh giá: 5 ⭐ ( 5723 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Thân thiện thiết bị di động không giống như sẵn sàng cho việc lập chỉ mục ưu tiên thiết bị di động. Đây là lời khuyên của John Mueller đến từ Google

7 cách cải thiện hiệu suất website trên thiết bị di động ĐƠN GIẢN

  • Tác giả: blog.hostvn.net
  • Đánh giá: 3 ⭐ ( 8171 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Tối ưu hóa website trên thiết bị di động của bạn không chỉ là tối ưu hóa công cụ tìm kiếm (SEO) mà còn đảm bảo nội dung của bạn có thể chấp nhận được trên thiết bị di động. Như vậy có thể thấy ngoài việc tối ưu website trên máy tính thì quan tâm đến thiết bị di động cũng khá quan trọng. Dưới đây là 7 cách cải thiện hiệu suất website trên thiết bị di động mà HOSTVN sẽ chia sẻ với các bạn.

10 mẹo giúp website thân thiện với thiết bị di động

  • Tác giả: cantho24h.com.vn
  • Đánh giá: 4 ⭐ ( 2994 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Website của bạn sẽ lỗi thời nếu không thân thiện với các thiết bị di động khi ngày càng nhiều người dùng Internet qua smatphone, máy tính bảng.

Thiết kế ứng dụng di động thân thiện với người dùng

  • Tác giả: skyweb.com.vn
  • Đánh giá: 5 ⭐ ( 9482 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Việc sử dụng công nghệ di động và số lượng người dùng không ngừng tăng lên. Trải nghiệm của người dùng di động bao gồm cách tiếp cận và hiển thị của người dùng trước khi tương tác với thiết bị di động của họ. Nó bao gồm trình duyệt web và các ứng dụng trên tất cả các loại thiết bị di động.

Thân thiện với thiết bị di động nghĩa là như thế nào?

  • Tác giả: gobranding.com.vn
  • Đánh giá: 4 ⭐ ( 3836 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Thân thiện với thiết bị di động nghĩa là như thế nào? – Công ty SEO GOBRANDING. Liên Hệ Nhận Tư Vấn

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

Xem Thêm  Ví dụ về mã liên kết nút HTML - Cách tạo siêu liên kết HTML bằng thuộc tính HREF trên thẻ - thêm liên kết vào nút html