Hướng dẫn các cách chỉnh kích thước ảnh trong HTML

Vì sao cần chỉnh kích thước ảnh trong HTML

Có bao giờ bạn xem một website nhưng lại cảm thấy khó chịu vì kích thước hình ảnh không như ý muốn không nhỉ? Do đó, cách chỉnh kích thước ảnh trong HTML được ứng dụng rất nhiều.

Lý do đầu tiên và quan trọng nhất là giúp nâng cao trải nghiệm của người dùng. Với một tỷ lệ ảnh phù hợp với màn hình thiết bị. Bạn có thể dễ dàng đọc tin tức cũng như xem các hình ảnh trên web. Không phải thực hiện quá nhiều thao tác vì ảnh to hoặc quá nhỏ. Cho nên, nó cũng phần nào tiết kiệm thời gian khi sử dụng website của bạn.

Một tỷ lệ ảnh cân đối trên HTML cũng sẽ giúp cho bạn cảm thấy thoải mái nhất. Nắm được đầy đủ các thông tin mà website đó muốn cung cấp. Và bạn cũng mang lại nhiều giá trị hữu ích, hơn là việc khó chịu vì size ảnh không như ý muốn.

Một số kích thước ảnh phổ biến trong HTML

Với công nghệ hiện đại ngày nay, khi thiết kế website. Các doanh nghiệp đã dùng các tính năng để giúp cho giao diện tương thích với mọi loại thiết bị. Nhưng vẫn có những trường hợp người dùng không thích size ảnh trên website. Họ muốn thay đổi phù hợp với mỹ quan của mình mong cầu. Do đó, cách chỉnh kích thước ảnh trong HTML được rất nhiều người quan tâm.

Dưới đây là một số kích thước ảnh phổ biến trong HTML:

• Kích thước slide hình ảnh xuất hiện ở trang chủ của website: 1360 x 540 pixel
• Kích thước hình ảnh trong mỗi bài viết (Chính là hình ảnh minh họa nội dung): 300 x 188 pixel
• Kích thước hình ảnh chi tiết (Chính là ảnh đại diện): 800 x 500 pixel
• Kích thước hình ảnh dành cho sản phẩm: 600 x 600 pixel
• Kích thước hình ảnh xuất hiện bên trong sản phẩm (Các hình ảnh minh họa cho sản phẩm): 300 x 400 pixel hoặc 600 x 800 pixel
• Kích thước ảnh dành cho thumbnail khi chia sẻ link web: 1200 x 630 pixel
• Kích thước ảnh thumbnail khi bài viết chia sẻ: 1200 x 630 pixel

Nếu áp dụng đúng kích thước này cho website, nó sẽ mang đến mỹ quan hoàn hảo nhất cho toàn bộ tổng thể. Không những giúp người đọc dễ dàng trải nghiệm, mà còn tăng sự chuyên nghiệp và hỗ trợ website hoạt động tốt hơn.

Dựa trên kích thước tiêu chuẩn này, bạn cũng có thể tăng thêm size gấp hai hoặc ba lần tỷ lệ này. Ngoài ra, bạn cũng có thể tự đặt các thông số theo ý thích, nhưng nó không đảm bảo tiêu chuẩn Google đặt ra. Hơn nữa, chắc chắn kích thước bạn mong muốn đã phù hợp với phần đa người truy cập.

Hướng dẫn cách chỉnh kích thước ảnh trong HTML

Dưới đây là cách chỉnh kích thước ảnh trong HTML, mà không làm thay đổi tỷ lệ của nó.

Cần backup cấu hình giao diện

Trước khi thay đổi bố cục và nội dung của website, bạn cần phải backup cấu hình giao diện. Vì điều này sẽ giúp bạn thể khôi phục lại giao diện website bạn đầu. Nếu chẳng may trong quá trình ửa chữa website có xảy ra lỗi hoặc không ứng ý với những thay đổi.

Để có thể backup cấu hình giao diện, bạn có thể truy cập vào mục quản trị website. Tìm đến phần “Cài đặt chung”, chọn mục “Sao lưu giao diện, cấu hình”. Ngay sau đó, hệ thống sẽ ao lưu giao diện cấu hình, bạn nhập tên fite vào ô tương ứng và hãy click “Sao lưu giao diện cấu hình”.

Khi đã backup câu hình giao diện xong, để chỉnh kích thước ảnh trong HTML, hãy thực hiện theo hai bước dưới đây. Nó khá đơn giản, ai cũng có thể làm được mà không cần sử dụng đến lập trình.

Bước 1

Đây là bước xác định khối chứa hình ảnh. Để xác định được khối chứa ảnh, bạn hãy click chuột phải vào hình ảnh và chọn mục kiểm tra. Hoặc có thể ấn phím f12 trên bàn phím máy tính. Khi đó, hệ thống sẽ hiển thị lên một màn hình có chứa những khối HTML của website. Và sau đó bạn ấn tổ hợp phím Ctrl + Shift + C trên bàn phím. Trực tiếp trỏ chuột vào khối chứa hình ảnh để có thể xác định đoạn HTML của khối đó.

Bước 2

Để có thể CSS kích thước mới cho khối HTML, bạn chỉ cần copy đoạn CSS cũ của khối đó và thay đổi kích thước mới vào. Và chèn thêm “!important” vào sau. Khi đó, bạn sẽ thấy kích thước của các khối trên website thay đổi. 

Hãy copy đoạn CSS vừa thay lại và truy cập “Cài đặt chung” ở phần trang quản trị, dán vào phần cấu hình CSS. Sau khi đã chèn được đoạn CSS vào phần Cấu hình CSS. Bạn hãy click vào lưu thay đổi và tiến hành load lại website để kiểm tra. 

Trên đây là những hướng dẫn của chúng tôi về chỉnh kích thước ảnh trong HTML, nó cũng rất đơn giản đúng không nào. Hy vọng với những thông tin chúng tôi chia sẻ, sẽ giúp bạn trải nghiệm website với kích thước hình ảnh và giao diện ưng ý nhất.