Home Hướng dẫn kỹ thuật Cách tối ưu hình ảnh khi up lên website

Cách tối ưu hình ảnh khi up lên website

by admin
0 comment

I. Tại sao phải edit ảnh – Quy trình edit ảnh

Edit ảnh trước khi úp lên website là nhiệm vụ tối quan trọng, giúp website tối ưu hiển thị. Edit ảnh bao gồm các công đoạn:

Công đoạn A: Chỉnh kích thước ảnh + Chọn định dạng (ảnh trong bài viết thường sẽ có kích thước 800Xabc (abc (chiều rộng) có thể thay đổi, thường từ 500-700)

Công đoạn B: Nén ảnh – Nhằm giảm dung lượng (để ảnh tải lên website được nhẹ)

Công đoạn C: Đặt tên ảnh theo chuẩn

II. Công cụ edit ảnh

Để chỉnh sửa ảnh, ta sẽ lần lượt dùng 3 trang web sau:

  1. http://resizeimage.net – dùng chỉnh lại kích thước ảnh và chọn định dạng ảnh (thường là png)
  2. http://tinypng.net – Nén ảnh (định dạng png)
  3. http://compressimage.toolur.com (Nén ảnh, định dạng khác png)

III. Quy trình edit ảnh

Sau đây, mình xin hướng dẫn các bước edit ảnh trước khi up lên website như sau:

Công đoạn A: Chỉnh kích thước ảnh + Chọn định dạng

Bước 0. Chúng ta sẽ lần lượt Edit lại bức ảnh “2” này. Bức ảnh “2” ban đầu có các thông số như sau:

Kích thước: 940X788

Định dạng: png

Size (dung lượng ảnh): 323kb

Tên: “2”

Bước 1. Bạn vào trang http://resizeimage.net, chọn upload, chọn bức ảnh cần chỉnh (bạn chú ý ảnh ban đầu cần có chiều dài (chiều ngang) lớn hơn 800 thì ảnh mới có chất lượng tương đối tốt).

Bạn nhấp vào “Upload an image”

Bước 2: Bạn kéo chuột xuống, vào phần “4. Resize your image”, chọn lại chiều rộng bức ảnh là 800 (chiều dài sẽ được tự động điều chỉnh theo).

Bạn chọn chiều dài là 800, với bức ảnh dùng để up lên website

Bước 3: Bạn lần lượt làm theo hướng dẫn theo hình sau: chọn định dạng và thực hiện các thao tác.

Chiều rộng bức ảnh sẽ tự điều chỉnh theo chiều dài

Các bước bạn cần làm: Chọn định dạng png, mặc định, resize và cuối cùng là download

Bước 4: Thành phẩm.

Ảnh sau khi resize thường sẽ bị đổi tên

Công đoạn B: Nén ảnh.

Ở đây chúng ta dùng https://tinypng.com

Bước 1: Chúng ta upload ảnh lên trình duyệt, bằng cách bấm vào chữ “Drop your .png or .jpg files here!” và chọn ảnh.

Chọn ảnh cần nén

Bước 2: Sau khi ảnh đã được nén (size đã giảm từ 311.7kb xuống 74.9kb), Bạn nhấn vào download (hoặc download all, nếu bạn nén 1 lúc nhiều tấm ảnh). Size ảnh đã giảm đi tới 76%, sau khi nén.

Ảnh sau khi nén, từ 311.7kb xuống 74.9 kb

Chú ý: File ảnh trước và sau khi nén nhìn không khác nhau nhiều, lại trùng tên. Các bạn cẩn thận kẻo nhầm lẫn. Tốt nhất bạn nên chuyển sang công đoạn C ngay, tức là đổi tên.

Đổi tên ảnh là việc cần làm ngay sau khi download hình đã nén

Công đoạn C: Đổi tên

Nguyên tắc bạn cần nhớ đầu tiên: Tên ảnh nhất định phải:

  1. Không dấu
  2. Có gạch nối (ví dụ:meo-may-man-cua-nguoi-nhat)
  3. Tên ảnh cần liên quan đến content bài viết

Ba nguyên tắc đặt tên: Không dấu, có “-” giữa các từ và liên quan chủ đề. Ví dụ:meo-may-man-cua-nguoi-nhat

Bạn sẽ thấy, ảnh trước và sau khi nén không khác nhau nhiều. Dù size bước ảnh sau chỉ bằng 1/4 size bức ảnh ban đầu. Ảnh sau khi bạn đổi tên, hãy lưu ngay vào thư mục bài content đó để tránh quên.

Bạn sẽ thấy, ảnh trước và sau khi nén gần như không khác

Thông số bức ảnh sau chỉnh sửa:

Kích thước: 800X671 (so với 940X788 ban đầu)

Định dạng: png.

Size (dung lượng ảnh): 73,1kb (so với 323kb ban đầu)

Tên: “meo-may-man-cua-nguoi-nhat”.

Vậy là mình đã hướng dẫn xong 3 công đoạn edit ảnh trước khi up lên website. Cám ơn các bạn đã quan tâm theo dõi.

 

 

Related Posts

Leave a Reply

avatar
  Subscribe  
Notify of