Ảnh giữ chỗ cho bản dựng giao diện: chọn kích thước, màu và cách dùng đúng
Công cụ dựng địa chỉ ảnh giữ chỗ theo chiều rộng, chiều cao, màu nền, màu chữ và dòng chữ bạn muốn in lên ảnh, kèm tám kích thước dựng sẵn cho các vị trí đăng bài phổ biến. Bạn xem trước ảnh ngay trên trang rồi sao chép địa chỉ để dán vào mã nguồn hoặc bản thiết kế.
Tính năng nổi bật
- Nhập tự do chiều rộng và chiều cao trong khoảng từ 1 tới 4000 pixel
- Tám kích thước dựng sẵn cho bài đăng mạng xã hội, ảnh đại diện video và biểu ngữ website
- Chọn màu nền và màu chữ bằng bảng màu hoặc gõ thẳng mã hex
- Gõ dòng chữ tùy ý in lên ảnh, để trống thì công cụ tự in kích thước
- Xem trước ảnh thật ngay trên trang, cập nhật khi bạn đổi thông số
- Nút sao chép địa chỉ ảnh để dán thẳng vào thuộc tính src hoặc bản thiết kế
- Nút tải ảnh về máy dưới dạng tệp đặt tên theo kích thước
- Không cần đăng ký tài khoản và không giới hạn số lần tạo
Vì sao nên dùng ảnh giữ chỗ thay vì ảnh thật khi đang dựng giao diện
Khi giao diện còn đang dựng mà ảnh thật chưa có, người ta hay lấy tạm một tấm ảnh bất kỳ trên mạng để lấp chỗ trống. Cách này gây ra ba rắc rối. Thứ nhất là bản quyền: ảnh tạm thường bị quên và đi thẳng lên bản chạy thật, kéo theo rủi ro pháp lý mà không ai nhớ mình đã lấy nó từ đâu. Thứ hai là kích thước không khớp: ảnh tạm hiếm khi đúng tỷ lệ khung hình mà thiết kế yêu cầu, nên bố cục bạn nhìn thấy lúc dựng không phải bố cục thật, và tới khi thay ảnh đúng thì mọi thứ xô lệch. Thứ ba là khó nhận diện: nhìn vào một tấm ảnh đẹp lẫn trong giao diện, không ai biết đó là ảnh thật hay chỗ trống chưa điền. Ảnh giữ chỗ giải quyết cả ba: nó đúng kích thước tới từng pixel, in luôn số đo lên mặt ảnh, và trông rõ ràng là chỗ trống nên không ai nhầm.
Lợi ích khi sử dụng
- Ô ảnh trong bản dựng có đúng kích thước thật nên bố cục không xô lệch khi thay ảnh
- Số đo in thẳng lên ảnh giúp cả nhóm thống nhất kích thước cần chuẩn bị
- Tránh rủi ro bản quyền do dùng tạm ảnh lấy trên mạng
- Nhìn là biết ngay đây là chỗ chưa điền nội dung
- Đổi kích thước chỉ mất vài giây, tiện khi thử nhiều phương án bố cục
Cách tạo một ảnh giữ chỗ
- 1Chọn một kích thước dựng sẵn trong danh sách nếu ảnh sẽ dùng cho vị trí quen thuộc, hoặc bỏ qua bước này.
- 2Nhập chiều rộng và chiều cao theo pixel cho đúng ô ảnh trong thiết kế của bạn.
- 3Chọn màu nền và màu chữ, nên lấy màu trung tính để ảnh giữ chỗ không bị nhầm với thành phần thật của giao diện.
- 4Gõ dòng chữ mô tả vào ô văn bản, ví dụ tên vị trí đặt ảnh, hoặc để trống để công cụ in kích thước lên ảnh.
- 5Bấm sao chép địa chỉ để dán vào thuộc tính src, hoặc bấm tải về nếu cần một tệp ảnh nằm sẵn trong dự án.
Tám kích thước dựng sẵn và tỷ lệ khung hình đằng sau chúng
Danh sách dựng sẵn gồm 1200 nhân 630 cho bài đăng Facebook, 1080 nhân 1080 cho bài đăng Instagram, 1200 nhân 675 cho bài đăng Twitter, 1280 nhân 720 cho ảnh đại diện video YouTube, 1200 nhân 627 cho bài đăng LinkedIn, 1000 nhân 1500 cho ghim Pinterest, 1920 nhân 600 cho biểu ngữ website và 1200 nhân 800 cho ảnh đại diện bài viết. Điều đáng nhớ không phải con số cụ thể mà là tỷ lệ khung hình, vì tỷ lệ mới là thứ quyết định ảnh có bị cắt hay không. Kích thước 1200 nhân 630 tương ứng tỷ lệ 1,91 trên 1, đúng tỷ lệ mà giao thức Open Graph khuyến nghị cho thẻ xem trước liên kết, và 1200 nhân 627 gần như trùng với nó. Kích thước 1280 nhân 720 là tỷ lệ 16 trên 9 quen thuộc của video. Kích thước 1080 nhân 1080 là hình vuông tỷ lệ 1 trên 1, còn 1000 nhân 1500 là tỷ lệ 2 trên 3 theo chiều dọc. Lưu ý các nền tảng thỉnh thoảng đổi thông số khuyến nghị, nên với chiến dịch quan trọng hãy tra lại tài liệu chính thức của nền tảng đó trước khi xuất ảnh cuối.
Cấu trúc địa chỉ ảnh và cách sửa tay các tham số
Địa chỉ mà công cụ dựng ra có dạng gồm bốn phần lần lượt là kích thước viết dưới dạng chiều rộng nhân chiều cao, mã màu nền, mã màu chữ, rồi tới tham số text mang dòng chữ in lên ảnh. Hai mã màu viết ở dạng hex sáu ký tự nhưng bỏ dấu thăng ở đầu, vì dấu thăng trong địa chỉ web mang nghĩa khác là ký hiệu bắt đầu phần neo. Dòng chữ được mã hóa theo quy tắc địa chỉ web, nên khoảng trắng biến thành ký tự đặc biệt và dấu tiếng Việt biến thành chuỗi phần trăm dài — đó là bình thường, không phải lỗi. Hiểu cấu trúc này có ba cái lợi. Một là bạn sửa nhanh kích thước ngay trên địa chỉ mà không cần quay lại công cụ. Hai là bạn sinh hàng loạt địa chỉ bằng một vòng lặp trong mã nguồn khi cần nhiều ảnh giữ chỗ cho danh sách sản phẩm mẫu. Ba là bạn nhận ra ngay khi một địa chỉ bị hỏng, chẳng hạn mã màu còn sót dấu thăng hoặc thiếu ký tự.
Điều quan trọng nhất: ảnh này phụ thuộc một dịch vụ bên ngoài
Công cụ không tự vẽ ảnh mà chỉ dựng địa chỉ trỏ tới một dịch vụ sinh ảnh giữ chỗ của bên thứ ba, rồi để trình duyệt tải ảnh từ đó về. Hệ quả thứ nhất là ảnh chỉ hiện khi có kết nối mạng và khi dịch vụ kia đang hoạt động; nếu dịch vụ ngừng chạy hay đổi địa chỉ thì mọi ảnh trong bản dựng của bạn sẽ thành ô trắng cùng lúc. Hệ quả thứ hai, nghiêm trọng hơn, là tuyệt đối không để những địa chỉ này lọt lên bản chạy thật: mỗi lượt người dùng xem trang là một lượt gọi ra máy chủ của bên thứ ba, làm chậm trang, tạo ra rủi ro không kiểm soát được và để lộ lưu lượng truy cập của bạn cho một bên ngoài. Hệ quả thứ ba là nút tải về không phải lúc nào cũng tải: vì tệp nằm ở tên miền khác, nhiều trình duyệt bỏ qua yêu cầu tải xuống và mở ảnh trong tab mới thay vì lưu về máy. Khi gặp trường hợp đó, hãy bấm chuột phải lên ảnh xem trước rồi chọn lưu ảnh.
Ảnh giữ chỗ và chuyện giữ cho bố cục không nhảy
Một lỗi hay gặp khi thay ảnh giữ chỗ bằng ảnh thật là bố cục nhảy vì kích thước hai bên khác nhau. Chỉ số Cumulative Layout Shift trong bộ Core Web Vitals đo đúng hiện tượng này, và ảnh không được đặt trước chỗ là nguyên nhân phổ biến nhất khiến chỉ số đó xấu. Cách phòng ngừa đơn giản nhất là luôn ghi thuộc tính width và height đúng số pixel gốc lên thẻ img, kể cả khi CSS sẽ co ảnh lại; trình duyệt hiện đại dùng hai con số đó để tính tỷ lệ khung hình và chừa sẵn chỗ trước khi ảnh tải xong. Cách thứ hai là dùng thuộc tính aspect-ratio trong CSS cho khung chứa ảnh, hợp khi ảnh cần lấp đầy một ô có tỷ lệ cố định. Chính vì vậy việc đặt ảnh giữ chỗ đúng kích thước ngay từ đầu không chỉ là chuyện nhìn cho đẹp: nó buộc bạn xác định tỷ lệ khung hình từ sớm, và tỷ lệ đó chính là thứ bạn ghi vào mã để bố cục ổn định về sau.
Ba cách thay thế khi không muốn phụ thuộc dịch vụ ngoài
Cách thứ nhất là dùng ảnh SVG nhúng thẳng vào mã dưới dạng địa chỉ dữ liệu. Một hình chữ nhật SVG kèm dòng chữ chỉ nặng vài trăm byte, không cần gọi mạng, hiển thị được cả khi ngoại tuyến và co giãn không vỡ nét. Đây là lựa chọn tốt nhất cho bản dựng giao diện trong dự án lập trình. Cách thứ hai là sinh ảnh bằng thẻ canvas ngay trong trình duyệt rồi xuất ra tệp, phù hợp khi bạn cần một tệp thật nằm trong thư mục dự án và muốn kiểm soát hoàn toàn nội dung ảnh. Cách thứ ba, dùng cho môi trường chạy thật chứ không phải bản dựng, là kỹ thuật ảnh mờ tạm thời: hiển thị một phiên bản rất nhỏ và mờ của chính ảnh thật trong lúc chờ ảnh đầy đủ tải xong, thay vì để trống hoặc để một khối màu. Cách này cho cảm giác trang tải nhanh hơn và vẫn giữ được chỗ, nhưng nó giải quyết bài toán trải nghiệm tải trang chứ không phải bài toán lấp chỗ trống khi thiết kế.
Câu hỏi thường gặp (FAQ)
Ảnh giữ chỗ dùng trong trường hợp nào?
Dùng khi bạn đang dựng giao diện, làm bản phác bố cục hoặc thuyết trình ý tưởng mà ảnh thật chưa có. Nó giữ đúng kích thước ô ảnh nên bố cục hiển thị sát với sản phẩm cuối, đồng thời in số đo lên mặt ảnh để cả nhóm biết cần chuẩn bị ảnh thật ở kích thước nào.
Ảnh có được tạo ngay trên trang này không?
Không. Công cụ chỉ dựng địa chỉ, còn ảnh do một dịch vụ sinh ảnh giữ chỗ của bên thứ ba tạo ra và trình duyệt tải về từ đó. Nghĩa là ảnh chỉ hiện khi có kết nối mạng và khi dịch vụ kia đang hoạt động bình thường.
Có nên để địa chỉ ảnh giữ chỗ trên bản chạy thật không?
Không nên trong mọi trường hợp. Mỗi lượt xem trang sẽ là một lượt gọi ra máy chủ bên thứ ba, làm chậm trang và tạo rủi ro không kiểm soát được. Nếu dịch vụ đó ngừng chạy, toàn bộ ảnh trên trang bạn sẽ biến mất cùng lúc mà không có cảnh báo nào.
Bấm nút tải về nhưng ảnh chỉ mở ra tab mới, vì sao?
Vì tệp ảnh nằm ở tên miền khác với trang này, và nhiều trình duyệt bỏ qua yêu cầu tải xuống đối với tệp khác tên miền vì lý do bảo mật. Cách vòng qua là bấm chuột phải lên ảnh trong khung xem trước rồi chọn lưu ảnh về máy.
Kích thước nào phù hợp cho ảnh xem trước khi chia sẻ liên kết?
Tỷ lệ 1,91 trên 1 là tỷ lệ mà giao thức Open Graph khuyến nghị, tương ứng kích thước 1200 nhân 630 pixel trong danh sách dựng sẵn. Nên đặt chữ và biểu trưng cách mép ít nhất khoảng 60 pixel, vì mỗi nền tảng cắt ảnh một kiểu khác nhau khi hiển thị ở khung nhỏ.
Nhập chữ tiếng Việt có dấu lên ảnh được không?
Địa chỉ vẫn dựng được và dấu tiếng Việt sẽ được mã hóa thành chuỗi phần trăm dài trong địa chỉ, đó là bình thường. Tuy nhiên việc dịch vụ bên ngoài có vẽ đúng dấu hay không còn tùy bộ chữ nó dùng, nên hãy nhìn khung xem trước để xác nhận trước khi sao chép.
Vì sao mã màu trong địa chỉ không có dấu thăng?
Vì trong địa chỉ web, dấu thăng mang nghĩa bắt đầu phần neo trỏ tới một vị trí trong trang, nên nó không được xuất hiện giữa đường dẫn. Công cụ tự cắt dấu thăng khỏi mã hex khi dựng địa chỉ. Nếu bạn sửa tay mà để sót dấu thăng thì ảnh sẽ không hiện.
Kích thước tối đa tạo được là bao nhiêu?
Ô nhập giới hạn ở 4000 pixel cho mỗi chiều. Trên thực tế hiếm khi cần lớn tới vậy cho một ảnh giữ chỗ, vì mục đích của nó là chiếm chỗ chứ không phải hiển thị chi tiết. Ảnh giữ chỗ quá lớn còn làm chậm bản dựng của bạn một cách không cần thiết.
Có cách nào tạo ảnh giữ chỗ mà không cần mạng không?
Có, cách gọn nhất là dùng ảnh SVG nhúng thẳng vào mã dưới dạng địa chỉ dữ liệu. Một hình chữ nhật kèm dòng chữ chỉ nặng vài trăm byte, hiển thị được khi ngoại tuyến và co giãn không vỡ nét. Đây là lựa chọn phù hợp nhất cho bản dựng giao diện trong dự án lập trình.
Làm sao để bố cục không nhảy khi thay ảnh giữ chỗ bằng ảnh thật?
Ghi thuộc tính width và height đúng số pixel gốc lên thẻ img ngay từ đầu, kể cả khi CSS sẽ co ảnh lại. Trình duyệt dùng hai con số đó để chừa sẵn chỗ trước khi ảnh tải xong. Cách khác là đặt thuộc tính aspect-ratio trong CSS cho khung chứa ảnh.
Ảnh giữ chỗ có cần thuộc tính alt không?
Có, và nên ghi ngay từ lúc dựng. Đặt sẵn một mô tả tạm như tên vị trí ảnh sẽ nhắc bạn thay bằng mô tả thật khi lắp ảnh thật vào. Nếu để trống rồi quên, bạn sẽ có một trang chạy thật thiếu thuộc tính alt, ảnh hưởng cả khả năng tiếp cận lẫn việc lập chỉ mục ảnh.
Thông số tôi nhập có được lưu lại không?
Không. Kích thước, màu và dòng chữ chỉ tồn tại trong phiên làm việc trên trình duyệt của bạn, công cụ không lưu lịch sử. Riêng địa chỉ ảnh thì đương nhiên chứa các thông số đó vì chúng nằm trong chính đường dẫn, nên đừng in thông tin nhạy cảm lên ảnh.
Từ khóa liên quan
- tạo ảnh placeholder
- image placeholder generator
- ảnh giữ chỗ cho wireframe
- dummy image online
- kích thước ảnh facebook 1200x630
- kích thước thumbnail youtube
- kích thước ảnh instagram
- tỷ lệ ảnh open graph
- og image size chuẩn
- ảnh banner website
- placeholder svg data uri
- thuộc tính width height cho ảnh
- aspect-ratio css
- cumulative layout shift ảnh
- ảnh mockup thiết kế
- tạo ảnh mẫu theo kích thước
- ảnh giữ chỗ cho figma
- kích thước ảnh pinterest
- công cụ thiết kế online miễn phí
- ảnh placeholder cho lập trình web
