Cách thay đổi kích thước hình ảnh trong HTML và tăng quy mô thiết kế web của bạn
Chúng tôi không thể nhấn mạnh đủ tầm quan trọng của đa phương tiện như hình ảnh, đồ họa thông tin và video trong quá trình phát triển. Tuy nhiên, kích thước của hình ảnh ảnh hưởng đến hiệu suất tổng thể của ứng dụng và khả năng sử dụng của nó.
HTML (ngôn ngữ đánh dấu siêu văn bản) là ngôn ngữ được sử dụng nhiều nhất để thiết kế và tạo cấu trúc của trang web. Là nhà phát triển, bạn có thể thêm hình ảnh sản phẩm, biểu tượng và đồ họa khác vào tài liệu HTML của mình để cải thiện trải nghiệm người dùng và sự hấp dẫn trực quan.
Tuy nhiên, nếu bạn cần ứng dụng hoạt động tối ưu, bạn phải thay đổi kích thước và tối ưu hóa hình ảnh của mình. Trong bài viết này, tôi sẽ giải thích tầm quan trọng của việc thay đổi kích thước hình ảnh, các cách tiếp cận khác nhau để thay đổi kích thước hình ảnh trong HTML và các phương pháp hay nhất.
Mục lục
Tầm quan trọng của việc thay đổi kích thước hình ảnh trong HTML là gì?
Thay đổi kích thước hình ảnh là tăng hoặc giảm kích thước của hình ảnh. Hình ảnh điển hình được lưu trữ ở nhiều dạng khác nhau và bạn có thể lấy chúng từ nhiếp ảnh gia, sự kiện hoặc nhà thiết kế của mình hoặc tải chúng xuống từ các nguồn trực tuyến.
Bạn có thể muốn sử dụng hình ảnh ở định dạng ban đầu. Tuy nhiên, trong hầu hết các trường hợp, điều này là không mong muốn. Đây là một số lý do tại sao bạn nên thay đổi kích thước hình ảnh trong tài liệu HTML của mình:
- Tốc độ tải trang: Mặc dù hình ảnh được biết là có tác dụng cải thiện trải nghiệm người dùng nhưng việc có hình ảnh lớn có thể ảnh hưởng tiêu cực đến tốc độ tải. Tối ưu hóa những hình ảnh như vậy sẽ làm cho trang web của bạn tải nhanh.
- Làm cho trang web của bạn phản hồi nhanh: Một trang web/ứng dụng thông thường nhận được lượt truy cập từ những người sử dụng các thiết bị khác nhau. Việc thay đổi kích thước hình ảnh giúp trang web phản ứng nhanh với thiết bị di động, máy tính để bàn và máy tính bảng.
- Sử dụng băng thông: Hầu hết các máy chủ trang web đều giới hạn băng thông khi bán gói lưu trữ cho chủ sở hữu trang web. Khi bạn tối ưu hóa hình ảnh, bạn sẽ có thêm không gian cho các loại nội dung khác trên trang web của mình.
- Mục đích SEO: Tốc độ tải trang là một trong những yếu tố xếp hạng mà các công cụ tìm kiếm xem xét. Thay đổi kích thước hình ảnh của bạn sẽ cải thiện tốc độ tải, điều này cuối cùng sẽ thúc đẩy SEO của bạn.
- Tối đa hóa dung lượng lưu trữ: Kích thước của không gian lưu trữ là một trong những yếu tố cần cân nhắc khi chọn máy chủ web. Tải lên hình ảnh lớn và có độ phân giải cao có thể tiêu tốn nhiều dung lượng lưu trữ trên máy chủ.
- Cải thiện trải nghiệm người dùng: Người dùng trang web không phải đợi lâu trước khi tải hình ảnh lên trang web. Bạn có thể tối ưu hóa hình ảnh của mình để xuất hiện đồng thời với phần còn lại của nội dung.
Đây là những cách khác nhau để thay đổi kích thước hình ảnh trong HTML
Sử dụng thuộc tính HTML
Chúng ta có thể tạo một ứng dụng đơn giản để minh họa cách thay đổi kích thước hình ảnh. Tôi sẽ sử dụng hình ảnh từ Pixabay trong ứng dụng web của tôi. Tôi sẽ sử dụng cái này hình ảnh. Bạn có thể tải xuống và di chuyển nó vào dự án của bạn để dễ dàng trình diễn.
Đây là mã HTML của tôi:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content="Your website description"> <meta name="keywords" content="your, keywords, here"> <meta name="author" content="Your Name"> <title>Resize HTML Images</title> </head> <body> <h1>My Cat</h1> <img src="https://wilku.top/how-to-resize-image-in-html-and-scale-up-your-web-design/images/cat-2536662_1280.jpg" > </body> </html>
Khi tôi hiển thị hình ảnh gốc mà không thay đổi kích thước, nó sẽ hiển thị khắp trang web và bạn thậm chí không thể nhìn thấy hình ảnh.
Tôi có thể cho hình ảnh con mèo của mình có chiều cao 175 và chiều rộng 300.
Mình sẽ thay đổi code của mình trong thẻ như sau:
<img src="https://wilku.top/how-to-resize-image-in-html-and-scale-up-your-web-design/images/cat-2536662_1280.jpg" width="300" height="175">
Bây giờ bạn có thể thấy hình ảnh được hiển thị và tối ưu hóa.
Sử dụng kiểu CSS
Chúng ta có thể tạo một style sheet riêng biệt thay vì tạo kiểu nội tuyến mà chúng ta đã áp dụng ở bước trên. Tôi sẽ tạo một style sheet và đặt tên là styles.css. Chúng tôi sẽ đặt thẻ trong phần
của tài liệu HTML để liên kết biểu định kiểu với tài liệu HTML.<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content="Your website description"> <meta name="keywords" content="your, keywords, here"> <meta name="author" content="Your Name"> <title>Resize HTML Images</title> <link rel="stylesheet" href="https://wilku.top/how-to-resize-image-in-html-and-scale-up-your-web-design/styles.css"> </head> <body> <h1>My Cat</h1> <img src="https://wilku.top/how-to-resize-image-in-html-and-scale-up-your-web-design/images/cat-2536662_1280.jpg" > </body> </html>
Chúng ta có thể thêm kiểu dáng cho hình ảnh của mình thông qua bảng style.css. Đây là mã của chúng tôi:
img {
width:300px;
height:200px
}
Hình ảnh được hiển thị sẽ xuất hiện như sau:
Chúng tôi đã sử dụng bộ chọn để định vị hình ảnh của mình trên tài liệu HTML. Chúng tôi đã cung cấp cho hình ảnh của mình chiều rộng 300px và chiều cao 200px.
Sử dụng phần trăm
Trong ví dụ trước, chúng tôi đã sử dụng pixel (px) để thay đổi kích thước hình ảnh của mình. Chúng tôi cũng có thể sử dụng tỷ lệ phần trăm để tối ưu hóa hình ảnh của mình. Ví dụ: chúng ta có thể đặt chiều rộng và chiều cao của hình ảnh là 65%.
Chúng tôi sẽ sử dụng mã HTML trước đó của chúng tôi. Tuy nhiên, hãy xóa những gì có trong tệp style.css và thêm mã này:
img {
width:65%;
height:65%
}
Khi bạn kết xuất hình ảnh, bạn sẽ nhận được những điều sau:
Thay đổi kích thước hình ảnh cho thiết kế đáp ứng
Một hình ảnh tốt phải đáp ứng được các kích thước màn hình khác nhau. Bạn cũng có thể tối ưu hóa hình ảnh của mình để đáp ứng với các kích thước màn hình khác nhau. Sử dụng cùng một mã HTML, chúng ta có thể thêm mã này vào tệp style.css của mình:
img {
max-width: 100%;
height: auto;
}
Thuộc tính max-width: 100% đảm bảo rằng hình ảnh sẽ không bao giờ vượt quá chiều rộng của vùng chứa nó. Như vậy, hình ảnh sẽ luôn thu nhỏ theo tỷ lệ trên màn hình nhỏ hơn.
Thuộc tính Height:auto đảm bảo rằng hình ảnh duy trì tỷ lệ khung hình khi tăng và giảm tỷ lệ.
Theo tỷ lệ khung hình
Trong thiết kế web/ứng dụng, tỷ lệ khung hình là mối quan hệ tỷ lệ giữa chiều cao và chiều rộng. Việc duy trì tỷ lệ khung hình trong khi thay đổi kích thước hoặc tối ưu hóa hình ảnh của bạn sẽ đảm bảo rằng chúng duy trì tính nhất quán về mặt hình ảnh; hình ảnh không bị biến dạng và phản ứng nhanh với các kích thước màn hình khác nhau.
Chúng tôi sẽ sử dụng cùng một mã HTML để trình bày cách duy trì tỷ lệ khung hình trong khi thay đổi kích thước hình ảnh của chúng tôi.
Thêm mã này vào tệp style.css của bạn:
img {
width: 300px;
height: auto;
}
Tôi đã sử dụng bộ chọn ‘img’ để định vị hình ảnh của chúng tôi trong tài liệu HTML. Chúng tôi đã đặt chiều rộng của mình là 300px. Thuộc tính Height:auto cho phép các trình duyệt khác nhau tự động tính toán chiều cao của hình ảnh trong khi vẫn duy trì tỷ lệ khung hình. Điều này đảm bảo hình ảnh không bị kéo giãn khi hiển thị trên các kích thước màn hình khác nhau.
Thay đổi kích thước hình nền
Bạn có thể chèn hình ảnh vào các phần tử để làm hình nền. Thay đổi kích thước hình nền đảm bảo rằng nó sẽ vừa với vùng chứa của nó. Đây là ví dụ về tài liệu HTML có một đoạn văn và một số văn bản:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content="Your website description"> <meta name="keywords" content="your, keywords, here"> <meta name="author" content="Your Name"> <title>Resize HTML Images</title> <!-- Link to external CSS file --> <link rel="stylesheet" href="https://wilku.top/how-to-resize-image-in-html-and-scale-up-your-web-design/styles.css"> </head> <body> <div class="container"> <div class="text"> <p>This is our cat image</p> </div> </div> </body> </html>
Bây giờ chúng ta có thể thêm hình nền thông qua bảng style.css.
.container {
position: relative;
text-align: center;
color: #ffffff;
padding: 100px;
background-image: url("https://wilku.top/how-to-resize-image-in-html-and-scale-up-your-web-design/images/cat-2536662_1280.jpg");
background-position: center;
width: 75%;
}
.text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 24px;
color: orangered;
}
Hình nền chỉ có thể được thêm bằng CSS. Tôi đã tạo một vùng chứa có văn bản ở giữa và hình nền của một con mèo.
Bạn có thể sử dụng các công cụ khác nhau để thay đổi kích thước và tối ưu hóa hình ảnh của mình. Một số công cụ này chỉ cung cấp cho bạn tính năng thay đổi kích thước. Tuy nhiên, một số cũng sẽ cho phép bạn lưu trữ hình ảnh và phân phát tới tệp HTML của bạn bằng URL.
Mây là một ví dụ điển hình về công cụ thay đổi kích thước hình ảnh trên máy chủ trước khi cung cấp cho người dùng. Công cụ này được thiết kế để tự động thay đổi kích thước hình ảnh mà không ảnh hưởng đến hiệu suất trang web.
Các phương pháp hay nhất để thay đổi kích thước hình ảnh trong HTML
Mặc dù chúng tôi đã thảo luận về một số phương pháp thay đổi kích thước hình ảnh trong HTML, nhưng bạn phải luôn tuân thủ các phương pháp hay nhất sau để có kết quả tối ưu:
- Tránh tạo kiểu nội tuyến: Bạn có thể muốn nhanh chóng tạo kiểu cho hình ảnh từ tài liệu HTML của mình và chuyển sang phần tiếp theo. Tuy nhiên, cách làm này có thể ảnh hưởng tiêu cực đến tốc độ tải trang web. Sử dụng một bảng định kiểu CSS riêng biệt và làm cho mã của bạn dễ đọc và dễ bảo trì.
- Sử dụng thuộc tính ‘width’ và ‘height’: Đảm bảo bạn chỉ định chiều rộng và chiều cao của hình ảnh. Cách tiếp cận này hướng trình duyệt tự động phân bổ không gian hình ảnh khi tải phần còn lại của nội dung.
- Sử dụng đúng định dạng hình ảnh: Hình ảnh có nhiều định dạng khác nhau, chẳng hạn như JPEG, PNG và SVG. Ví dụ: PNG là định dạng hoàn hảo cho hình ảnh trong suốt, trong khi SVG phù hợp với logo.
- Làm cho hình ảnh của bạn có tính phản hồi cao: Bạn có thể không bao giờ biết được bản chất của các thiết bị mà khách truy cập trang web truy cập vào nội dung của bạn. Luôn tối ưu hóa hình ảnh cho các kích thước màn hình khác nhau và đảm bảo tính đồng nhất trong hiển thị.
- Tối ưu hóa kích thước tệp: Hình ảnh thô chất lượng cao có thể có trong các tệp lớn. Tuy nhiên, những hình ảnh như vậy có thể chiếm nhiều dung lượng trên máy chủ của bạn và ảnh hưởng đến thời gian tải trang. Bạn có thể giảm kích thước của những hình ảnh như vậy bằng nhiều công cụ khác nhau mà không làm giảm chất lượng của chúng.
Phần kết luận
Thay đổi kích thước hình ảnh của bạn trong HTML sẽ cải thiện trải nghiệm người dùng, giúp trang web của bạn phản hồi nhanh và tiết kiệm dung lượng máy chủ. Chúng tôi đã giới thiệu cho bạn một số cách tiếp cận để thay đổi kích thước hình ảnh trong HTML.
Mặc dù chúng đều hiệu quả nhưng tôi thích sử dụng các thuộc tính CSS trong một tệp CSS riêng để thay đổi kích thước hình ảnh. Tuy nhiên, đôi khi bạn có thể thêm CSS nội tuyến nếu ứng dụng của bạn nhỏ và có một vài hình ảnh.
Bạn cũng có thể đọc bài viết của chúng tôi về Tài nguyên CSS và hiểu sâu hơn về ngôn ngữ tạo kiểu này.
