[ad_1]
Nếu bạn nhìn quanh trang web, bạn sẽ thấy rất nhiều ví dụ về hình ảnh bị méo, bị pixel hoặc bị cắt bớt. Ngay cả trên các trang web nổi bật. Blog này giải thích làm thế nào bạn có thể tránh chúng và làm cho trang web của bạn trông đẹp và sắc nét.
Vì vậy, giả sử, bạn muốn tạo một trang web đẹp với một hình ảnh.
Nhưng bạn kết thúc với một trong những vấn đề sau:
- Hình ảnh bị bóp méo
- Hình ảnh bị cắt
- Hình ảnh pixelated
- Hình ảnh tải chậm
Chúng ta hãy đi qua từng màn hình bị lỗi này và xem cách bạn có thể khắc phục điều đó.
để hiển thị hình ảnh với kích thước cố định, trong một phần của trang web của bạn. Tổ chức gọn gàng với tất cả các nội dung khác. Chúng tôi sẽ gọi khu vực mà bạn muốn hiển thị hình ảnh của mình dưới dạng hộp chứa .
Bây giờ nếu tỷ lệ khung hình hình ảnh của bạn (giải thích sau) khớp chính xác với hộp đó, mọi thứ sẽ chơi đẹp. Nhưng tất cả đều thất bại, nếu nó không khớp.
Hình ảnh bị bóp méo
tỷ lệ khung hình của hình ảnh không khớp với hộp. Tỷ lệ khung hình là tỷ lệ giữa chiều rộng và chiều cao của hình ảnh. Ví dụ, nếu bạn cố gắng đặt một hình ảnh vuông vào một hộp hình chữ nhật, bạn nhất định sẽ thấy sự biến dạng. Bạn đã từng nghe nói về một cái chốt vuông trong một lỗ tròn!
Giải pháp
Giải pháp để tránh biến dạng là để hình ảnh chảy theo một hướng thay vì buộc nó phải đi tỷ lệ khung hình của hộp. Nếu bạn không chắc chắn về tỷ lệ khung hình của hình ảnh động, hãy giữ cho hộp của bạn linh hoạt để phù hợp với các tỷ lệ khung hình khác nhau. Có hai cách bạn có thể thực hiện việc này:
Giữ cố định một chiều và để nó tràn theo chiều thứ hai
Ví dụ: bạn có thể áp dụng các kiểu phù hợp cho hộp vào có chiều rộng cố định, đồng thời cho phép chiều cao tự động điều chỉnh. Sau đó, chiều cao hiển thị sẽ thay đổi và được tính khi đang bay từ chiều rộng cố định của hình ảnh.
Giữ một chiều cố định và để nó cắt theo hướng khác
Giả sử bạn muốn hộp của mình có chiều rộng và chiều cao cố định, nhưng tỷ lệ khung hình ảnh nguồn của bạn có thể thay đổi. Sau đó, bạn cũng có thể chọn cắt bớt hình ảnh theo hướng ngang hoặc dọc mà không để nó bị biến dạng để vừa với hộp. Bất kỳ phần nào của hình ảnh tràn vào hộp sẽ bị cắt bỏ trong trường hợp này.
Hình ảnh bị cắt hoặc tràn
Nếu bạn đã lựa chọn có ý thức như trên để cắt bớt hình ảnh, đó là tuyệt vời. Nhưng bạn cũng có thể nhận được những hình ảnh bị cắt xén hoặc tràn đầy bất ngờ vì những lý do khác.
Hình ảnh bị cắt bớt
Hình ảnh tràn
Hình ảnh bị cắt hoặc tràn thường xảy ra khi có sự cố với bố cục tổng thể của trang của bạn. Nó có thể xảy ra khi hộp hình ảnh của bạn ở dạng lỏng, nhưng các phần khác có định vị cố định.
Hãy sử dụng một ví dụ để minh họa điều đó. Giả sử hình ảnh của bạn ở đầu trang. Sau hình ảnh, bạn muốn để lại một khoảng trống 20px và sau đó hiển thị một số nội dung văn bản.
Bạn đã kiểm tra bố cục của mình với một hình ảnh có chiều cao 200px. Khi tính đến điều đó, bạn đã áp dụng vị trí trên cùng cố định của nội dung văn bản của mình ở mức 220px.
Tất cả đều trông ổn, cho đến khi sản xuất mà hình ảnh có thể thay đổi linh hoạt. Nếu hộp được tạo kiểu, nó sẽ cố gắng lấy chiều cao động để hiển thị hình ảnh mà không thay đổi tỷ lệ khung hình của nó.
Nhưng vì chúng tôi có một vị trí cố định cho nội dung văn bản ở trên 220px, hình ảnh sẽ hoặc cắt ngắn đột ngột phía trên nó, hoặc nó có thể tràn vào văn bản. Điều nào trong hai điều này xảy ra, sẽ phụ thuộc vào cách xác định kiểu dáng.
Giải pháp
Có thể tránh cắt xén hoặc tràn đột ngột nếu chúng ta giữ nguyên bố cục trang để được chất lỏng. Đối với các trang đáp ứng, chúng ta nên định vị tất cả các yếu tố liên quan đến nội dung liền kề. Và không liên quan đến chính trang đó.
Trong ví dụ trên, thay vì đặt nội dung văn bản 250px xuống từ đầu trang, chúng ta có thể có bố cục lỏng để văn bản hiển thị bên dưới hình ảnh bất kể nơi hình ảnh kết thúc. Một lề 20px ở giữa cũng có thể đảm bảo rằng chúng ta có khoảng cách dự định cần thiết giữa hai.
Pixelation
Pixelation xảy ra bất cứ khi nào chúng tôi cố gắng hiển thị hình ảnh nhỏ hơn trên chế độ xem lớn hơn. Giả sử hình ảnh gốc của bạn rộng 50px. Và bạn muốn hiển thị nó trên trang web của mình với chiều rộng 400px.
Trình duyệt sẽ cần kéo dài hình ảnh rộng 50px thành 400px, điều này sẽ dẫn đến pixel hoặc hình ảnh nổi hạt.
Giải pháp
Giải pháp cho hình ảnh pixelated hoặc hạt là khá đơn giản. Chúng tôi chỉ cần đảm bảo rằng chiều rộng hình ảnh gốc của chúng tôi là 400px hoặc rộng hơn. Nói cách khác, chúng ta nên luôn luôn sử dụng hình ảnh có độ phân giải cao hơn để tránh pixel.
Hiệu suất
Vậy tại sao không luôn luôn sử dụng hình ảnh có độ phân giải rất cao? Bởi vì điều này sẽ ảnh hưởng đến hiệu suất của trang web của bạn. Hình ảnh có độ phân giải cao hơn sẽ có kích thước lớn hơn và sẽ mất nhiều thời gian hơn để trình duyệt của bạn tải xuống hình ảnh từ internet.
Vì vậy, không sử dụng kích thước lớn hơn màn hình dự định để tránh chi phí hiệu suất.
Để tránh các vấn đề về pixel và hiệu suất, luôn luôn xem liệu bạn có thể có hình ảnh gốc ở cùng độ phân giải như màn hình đích hay không. Không nhỏ hơn. Hoặc lớn hơn nữa.
Tối ưu hóa cho nhiều độ phân giải
Có thể có tác dụng sửa đổi ảnh gốc thành độ phân giải dự định khác. Ngoài ra, đối với bố cục đáp ứng, đối với một số hình ảnh, bạn có thể có nhiều màn hình ở các độ phân giải khác nhau. Ví dụ: một kích thước nhỏ hơn cho điện thoại di động. Và kích thước lớn cho máy tính để bàn.
Nếu bạn giữ độ phân giải hình ảnh cho máy tính để bàn, thì đó là một chi phí lớn để tải hình ảnh lớn đó trên thiết bị di động. Bạn chắc chắn sẽ thấy thời gian tải tăng lên vì tốc độ mạng di động thường có xu hướng chậm hơn.
Giải pháp
Có những giải pháp khả dụng mà bạn có thể tận dụng. Ví dụ: bạn có thể sử dụng một công cụ nguồn mở từ điện toán đám mây (https://www.responsivebreakpoint.com/) để tạo hình ảnh ở các kích cỡ khác nhau. Công cụ tạo cũng tạo một thẻ hình ảnh HTML5 mà bạn có thể sao chép-dán vào mã của mình. Thuộc tính srcset của thẻ img được đặt để liệt kê các phiên bản hình ảnh và giá trị độ rộng theo các điểm dừng được chọn thông minh.
Các trình duyệt hiện đại xử lý thẻ img sau đó sẽ biết cách chọn phiên bản hình ảnh chính xác theo không gian có sẵn của hình ảnh trong bố trí web đáp ứng của bạn. Có thể tìm hiểu kỹ hơn về giải pháp điện toán đám mây để tìm nguồn cung ứng hình ảnh ở nhiều độ phân giải trên bài đăng trên blog này tại đây.
Source link: webdesignernews