Bạn đã nghe nói rằng Web đã trở nên trực quan hơn và hình ảnh tuyệt vời trong trang web doanh nghiệp của bạn rất quan trọng.
Nhưng những hình ảnh đó có thể là tai họa của khách truy cập trang web của bạn. Hình ảnh chiếm 1 MB trong số 1,7 MB trang web trung bình chứa.
Điều này có thể không có nhiều vấn đề đối với khách truy cập của bạn trên máy tính để bàn sử dụng kết nối Internet tốc độ cao. Tuy nhiên, nếu bạn thấy hoặc muốn thấy lưu lượng truy cập tăng từ khách truy cập trên thiết bị di động, những hình ảnh đó có thể là một vấn đề. Các trang web nặng hình ảnh có thể mất nhiều thời gian để tải xuống. Khách truy cập bị thất vọng và rời khỏi trang web của bạn.
$config[code] not foundBạn có thể đã thực hiện một thiết kế Web đáp ứng, suy nghĩ sẽ giải quyết tất cả các vấn đề di động của bạn. Và nó đúng là một thiết kế Web đáp ứng giải quyết một số vấn đề. Nó tự động sắp xếp và hiển thị các yếu tố trang web của bạn để được xem trên màn hình di động nhỏ hơn, hẹp hơn.
Nhưng thiết kế Web đáp ứng không phải là câu trả lời cho tất cả mọi thứ. Nó không nhất thiết phải giải quyết vấn đề tải hình ảnh. Ngay cả với thiết kế đáp ứng, nhiều lần những hình ảnh nặng đó vẫn được tải xuống. Như chuyên gia về hiệu suất Web, Yoav Weiss đã chỉ ra một cách ngắn gọn trên trang web Opera:
Thiết kế web Responsive RWD đã kết hợp các khả năng trình duyệt mới và các kỹ thuật CSS để tạo các trang web thích ứng với thiết bị hiển thị chúng và trông thật lý tưởng ở mọi nơi. Điều đó cho phép các nhà phát triển ngừng lo lắng về việc phát hiện thiết bị không đáng tin cậy và nghĩ về trang web của họ về kích thước khung nhìn.
Nhưng, mặc dù các trang web RWD trông khác nhau trên mỗi thiết bị, bên dưới, hầu hết chúng vẫn tiếp tục tải xuống cùng một tài nguyên cho tất cả các thiết bị.
Cái mới
Nếu bạn không biết gì về mã HTML, thì một định nghĩa phi kỹ thuật là: đó là một ngôn ngữ đặc biệt. Khi được sử dụng đằng sau hậu trường trong mã trang web của bạn, ngôn ngữ này sẽ đưa ra hướng dẫn về cách trình duyệt sẽ hiển thị văn bản và hình ảnh. Phần tử Ảnh mới là một loại ngôn ngữ đánh dấu HTML. Nó được viết như thế này (theo Nhóm Cộng đồng Hình ảnh Phản hồi): Yếu tố hình ảnh là về phản ứng hình ảnh, không đáp ứng thiết kế. Đối với những người kinh doanh phi kỹ thuật, sự khác biệt đó có vẻ nhỏ. Nhưng khi nói đến hiệu suất của trang web của bạn trên các thiết bị di động, nó có thể là đáng kể. Theo báo cáo của ArsTechnica, yếu tố đánh dấu mới giải quyết các vấn đề gây ra bởi hình ảnh có thể nhìn thấy trên màn hình kích thước đầy đủ - hình ảnh không thể dịch tốt cho thiết bị di động. Các
Khi trình duyệt gặp một phần tử Ảnh, trước tiên, nó sẽ đánh giá bất kỳ quy tắc nào mà nhà phát triển Web có thể chỉ định. *** Sau đó, sau khi đánh giá các quy tắc khác nhau, trình duyệt chọn hình ảnh tốt nhất dựa trên tiêu chí riêng của nó. Đây là một tính năng hay khác vì tiêu chí của trình duyệt có thể bao gồm các cài đặt của bạn. Ví dụ: các trình duyệt trong tương lai có thể cung cấp tùy chọn ngăn hình ảnh có độ phân giải cao tải qua 3G, bất kể mọi thành phần Ảnh trên trang có thể nói gì. Khi trình duyệt biết hình ảnh nào là lựa chọn tốt nhất, nó thực sự tải và hiển thị hình ảnh đó trong một phần tử img cũ. Những gì xảy ra là Ảnh bao bọc một thẻ img. Nếu trình duyệt quá cũ để biết phải làm gì Lúc đầu, không phải tất cả các nhà phát triển đều chấp nhận yếu tố Ảnh mới. Câu chuyện của Ars Technica, phác thảo quá trình mà các nhà lãnh đạo trong cộng đồng phát triển Web đã trải qua để đi đến điểm mà $config[code] not found Nhưng vấn đề hiện đã được giải quyết, với yếu tố HTML hình ảnh mới được thông qua. Các
Là người kinh doanh, một điều quan trọng cần biết là Việc triển khai phần tử Picture HTML cho hình ảnh là điều cần thảo luận với nhà phát triển Web của bạn. Những người có đầu óc kỹ thuật và những người tự làm có thể vào đây để tìm hiểu cách sử dụng yếu tố Ảnh. Nó là một bài viết xuất sắc của Scott Gilbertson. Hãy thoải mái thực hiện
Hình ảnh: Shutterstock; RICG Yếu tố hình ảnh HTML là gì?
Những điểm chính về
