Hạt giống tâm hồn

Cuộc sống chính là mảnh đất mà những hạt giống tâm hồn nuôi dưỡng chúng ta trưởng thành..

Tối ưu hóa hình ảnh trước khi Upload lên Website

Phan Tâm 2013-03-11 16:12 Tin Học 24/7 » Thư viện mã nguồn Comments(1)
Việc sử dụng hình ảnh trong thiết kế nhằm nhấn mạnh và nổi bật nội dung website là một vấn đề rất cần thiết đối với mỗi Webmaster. Tuy nhiên không đơn giản chỉ là thiết kế và Upload. Ở nội dung bài viết này Tâm sẽ hướng dẫn các bạn cách để tối ưu hóa hình ảnh trước khi Upload lên Website.

Cụm từ tối ưu hóa hình ảnh trong phạm vi bài viết này là Tâm muốn nói đến việc giảm dung lượng cho hình ảnh trước khi Upload lên. Khi dung lượng giảm thì thời gian trình duyệt tải về sẽ nhanh hơn và đặc biệt cũng sẽ giảm lượng băng thông nếu bạn sử dụng Hosting có giới hạn. Cụ thể hơn là chúng ta sẽ sử dụng phần mềm Photoshop để xử lý, một công cụ rất quen thuộc với anh em thiết kế. Do yêu cầu công việc không quá cao nên hiện tại Tâm đang sử dụng phiên bản Photoshop CS 8.0 đời đầu :D

Hiện tại có 3 định dạng ảnh được sử dụng rộng rãi trong thiết kế website. Đó là định dạng JPG, GIF, PNG. Nói riêng về mảng thiết kế thì JPG ta thường sử dụng cho các hình ảnh thật (cuộc sống, chân dung,...) nói chung là các hình ảnh đầy màu sắc thực. Còn GIF là định dạng ảnh chỉ hỗ trợ 256 màu, do vậy ta thường sử dụng cho các hình ảnh; chi tiết đơn giản không cần nhiều màu sắc. Về PNG, đa phần ta vận dụng nó vào trong các trường hợp hình nền trong suốt.
Ở trên là Tâm vừa nói qua rất ngắn gọn về 3 định dạng ảnh sử dụng phổ biến trong thiết kế Website các bạn nhé. Vì nếu nói rộng ra phạm trù chung thì chúng sẽ còn nhiều điều để nói nữa :) Do vậy phần chi tiết các định dạng này Tâm sẽ gửi ở cuối bài viết này để các bạn tiện theo dõi.

Ta sẽ đi vào nội dung chính là tối ưu hóa hình ảnh mà cụ thể trong bài hướng dẫn này là giảm dung lượng Banner định dạng JPG.
1. Các bạn sử dụng Photoshop để thiết kế banner, sau khi làm xong bạn tiên hành như sau:
Chọn Menu File ----> Chọn Save For Web... Hoặc bạn có thể ấn tổ hợp phím Alt+Shift+Ctrl+S
Tối ưu hóa hình ảnh trước khi Upload lên Website

2. Cửa sổ Save For Web sẽ hiện ra, khung bên trái là hình ảnh ta đang thiết kế, khung bên phải chứa các tham số ta cần quan tâm
Tối ưu hóa hình ảnh trước khi Upload lên Website

Ở mục Preset bạn chọn định dạng cũng như chất lượng. Ở đây với định dạng JPG thì Tâm thường chọn là High. Tùy từng định dạng cũng như màu sắc của hình ảnh mà bạn nên lựa chọn chế độ cho hợp lý, không nhất thiết phải luôn giống như hướng dẫn của Tâm
3. Sau khi đã lựa chọn tham số xong bạn ấn nút Save ở trên cùng để lưu hình ảnh vào máy tính và tiến hành Upload lên Website. Và đây là hình ảnh sau khi đã được tối ưu mà Tâm vừa làm ở trên. Chất lượng vừa đủ, không quá xấu xí lắm phải không các bạn :P
Tối ưu hóa hình ảnh trước khi Upload lên Website

Trên đây là hướng dẫn cơ bản dành cho các bạn về cách tối ưu hình ảnh trong thiết kế website. Có thể đâu đó cũng có nhiều bài tương tự như này rồi tuy nhiên Tâm vẫn muốn gửi đến các bạn, đặc biệt là bạn bè của Tâm. Việc tối ưu này không chỉ riêng trong mảng thiết kế website mà bạn có thể ứng dụng rất nhiều trong công việc hàng ngày khi tiếp xúc với máy tính và điện thoại.
Chúc các bạn thành công :)
Tìm hiểu thêm về 3 định dạng ảnh JPG, GIF, PNG
Phần nội dung này đã được thu gọn. Ấn nút Hiện Ra ở bên để xem Hiện Ra
JPG (Joint Photographic Experts Group)
JPG là 1 định dạng ảnh được phát triển bởi JPEG với mục đích là trở thành định dạng chuẩn cho các nhiếp ảnh gia chuyên nghiệp. Cũng giống như phương thức nén file ZIP là tìm các phần thừa của dữ liệu để nén, JPG chia nhỏ bức ảnh thành những vùng nhỏ hơn. Một khi đã dùng phương thức JPG để nén ảnh, bạn sẽ không thể nào trở lại trạng thái ban đầu. Thường thì công nghệ này chỉ được dùng với mục đích lưu trữ nhiều bức ảnh trong 1 khoảng nhỏ, chứ không dùng để chỉnh sửa ảnh.

JPG đã trở thành định dạng phổ biến nhất trên Internet bởi vì công nghệ nói trên có thể nén ảnh rất nhiều. Giả sử bạn có 1 bức ảnh có kích thước 1MB, bạn hoàn toàn có thể nén nó xuống 500KB hay 100KB, đó chính là lợi thế của JPG.
Khi nén ảnh bằng công nghệ JPG thì chất lượng hình ảnh sẽ giảm đi rất rõ rệt, vì thế công nghệ này không thích hợp để lưu các bức họa. Cho dù là để ở chất lượng nén JPG tốt nhất thì bức ảnh vẫn bị thay đổi 1 chút. Không chỉ vậy, mỗi lần bạn copy hay lưu 1 bức ảnh JPG, chất lượng bức ảnh đó sẽ bị giảm đi. Khi chất lượng hình ảnh bị sụt giảm đi thì ta sẽ thấy những điểm mờ giữa các khối màu, sự mất nét của các vùng ảnh.

GIF (Graphics Interchange Format)
GIF, cũng như JPG, là một định dạng đã có tuổi đời lâu năm và thường được sử dụng kết hợp cùng với mạng Internet. GIF có thể được dịch ra là Định dạng trao đổi hình ảnh và áp dụng phương thức nén LZW giống hệt như định dạng ảnh TIFF sử dụng.
GIF là một tập tin màu 8-bit, có nghĩa là hình ảnh mà tập tin cho ra bị giới hạn bởi 1 bảng gồm 256 màu sắc. Có 2 điều đặc biệt về định dạng GIF đó là tập tin có khả năng lưu lại màu trong suốt và hỗ trợ hình ảnh động.

Tập tin GIF dùng nén dữ liệu bảo toàn trong đó kích thước tập tin có thể được giảm mà không làm chất lượng hình ảnh kém đi (cho những hình ảnh có ít hơn 256 màu). Số lượng tối đa 256 màu làm cho định dạng này không phù hợp cho các hình chụp (thường có nhiều màu sắc), tuy nhiên các kiểu nén dữ liệu bảo toàn cho hình chụp nhiều màu cũng có kích thước quá lớn đối với truyền dữ liệu trên mạng hiện nay.
Định dạng JPEG là dạng nén dữ liệu thất thoát có thể được dùng cho các ảnh chụp, nhưng lại làm giảm chất lượng cho các bức vẽ ít màu, tạo nên những chỗ nhòe thay cho các đường sắc nét, đồng thời độ nén cũng thấp cho các hình vẽ ít màu. Như vậy, GIF thường được dùng cho sơ đồ, hình vẽ nút bấm và các hình ít màu, còn JPEG được dùng cho ảnh chụp.

PNG (Portable Network Graphics)
PNG là dạng hình ảnh sử dụng phương pháp nén dữ liệu mới mà không làm mất đi dữ liệu gốc. PNG được tạo ra nhằm cải thiện và thay thế định dạng ảnh GIF. PNG là định dạng tập tin tuyệt vời cho các ảnh số trên mạng Internet bởi vì PNG hỗ trợ màu trong suốt trong tất cả các trình duyệt web với những tính năng mà GIF không có.

PNG hỗ trợ màu 8-bit giống như GIF, đồng thời cũng hỗ trợ màu 24-bit RGB như JPG. Khi bạn nén một bức ảnh bằng định dạng PNG, bức ảnh đó sẽ không hề bị giảm chất lượng. Chính vì thế dung lượng các bức ảnh PNG rất lớn, lớn nhất trong 3 loại định dạng trong bài viết này. Nhược điểm của ảnh dạng PNG đó là không được hỗ trợ trên các trình duyệt web cũ kĩ, không phổ biến nhiều bằng JPG.

PNG, GIF và JPG là 3 định dạng ảnh phổ biến nhất trên Internet hiện nay và tùy thuộc vào nhu cầu của mỗi người mà chúng ta sẽ sử dụng chúng. PNG hỗ trợ màu trong suốt tốt, giữ được chất lượng ảnh tốt. GIF hỗ trợ tốt các ảnh động và ảnh 8-bit. JPG được áp dụng rộng rãi trong nghề nhiếp ảnh và các bức hình trên Internet, tuy nhiên hãy cẩn thận vì định dạng này sẽ làm giảm chất lượng bức ảnh sau mỗi lần lưu trữ.

Chấm điểm cho bài viết này
Rating: 0.0/5 (0 votes cast)
Bình luận về nội dung bài viết

Password - Optional


HTML UBB MẶT CƯỜI ẨN GHI NHỚ
Tuan Tran Email Homepage 2013-03-12 08:31
hat giong tam hon
Có một chi tiết mà mình nghĩ bạn nên bổ xung ngoài việc tối ưu về dung lượng ra thì cũng nên đặt tên file ảnh theo đúng nội dung mà nó đang cugn cấp , với 2 trường hợp file ảnh là: 2451242.jpg và thu-thuat-wordpress.jpg thì ảnh thứ 2 mình thấy sẽ hiệu nghiệm hơn
Phan Tâm replied on 2013-03-26 18:22
Hi bạn :) Trong nội dung bài viết này mình chỉ bàn đến hình ảnh trong thiết kế giao diện website :)
^ Lên trên