Kích thước hình ảnh của các bức tranh được sử dụng trên các trang web đóng một vai trò quan trọng trong việc định nghĩa một trang web ấn tượng. Thiết kế của trang web của bạn có thể là cơ bản, độc đáo hoặc dựa trên một chủ đề đã được thiết kế sẵn. Bạn cũng có thể tạo ra một trang web tùy chỉnh từ đầu.
Tuy nhiên, nếu đây là lần đầu bạn tạo một trang web với hình ảnh, hướng dẫn của chúng tôi có thể giúp bạn bắt đầu. Tại đây, bạn sẽ tìm thấy hướng dẫn và đề xuất để có được các thông số hình ảnh tốt nhất cho một trang web hoạt động hiệu quả.
Bảng hướng dẫn về các kích thước hình ảnh
Dưới đây là một bảng hướng dẫn về các kích thước hình ảnh thông thường được khuyến nghị cho các trang web, phù hợp nhất cho màn hình máy tính để bàn với độ phân giải 1920 x 1080 px (đây là độ phân giải phổ biến nhất theo thống kê).
| Các loại ảnh | Kích thước (W x H) | Tỷ lệ |
|---|---|---|
| Background Image | 1920 x 1080 pixels | 16:9 |
| Hero Image | 1280 x 720 pixels | 16:9 |
| Website Banner | 250 x 250 pixels | 1:1 |
| Blog Image | 1200 x 630 pixels | 3:2 |
| Logo (Rectangle) | 250 x 100 pixels | 2:3 |
| Logo (Square) | 100 x 100 pixels | 1:1 |
| Favicon | 16 x 16 pixels | 1:1 |
| Social Media Icons | 32 x 32 pixels | 1:1 |
| Lightbox Images (Full Screen) | 1600 x 500 pixels | 16:9 |
| Thumbnail Image | 150 x 150 pixels | 1:1 |
Hướng dẫn về hình ảnh trang web năm 2023
Kích thước hình ảnh có ảnh hưởng lớn đến trải nghiệm người dùng, tối ưu hóa máy tìm kiếm và hiệu suất tổng thể của trang web. Bất kể loại tệp hình ảnh nào được sử dụng, yếu tố quan trọng đối với một trang web xuất sắc chính là kích thước của hình ảnh. Dưới đây là một tổng quan chi tiết về hướng dẫn về các thông số kích thước hình ảnh chung trên các trang web.
Kích thước hình ảnh nền trang web
- Chiều cao: 1080 pixel
- Chiều rộng: 1920 pixel
- Tỷ lệ khung hình: 16:9
- PPI (Pixels Per Inch – Điểm ảnh trên mỗi inch): 72
Tùy thuộc vào thiết kế của trang web, kích thước hình ảnh nền có thể lên đến 2400px x 1600px và có dung lượng tệp dưới 20MB.
Một hình ảnh nền trang web có thể tạo ra một trải nghiệm toàn diện bằng cách chiếm toàn bộ cảnh quan của trang. Những hình ảnh nền này là yếu tố quan trọng trong việc làm tăng yếu tố “wow” của thương hiệu và do đó chất lượng, kích thước và tỷ lệ phải đủ cao.
Miễn là giá trị điểm ảnh trên mỗi inch (PPI) đạt 72, bạn có thể tải lên một hình ảnh nền có kích thước lên đến 2400px x 1600px hoặc tỷ lệ 16:9. Tuy nhiên, kích thước lý tưởng là 1920px x 1080px. Khi tải lên theo kích thước được khuyến nghị, hình ảnh nền sẽ tự động co dãn hoặc thu nhỏ tùy theo thiết bị. Do đó, tùy thuộc vào thiết kế, hình ảnh nền được tải lên có thể là hình ảnh lớn nhất được tải lên trang web, với giới hạn dung lượng tối đa là 20MB.
Việc lựa chọn hình ảnh có góc rộng sẽ giúp hình ảnh nền hoàn thành mục tiêu dự định của chúng. Tuy nhiên, việc duy trì kích thước tệp ảnh nhỏ nhất có thể mà không ảnh hưởng đến chất lượng là quan trọng để trang web tải nhanh. Một phần mềm nén hình ảnh trực tuyến có thể giữ lại chất lượng và giảm kích thước tệp hình ảnh nền.
Kích thước hình ảnh “hero” trên trang web
- Chiều cao: 720 pixel
- Chiều rộng: 1280 pixel
- Tỷ lệ khung hình: 16:9
- PPI (Pixels Per Inch – Điểm ảnh trên mỗi inch): 72
Tùy thuộc vào thiết kế của trang web, có thể sử dụng hình ảnh có chiều rộng lên đến 1800px.
Hình ảnh “hero” có thể chiếm toàn bộ chiều cao hoặc một nửa chiều cao của trang. Hình ảnh “hero” sẽ hiển thị tốt với kích thước 1280px x 720px và tỷ lệ khung hình 16:9. Nếu hình ảnh “hero” là phần quan trọng trung tâm của trang web, một chiều rộng lên đến 1800px có thể đạt được hiệu ứng mong muốn. Tốc độ tải trang web có thể bị ảnh hưởng bởi độ nét của hình ảnh.
Do đó, việc duy trì giá trị 72 PPI của hình ảnh “hero” sẽ cung cấp cả độ nét và kích thước tệp nhỏ nhất để đạt được kết quả tốt nhất. Theo quy tắc thông thường, tốc độ tải trang web được khuyến nghị là 2 giây để đảm bảo lưu lượng và SEO tối ưu.
Hiện nay, 90% lưu lượng truy cập trang web đến từ thiết bị di động. Trên trang web di động, hình ảnh “hero” hiển thị tốt với kích thước 800px x 1200px. Tuy nhiên, các hệ thống quản lý nội dung sẽ tự động điều chỉnh kích thước hình ảnh để phù hợp với trình duyệt trên thiết bị di động.
Kích thước banner trang web
- Chiều cao: 250 pixel
- Chiều rộng: 250 pixel
- Tỷ lệ khung hình: 1:1
- PPI (Pixels Per Inch – Điểm ảnh trên mỗi inch): 72 quảng cáo banner trên trang web
Các banner quảng cáo trên trang web có thể được sắp xếp theo nhiều kích thước khác nhau. Các loại hình ảnh banner phổ biến bao gồm dạng dọc, chân dung, người dẫn đầu, trang đầy/dạng nửa trang và vuông. Hầu hết các trang web chọn kích thước hình ảnh banner là 250px x 250px hoặc tỷ lệ 1:1.
Banner dạng dọc hay còn gọi là “sky scrapper” cũng phổ biến với kích thước 160px x 600px. Hình ảnh banner nên được thiết kế theo các kích thước cần thiết và được nén thành kích thước tệp hình ảnh nhỏ. Giữ phần tâm của hình ảnh ở giữa sẽ tránh việc cắt bớt hình ảnh khi chúng được hiển thị trên thiết bị di động. Tìm hiểu thêm về các kích thước banner được đề xuất trong hướng dẫn này.
Trên thiết bị di động, hình ảnh banner hiển thị tốt khi tỷ lệ khung hình là 1:9, 1:1, 1:1, hoặc 4:5. Cũng cần nhớ rằng kích thước tệp hình ảnh nên được duy trì càng nhỏ càng tốt mà không làm ảnh hưởng đến chất lượng. Kích thước lớn nhất của hình ảnh trên một trang web không nên vượt quá 20MB.
Kích thước hình ảnh cho trang blog trên trang web
- Chiều cao: 630 pixel
- Chiều rộng: 1200 pixel
- Tỷ lệ khung hình: 3:2
- PPI (Pixels Per Inch – Điểm ảnh trên mỗi inch): 72
Khi xem xét kích thước hình ảnh là phần “above the fold” (phần hiển thị trước khi cuộn) trên trang web: Nếu hình ảnh quan trọng, nên sử dụng kích thước lớn hơn. Nếu văn bản quan trọng, kích thước hình ảnh có thể được hy sinh.
Khi tải lên hình ảnh cho trang blog, hãy nhớ rằng những hình ảnh này nên phù hợp để chia sẻ trên các mạng xã hội. Thông thường, hình ảnh cho trang blog sẽ phù hợp với tỷ lệ khung hình 3:2 hoặc 1200px x 630px. Hình ảnh dạng ngang cho trang blog thường được thiết kế với kích thước 1200px x 900px, trong khi hình ảnh nổi bật cho trang blog dạng chân dung thường phù hợp với kích thước 900px x 1200px.
Hãy tải lên những hình ảnh chất lượng cao nhưng có kích thước tệp nhỏ cho trang blog. Đối với hình ảnh trang blog, kích thước tệp lớn nhất được khuyến nghị là 150KB. Kích thước tệp nhỏ hơn, trang blog sẽ tải nhanh hơn. Để cho hệ thống quản lý nội dung (CMS) điều chỉnh hình ảnh trang blog cho các kích thước khác nhau, chúng nên có độ phân giải 72ppi và phần tâm của hình ảnh ở giữa.
Kích thước logo trang web
- Chiều cao: 100 pixel
- Chiều rộng: 250 pixel
- Tỷ lệ khung hình: 2:3
- PPI (Pixels Per Inch – Điểm ảnh trên mỗi inch): 72
Hình ảnh logo có thể là hình vuông hoặc hình chữ nhật. Do đó, có thể sử dụng tỷ lệ khung hình 1:1 hoặc 2:3.
Logo của trang web là yếu tố quan trọng nhất thể hiện về thương hiệu và tất cả nội dung trên trang web. Trên hầu hết các trang web, logo thường được hiển thị ở góc trái trên cùng của trang hoặc ở phần trung tâm trên cùng. Logo thường được tải lên dưới dạng hình vuông với tỷ lệ khung hình 1:1 hoặc dưới dạng hình chữ nhật với tỷ lệ 2:3.
Định dạng PNG là định dạng tệp được khuyến nghị cho tệp logo vì chúng có nền trong suốt để phù hợp với trang web. Đối với máy tính để bàn, chiều cao tối đa của logo là 100px và chiều rộng có thể thay đổi.
Nếu bạn chưa có logo, bạn có thể tạo một phiên bản cơ bản bằng cách sử dụng một trong những công cụ tạo logo trực tuyến hàng đầu.
Kích thước favicon trang web
- Chiều cao: 16 hoặc 32 pixel
- Chiều rộng: 16 hoặc 32 pixel
- Tỷ lệ khung hình: 1:1
- PPI (Pixels Per Inch – Điểm ảnh trên mỗi inch): 72
Kích thước tối ưu cho favicon của trang web là 16px x 16px, 32px x 32px hoặc tỷ lệ 1:1. Kích thước này là kích thước mà tất cả các trình duyệt sử dụng để hiển thị favicon. Tuy nhiên, để tránh hiển thị phiên bản bị kéo dài của favicon trên màn hình lớn, nhiều kích thước hình ảnh được tạo ra với tỷ lệ 1:1.
Các định dạng phổ biến nhất cho favicon là ICO và PNG để đảm bảo tính tương thích trên các trình duyệt. Có nhiều công cụ dễ sử dụng có thể chuyển đổi logo thành favicon phù hợp để tải lên trang web.
Khuyến nghị kích thước hình ảnh cho thiết bị di động
Hầu hết các trang web đáp ứng sẽ tự động điều chỉnh kích thước tất cả các hình ảnh để hiển thị trên thiết bị di động. Kích thước hình ảnh phải được thiết kế để phù hợp với phiên bản di động của trang web giống với trang web phiên bản máy tính để bàn. Nếu hình ảnh cho máy tính để bàn quá lớn, hình ảnh sẽ bị biến dạng trên thiết bị di động. Do đó, cần thiết lập các kích thước chính xác cho hình ảnh để tự động điều chỉnh trên thiết bị di động.
Hình ảnh với tỷ lệ khung hình 1:1 sẽ không gặp vấn đề khi hiển thị trên thiết bị di động. Tuy nhiên, tùy thuộc vào thiết lập tự động điều chỉnh, có thể xảy ra việc cắt bớt trên thiết bị di động đối với hình ảnh có tỷ lệ khung hình 16:9 hoặc 3:2. Vì lý do này, cách tiếp cận an toàn nhất với hình ảnh đáp ứng là giữ phần tâm của đối tượng ở giữa.
Tại sao kích thước hình ảnh quan trọng đối với trang web?
Một trong những điều đầu tiên mà một chuyên gia SEO sẽ đề nghị là kích thước hình ảnh của các phần truyền thông trên trang web. Tải lên các hình ảnh lớn lên trang web là không hiệu quả vì ảnh hưởng đến hiệu suất tổng thể của trang web. Không gian lưu trữ trang web quý báu sẽ bị tiêu thụ và tốc độ tải trang web có thể giảm đáng kể. Và một tốc độ tải trang web bị bỏ qua là một trong những sai lầm SEO phổ biến nhất.
Một trang web chậm sẽ đưa khách hàng tiềm năng và lưu lượng truy cập trang web ra xa khỏi trang web của bạn. Công cụ tìm kiếm Google sẽ giảm xếp hạng trang web, và doanh nghiệp của bạn sẽ chịu thiệt hại.
Khi bạn tải lên các hình ảnh có kích thước hoàn hảo cho chủ đề trang web của bạn, kết quả không chỉ giới hạn trong việc có một trang web mượt mà. Hệ thống quản lý nội dung (CMS) sẽ hiển thị hình ảnh đúng cách, tỷ lệ thoát khỏi trang sẽ thấp, và bạn sẽ gần hơn một bậc xếp hạng SEO hoàn hảo.
Định dạng hình ảnh nào nên sử dụng cho web?
Do các định dạng hình ảnh khác nhau có thể được sử dụng trên một trang web, việc lựa chọn định dạng nào để sử dụng là khá khó khăn. Dưới đây là một số định dạng hình ảnh phổ biến nhất được sử dụng trên trang web:
JPEG – JPEG là một trong những định dạng hình ảnh phổ biến nhất được sử dụng cho hình ảnh. Định dạng tệp JPG có khả năng nén nhẹ và mất thông tin hình ảnh. Định dạng tệp JPG thích hợp cho sản phẩm, blog và hình ảnh nền được sử dụng trên trang web.
PNG – PNG là định dạng hình ảnh sử dụng nén không mất thông tin hình ảnh. Kênh alpha trong định dạng PNG cho phép độ trong suốt của nền. PNG hoàn hảo cho biểu tượng, logo và đồ họa khác.
GIF – Định dạng tệp GIF là định dạng hình ảnh linh hoạt có thể được sử dụng cho các đoạn phim ngắn với kích thước tệp nhỏ. GIF cũng có kênh alpha và thích hợp cho hình ảnh sản phẩm.
WEBP – Hình ảnh WEBP là một định dạng hình ảnh mới đang trở nên phổ biến. Định dạng này cung cấp kích thước tệp nhỏ hơn so với JPG với chất lượng xuất sắc, phù hợp cho bất kỳ sản phẩm, banner và hình ảnh nổi bật nào.
Các khía cạnh tối ưu hóa hình ảnh khác
Có nhiều điều quan trọng hơn việc đảm bảo rằng kích thước hình ảnh chính xác khi xem xét SEO. Dưới đây là một số khía cạnh quan trọng khác cần xem xét cho tối ưu hóa hình ảnh.
Nén hình ảnh Khi hình ảnh được nén, các pixel tương tự tạo nên hình ảnh được nhóm và nén bằng phần mềm nén hình ảnh như phần mềm nén hình ảnh TinyIMG. Duy trì kích thước tệp ảnh tối thiểu giúp tăng tốc độ tải trang web.
Ngoài tốc độ tải trang, tỷ lệ thoát khỏi trang giảm, và trải nghiệm người dùng tổng thể được cải thiện. Khi nén hình ảnh, thông tin metadata được gỡ bỏ khỏi hình ảnh, làm cho nó phù hợp cho cả SEO và hiệu suất trang web. Mặc dù chất lượng hình ảnh giảm khi áp dụng nén hình ảnh, người xem hầu như không thể thấy sự khác biệt trên thiết bị số.
Tối ưu hóa SEO hình ảnh
Khi hình ảnh được tối ưu hóa cho SEO, chúng giúp cải thiện xếp hạng trên các công cụ tìm kiếm, tốc độ, không gian lưu trữ và trải nghiệm người dùng mượt mà. Các công cụ tìm kiếm ưa thích các trang web có hình ảnh không xuất hiện ở bất kỳ đâu khác trên web. Tìm kiếm hình ảnh quan trọng đối với người dùng tìm kiếm hình ảnh để truyền cảm hứng và giải thích về mặt hình ảnh. Do đó, tối ưu hóa hình ảnh giúp các công cụ tìm kiếm hiểu nội dung của trang web của bạn. Dưới đây là một số yếu tố tối ưu hóa hình ảnh cho SEO:
- Hình ảnh độc đáo
- Kích thước xác định
- Văn bản và tiêu đề ALT
- Bản đồ trang hình ảnh
- Chú thích hình
Cách tìm kích thước hình ảnh cho trang web của bạn?
Các trang web độc đáo dựa trên kiểu được chọn bởi người tạo. Các trang web sử dụng WordPress, Shopify, Wix, Squarespace và các hệ thống CMS khác yêu cầu hình ảnh với kích thước được khuyến nghị.
Ngoài ra, các trang web được thiết kế tùy chỉnh có các kích thước cố định cần thiết cho hình ảnh. Mặc dù tìm kích thước hình ảnh cho một trang web có thể dường như khó khăn, dưới đây là một số gợi ý giúp bạn tìm kích thước hình ảnh cho các nền tảng trang web tiêu chuẩn:
Chủ đề Shopify
Shopify cho phép người dùng tải lên hình ảnh có kích thước lên đến 4472px x 4472px, với giới hạn 20MB cho mỗi hình ảnh ở 72dpi. Kích thước tối thiểu cần thiết cho hình ảnh sản phẩm trên Shopify là 800px x 800px. Kiểm tra xem chủ đề Shopify của bạn có đi kèm hướng dẫn về kích thước hình ảnh được khuyến nghị không. Ghi lại các kích thước hình ảnh hoạt động tốt nhất trên cửa hàng Shopify của bạn để sử dụng trong tương lai.
Chủ đề WordPress
Kích thước hình ảnh được khuyến nghị trong WordPress là lên đến 1024px x 1024px. Hầu hết các chủ đề WordPress đi kèm với một tệp tài liệu đầy đủ giúp người dùng tìm kích thước hình ảnh tốt nhất cho chủ đề. Nếu bạn đã thay đổi kích thước hình ảnh để phù hợp với thiết kế và hiển thị của bạn, hãy ghi lại nó.
Chủ đề tùy chỉnh (code tay)
Nhà phát triển trang web code tay thường cung cấp tài liệu mô tả kích thước hình ảnh tốt nhất. Nhấp chuột phải vào hình ảnh mà bạn muốn tìm kích thước trên trình duyệt Chrome. Chọn “Kiểm tra phần tử” để tìm kích thước của hình ảnh trong mã được tô sáng.
Tóm lại
Với nhiều kích thước màn hình của các thiết bị có trình duyệt hiện nay, kích thước hình ảnh khó dự đoán. Tuy nhiên, việc tải lên kích thước hình ảnh đúng cách mang lại lợi ích sâu rộng cho SEO và sự hấp dẫn tổng thể của trang web.
Bài viết này là một tổng quan về kích thước hình ảnh cho các chủ sở hữu trang web, với hướng dẫn để xác định kích thước hình ảnh tốt nhất. Mặc dù kích thước hình ảnh quan trọng, kích thước tệp hình ảnh cũng là một vấn đề lớn. Việc sử dụng kịch bản tải trang lười biếng chỉ tải hình ảnh quan trọng
