Resize ảnh width/height | Đổi kích thước px cơ bản trên trình duyệt

Designer gửi ảnh 4032×3024. CMS OGP cần ~1200×630. Bạn mở Paint, kéo lung tung, upload — Zalo cắt mất logo, Lighthouse vẫn kêu ảnh quá lớn.

Bài này là resize width/height cơ bản: nhập px, khóa tỷ lệ, preview, tải về. Không đào letterbox vs object-fit (đã có bài aspect/letterbox). Mục tiêu: freelancer / sinh viên / intern VN làm xong size đúng trong vài phút, không méo, không phóng to ảo.

Bài viết này giúp bạn

• Phân biệt đổi kích thước file với CSS co trên trang
• Biết khi nào nhập một cạnh vs hai cạnh
• Có bảng size đích thường gặp (OGP, avatar, thumb, hero)
• Tránh upscale, méo, và quên nén sau resize
• Case study + checklist trước khi gửi khách

---

Resize file khác CSS scale

Việc	File trên đĩa	Trình duyệt tải
width: 50% trong CSS	Vẫn full resolution	Vẫn decode ảnh nặng
<img width="400"> không đổi nguồn	Vẫn full	Vẫn nặng
Resize file → 800px	Nhẹ hơn (thường)	Decode ít pixel hơn

CSS không thay bước xuất file đúng size. Mobile 4G ở tỉnh — hero 4000px trong slot 360px là LCP xấu dù “nhìn nhỏ trên màn hình”.

---

Thao tác trên tool: width, height, giữ tỷ lệ

Trên Image resizer:

1. Thả hoặc chọn ảnh (JPEG / PNG / GIF / WebP)
2. Xem kích thước gốc
3. Nhập Chiều rộng (px) và/hoặc Chiều cao (px)
4. Bật Giữ nguyên tỷ lệ (mặc định nên bật khi thu nhỏ)
5. Bấm resize → preview → tải xuống

Không upload server. Không cần tài khoản.

Pattern A — chỉ đổi một cạnh (phổ biến nhất)

• Bật giữ tỷ lệ
• Nhập width = 1200
• Height tự ra theo tỷ lệ gốc

Dùng khi: thumb blog, ảnh bài viết, catalog cùng cạnh dài.

Pattern B — khung cố định (OGP, avatar vuông)

• Nguồn đã đúng tỷ lệ (đã crop) → nhập cả 1200 và 630, giữ tỷ lệ hoặc số khớp
• Nguồn sai tỷ lệ → đừng chỉ gõ 1200×630 trên ảnh 3:4: sẽ méo. Cần crop/letterbox trước (bài aspect), hoặc chấp nhận contain trong design

Pattern C — cố ý stretch (hiếm)

Tắt giữ tỷ lệ, nhập hai cạnh lệch. Chỉ dùng khi brief yêu cầu (banner méo có chủ đích) — hầu như không cho ảnh người / sản phẩm.

---

Bảng size đích hay dùng (2026)

Số chỉ là điểm bắt đầu. Đo slot CSS thật (Inspect → computed width) rồi chọn ~1× đến 2× cho Retina. Ví dụ card 360 CSS px → file ~720 px rộng thường đủ.

---

Upscale: vì sao “kéo lên 1920” là ý xấu

Ảnh nguồn 400×300 không biến thành 1920×1440 sắc nét bằng resize. Thuật toán nội suy bịa pixel — cạnh mềm, chữ vỡ.

Quy tắc: chỉ thu nhỏ (downscale) cho web asset thông thường. Logo cần lớn → lấy SVG hoặc file vector/PNG đủ lớn từ designer. Screenshot nhỏ từ điện thoại → giữ gần kích thước gốc hoặc chấp nhận blur nhẹ, đừng fake Full HD.

---

Thứ tự với bước nén WebP

1) Đúng nội dung khung (crop nếu cần — bài aspect)
2) Resize width/height về ~1–2× display   ← bài này
3) Nén WebP/JPEG (quality theo class)      ← tool nén
4) Gắn HTML/srcset + kiểm tra mobile

Đảo (3) trước (2): bạn encode ảnh khổng lồ rồi vẫn phải resize — mất thời gian, và quality thấp dễ bị chọn vì “file còn nặng”.

Sau resize, nếu JPEG vẫn vài trăm KB: mở Nén ảnh WebP, chọn WebP, so sánh trước/sau.

---

Case study

Case 1: Sinh viên — ảnh báo cáo từ điện thoại 12MP

Cần: Chèn Word/PDF + đăng blog trường, rộng ~1000px.

Làm: Giữ tỷ lệ, width 1000 → tải → (tuỳ chọn) nén WebP cho web. File gốc 4MB → dễ còn dưới 300KB sau resize.

Sai: Upload nguyên 4032px lên CMS shared hosting — đầy dung lượng, trang chậm.

Case 2: Freelance — OGP cho landing SME

Cần: 1200×630, logo không bị cắt trên Zalo.

Làm: Crop vùng an toàn trên Figma/ảnh nguồn cho ~1.91:1 → resize đúng 1200×630 trên tool → upload CMS → kiểm tra debugger share.

Sai: Gõ 1200 và 630 lên ảnh dọc 9:16 → logo dẹt, khách reject.

Case 3: Dev — avatar user upload 3000px

Cần: Lưu bản 512×512 cho profile.

Làm: Crop tâm vuông (hoặc face) → resize 512×512 → lưu. Bản gốc có thể giữ riêng nếu policy cho phép.

Sai: Chỉ CSS border-radius trên ảnh 3000px — mỗi trang profile tốn băng thông vô ích.

---

Checklist 2 phút trước khi gửi file

[ ] Biết size đích (OGP / thumb / hero / avatar)
[ ] Nguồn đủ lớn — không upscale
[ ] Giữ tỷ lệ ON trừ khi đã crop đúng khung
[ ] Preview không méo mặt / chữ
[ ] Width ≈ 1–2× CSS slot (không 4×)
[ ] Nếu brief có hạn mức KB → sang tool nén sau
[ ] Tên file rõ: ogp-home-1200x630.webp

---

5 lỗi width/height thường gặp

1. Nhập cả hai cạnh lệch tỷ lệ → mặt dẹt; bật khóa tỷ lệ hoặc crop trước.
2. Upscale ảnh nhỏ → mềm và nặng hơn cảm nhận.
3. Resize “cho đẹp số” 1920×1080 mọi ảnh → không khớp slot thật.
4. Quên EXIF orientation — vài ảnh iPhone xoay sai trước khi xử lý; xoay đúng trong Photos rồi mới resize nếu preview lệch.
5. Chỉ resize, không nén khi brief có trần KB — thiếu bước encode.

---

Khi nào đọc bài aspect/letterbox thay vì bài này?

Câu hỏi của bạn	Đọc
“Nhập width bao nhiêu?”	Bài này
“Cover vs contain, letterbox?”	Bài resize + aspect / letterbox
“WebP quality?”	Bài quality / nén WebP
“AVIF hay WebP?”	Bài so sánh format

Giữ phạm vi hẹp giúp bạn không trộn crop chiến lược với việc gõ số px.

---

Tóm tắt

Width và height bằng pixel là đơn vị làm việc của resize cơ bản. Một cạnh + giữ tỷ lệ khi thu nhỏ; khung cố định thì nguồn phải đúng tỷ lệ trước; không upscale. Tool resize Kawa chạy local — phù hợp OGP, thumb, avatar, ảnh bài viết khi bạn cần đúng size trước khi nén hay upload CMS.

• Đo slot → chọn px (~1–2×)
• Khóa tỷ lệ → nhập width (hoặc height)
• Preview → tải
• Còn nặng → nén WebP

Làm một ảnh OGP thật của project hôm nay — lần sau brief “1200×630” sẽ không còn là đoán mò trên Paint.