1. Hình ảnh và các biểu đồ thật sự có thể mang website đến với đời sống
nên việc chuẩn bị những hình ảnh cho trang web là rất quan trọng. Mặt
khác chúng còn có thể làm tăng thời gian mở web.
Khi viết địa chỉ nào đó trên máy tính để bàn hay laptop, có thể bạn ko
thể biết đc mất bao lâu để mở trang web đó; mở những file nằm ngay
trong máy củ bạn nhanh hơn rất nhiều so với khi mở chúng trên mạng
ITN. Vì thế lựa chọn cách định dạng và lưu trữ hình ảnh phù hợp sẽ đảm
bảo cho trang web của bạn sẽ ko bị chậm 1 cách ko cần thiết và điều này
sẽ làm cho khách vào xem hài lòng. Điều này giải thích tại sao chúng ta
sẽ xây dựng phần này dựa trên việc tìm hiểu về những cách định dạng
hình ảnh và chọn cách định dạng nào thì phù hợp.
Trong thực tế, bạn có thể tải h.ả từ bất cứ địa chỉ nào bằng cách click
chuột phải vào hình (hoặc Ctr-click) và sau đó chọn tải h.ả về đĩa hoặc
lưu h.ả theo tùy chọn. tuy nhiên, hãy nhớ rằng h.ả có bản quyền tác giả
và bạn có thể gặp rắc rối về pháp luật nếu sử dung h.ả của ng khác trên
đchỉ của mình.
Hầu hết h.ả tĩnh trên web đc xếp vào loại ảnh Bitmap. Ảnh bitmap là
những ảnh chia h.ả thành 1 lưới những điểm ảnh (pixels) và chỉ rõ màu
sắc của từng điểm ảnh riêng biệt. Nếu bạn nhìn thật gần vào màn hình
máy tính, bạn có thể sẽ thấy đc những điểm ảnh nhỏ làm nên màn hình.
Có rất nhiều cách khác nhau để định dạng ảnh BM, nhưng thường là
JPEG, GIF, TIFF, PNG và nhiều cái khác nữa để gọi ảnh bitmap hay
BMP.
Nếu bạn nhìn vào hình 3-10, bạn sẽ thấy 1 ví dụ của ảnh bitmap, với 1
phần đã đc sửa đổi, bạn có thể thấy rõ những điểm ảnh làm nên bức ảnh
ntn.
Số điểm ảnh trên mỗi inch vuông đc goi là độ phân giải (resolution) của
hình ảnh. Thông thường thì lưu 1 bức ảnh trên web sẽ dùng độ phân giải

2. 72 pixel/ inch, cũng giống với đpg trên màn hình máy tính. Ngược lại,
những bức ảnh đc dùng để in máy in yêu cầu có 300 chấm ảnh (dots)
/inch
Bức ảnh có càng nhìu điểm ảnh hoặc chấm ảnh thì dung lượng ( tính
bằng kb) càng lớn, và thời gian để mở trang web càng lâu. Vì thế, bất cứ
bức ảnh nào sử dụng trên web bạn nên lưu giữ ở mức 72 dots/ inch. Nếu
bạn lưu chúng ở độ phân giải lớn hơn thì sẽ tạo ra file lớn ko cần thiết và
sẽ mất thời gian lâu hơn để tải xuống.
Lưu ý bạn có thể lưu 1 bức ảnh có đpg 300 dots/ inch ở đpg 72 pixels/
inch cho trang web, nhưng bạn ko thể làm tăng dpg của 1 bức ảnh từ 72
pixels /inch thành 30 dots /inch, bởi vì bạn ko biết được 228 điểm ảnh
còn lại có màu gì. Nếu cố gắng làm tăng đpg của bức ảnh thì bức ảnh
thường bị sần sùi. Vì thế, khi bạn có búc ảnh với dpg cao 300 dots/inch,
thì bạn nên chép ra 1 bản sao để dùng cho trang web, còn bức ảnh gốc
bạn nên giữ riêng.
Những trình duyệt web thường hỗ trợ cho những hình ảnh định dạng
bitmap thông thường, và hầu hết chương trình đồ họa sẽ cho lưu giữ h.ả
dưới 3 định dạng:
GIF: Graphics Interchange Format ( phát âm là “gif” hoặc “jif”)
JPEG: Joint Photographic Experts Group Format ( phát âm là
“jaypeg”)
PNG: Portable Network Graphics (phát âm là “pee en gee” hoặc
“ping”)
Hãy cùng nhau tìm hiểu sơ về những định dạng này bởi vì hiểu đc cách
thức chúng định dạng sẽ giúp bạn chọn đc cách lưu giữ h.ả

3. GIF Images
Ả Gif đc tạo nên bởi 1 bản màu (palette) lên tới 256 màu và mỗi điểm
ảnh là 1 trong 256 màu này. Mỗi ả Gif khác nhau sẽ có 1 bản màu khác
nhau gồm 256 màu đc lực chọn từ 1 loạt màu gồm hơn 16 triệu màu.
Chương trình nào lưu giữ b.ả thì sẽ chọn bản màu phù hợp nhất cho b.ả
Những fike gif sẽ lưu trữ những bản màu trong những cái gọi là bảng dò
tìm (lookup table), và mỗi điểm ảnh sẽ có thông tin về màu trong bản dò
tìm hay đúng hơn là mỗi điểm ảnh có thông tin về màu của chính nó.
Điều thuận lợi ở đây là nếu có nhìu điểm ảnh dùng cùng màu thì bức ảnh
sẽ ko lập lại thông tin về màu nữa và kết quả là làm cho file nhỏ hơn. Từ
đó cho thấy file Gif thích hợp cho biểu đồ ( nơi có những vùng có cùng
màu-gọi là màu nhẵn) và ko thích hợp với ảnh chụp ( nơi thường có
nhiều màu khác nhau)
Cách lưu h.ả này đc biết như là định dạng mục lục màu (indexed color
format >>>e ko bit dich cai này ~~). Hình 3-11 cho thấy file Gif đang đc
tạo ra qua chương trình Adobe Photoshop. Ban có thể thấy bản màu của
b.ả nằm ở loạt những ô vuông ở phía dưới, về bên phải.
Nếu 1 ả Gif chứa ít hơn 16 màu ( hay đc biết là 4 bit Gif), thi b.ả có
dung lượng nhỏ hơn b.ả có 256 màu (đc biết là 8-bit gif). Vì thế nếu tạo
nên 1 b.ả chỉ có 16 màu, bạn nên kiểm tra xem chương trình có lưu b.ả
của bạn là ảnh 4 bit gif hay ko, bởi vì điều này sẽ tạo ra 1 file nhẹ, việc
tải xuống sẽ nhanh hơn file 8 bit gif
Ngay cả khi b.ả của bạn nhìn như thể là chỉ có 2 màu, ví dụ 2 đường đen
và trắng,thì nó có thể có nhiếu màu hơn thế. Ví dụ, nếu bạn có 1 đường
vẽ mà cạnh của nó đã đc làm phẳng/ mịn bởi chương trình đồ họa ( là

4. qua trình chống răng cưa- anti aliasing), thi b.ả sẽ chưa nhiều hơn 2
màu bởi vì cạnh của nó đã phãi dùng nhiều màu khác để trông mịn hơn.
Hầu hết các chương trình đồ họa khi lưu trữ Gif mà cần dùng nhiều hơn
256 màu thì sẽ sử dung 1 kỹ thuật gọi là phối màu (dithering) để tạo ra
thêm màu. Có nghĩa là chúng sẽ sử dụng 2 hay nhiều màu trong những
điểm ảnh gần nhau để tạo ra hiệu ứng của 1 màu thứ 3. Phối màu có 2
trở ngại sau:
Nếu màu nhẵn đc để ngay bên cạnh màu đc phối thì ta có thể nhìn thấy
rõ sự thay đổi đó ( bởi vì màu phối đc tạo nên từ hơn 1 màu)
Nó có thể gây ra sự vạch màu (banding). Ví dụ như có 1 sự chuyển tiếp
mịn màng giữa 1 màu và những màu khác ( gọi là sự đổ dốc-gradient),
nhiều hơn 256 sắc thái đc yêu cầu cho sự đổ dốc, vì thế sự phối màu đc
sử dụng, kết quả có thể là sự đổ dốc màu mượt mà bây giờ chỉ còn là 1
dãy những sọc màu.
Hình 3-12 miêu tả chỉ 1 sự đổ dốc đơn giản khi lưu thanh gif co thể gây
ra sự vạch màu ntn, bởi vì bức ảnh chứa hơn 256 màu. Phần chân của
b.ả soi vào khu vực đổ dốc mà bạn có thể thấy rõ sự đổ dốc là những
vạch thẳng đứng hơn là sự chuyễn tiếp mượt mà từ đen sang trắng
Bởi vì Gif chỉ hỗ trợ 256 màu và phải sử dụng đến kỹ thuật phối màu để
có nhiều màu hơn nên nó ko thật sự phú hợp cho hình chụp vì hình chụp
thường có nhiều hơn 256 màu. Nếu bạn có 1 bức ảnh chụp, sự đổ dốc
hay bất cứ b.ả nào có những sắc thái tương tự nhau của cùng 1 màu ở
gần nhau thì tốt hơn bạn nen chọn JPEG, định dạng hỗ trợ ko giới hạn
màu, hoặc có thể là PNG.

5. Gif có1 điểm có ích khác là: bạn có thể chỉ rõ 1 hay nhìu màu trong Gif
trở thành trong suốt - ở những phần ảnh có màu thì nền trong suốt sẽ
cho phép chiếu xuyên qua.
Kỹ thuật này phát huy tác dụng với những hình ảnh có cạnh thẳng tuyệt
đối, bởi vì khi bạn có 1 đường cong, chương trình chỉnh sửa hình ảnh
thường chống răng cưa của đường cong (bằng cách sử dụng nhiều sắc
thái màu) để làm cho b.ả mịn hơn như trong hình 3-13
Tuy nhiên, trong định dạng trong suốt, mỗi điểm ảnh chỉ mở hoặc tắt-
trong hoặc đục, ko có mức độ cho sự trong suốt. kết quả là nếu bạn cố
gắng sử dụng nó cho những góc của đường cong thi những góc đó có thể
bi PIXELATED. Để giải quyết vấn đền này, bạn nên sử dụng màu trong
suốt bằng cách đóng màu nền. ( nếu sử dụng Photoshop, ban co thể sử
dụng đặc điểm làm mờ)
Hình 3-14 cho thấy hiệu ứng PIXELATED đc tạo ra ntn khi ảnh Gif đc
tạo ra trên nền ko fu2 hợp như thế nào ( đặc biệt chú ý những điểm ảnh
sáng hơn nằm ở xung wanh góc)
Để làm cho file gif nhỏ lại, ngta nén chúng bằng kỹ thuật gọi là LZW,
phần mềm có thể quét qua ảnh để tìm những điểm ảnh liên tiếp nhau
chia sẻ cùng 1 màu. Khi nó quét qua những điểm ảnh có cùng 1 màu nó
chỉ ra rằng, từ điểm này, x điểm ảnh có cùng màu.
LZW đc biết là kỹ thuật nén ko thất thoát bởi vì ko có dữ liệu nào bị mất
ví thế chất lượng ảnh cũng ko bi giảm. nó trái với kỹ thuật nén có thất

6. thoát khi mà 1 số dữ liệu bị mất đi trong quá trình nén và vì thế ko thể
khôi phục lại file đã nén trở lại như ban đầu.
Animated GIFs
Những file ảnh gif có thể lưu trữ nhiều hơn 1 khung ảnh (frame) (hay là
những bản sao h.ả) trong cùng 1 file, điều này cho phép Gif có thể xoay
vòng những h.ả và tạo ra 1 phim hoạt hình đơn giản. Nó hoạt động cũng
tương tự như 1 flip-book, trong đó các bức vẽ của mỗi trang sách thay
đổi từ từ bắt đầu từ trang đầu tiên, để khi người xem lật nhanh những
trang sách thì nhìn giống như những bức ảnh đang chuyển động.
Định dạng này sẽ có hiệu quả nếu những hoạt ảnh chứa những vùng lớn
là màu nhẵn, bởi vì khi b.ả bị nén lại sau khung ảnh đầu tiên sẽ chỉ lưu
những điểm ảnh thay đổi cần thiết để tích trữ cho chung ảnh tiếp theo.
Tuy nhiên, no kém thik hợp cho những ảnh chụp bởi vì có rất nhiều
điểm ảnh thay đổi, điều này sẽ tạo ra 1 b.ả rất lớn.
Cũng cần chú ý rằng những hoạt ảnh gif thu hút sự chú ý của khách xem
thường khiến các nhà thiết kế web ko hài lòng vì họ có xu hướng thích
sự đơn giản
Hình 3-15 miêu tả ảnh hoạt ảnh gif đang đc Adobe Image Ready tạo
nên. Cửa sổ phía bên phải cho thấy có 3 chấm ảnh nằm trên 3 lớp ảnh
riêng biệt. cửa sổ ở phía dưới cho thấy khung ảnh 1 của hoạt hình chỉ có
1 chấm ảnh, trong khung ảnh 2 có chấm ảnh dưới cùng và chấm ảnh ở
giữa, và trong khung ảnh 3 là có cả 3 chấm ảnh. Bên dưới mỗii khung
ảnh, bạn có thể nhìn thấy thời lượng mỗi khung ảnh xuất hiện ( 1 giây/
khung)
JPEG Images

7. Định dạng Jpeg là định dạng tiêu chuẩn để lưu và nén những ảnh chụp
với nhiều màu khác nhau. Khi bạn lưu 1 ảnh jpeg, bạn có thể chỉ ra bạn
muốn nén b.ả ntn, điều đó tùy thuộc vào bạn muốn chất lượng của b.ả là
bnhiu. Quá trình nén ảnh jpeg sẽ kéo theo sự loại bỏ những dữ liệu màu
mà người ta thường ko nhận thấy, như là những thay đổi nhỏ về màu.
Tuy nhiên bởi vì khi nén b.ả, có những dữ liệu màu bị loại bỏ nên ta ko
thể khôi phục lại được ảnh gốc từ ảnh đã nén; vì thế kỹ thuật nén này đc
coi là kỹ thuật nén có thất thoát.
Mức độ nén bạn lựa chọn sẽ thay đổi qua từng tấm ảnh, và bạn chỉ có
thể xem xét việc nên nén bao nhiêu bằng cách nhìn vào nó. Vì thế dung
lượng của những file ảnh khác nhau là tùy vào việc bạn muốn nén ntn.
Khi bạn chọn save 1 b.ả, thường thì chương trình sẽ hỏi bạn muốn save
với bnhiu % chất lương ảnh; 100% nghĩa là ko nén bức ảnh, đối với ảnh
chụp, thông thường sẽ nén xuống khoảng 60-70% ( ko nên thấp hơn).
Một vài chương trình sử dụng những từ ngữ khác như tuyệt đẹp, rất đẹp,
đẹp … thay cho % để miêu tả về chất lượng b.ả
1 chương trình chỉnh sửa hình ảnh tốtco1 thể cho phép bạn so sánh ảnh
gốc và ảnh nén ngay bên cạnh nhau khi bạn chọn mức độ nén ảnh. Hình
3-16 cho thấy Adobe Photoshop cho phép bạn so sánh 2 phiên bản của
b.ả khi bạn chuẩn bị ảnh cho trang web. Ở bên trái là ảnh gốc và ở bên
phải là phiên bản đã đc lưu để sử dung trên trang web.
Bởi vì định dạng jpeg đc thiết kế để phù hơp cho những ảnh chụp thực tế
(photo-realistic image), nên nó ko hoạt động tốt đối với những ảnh có
khối lượng màu nhẵn lớn, hoặc những cạnh cứng có độ tương phản cao (
như là những đường vẽ). khi bạn tăng độ nén của ảnh jpeg bạn cũng sẽ
thấy sự vạch màu xảy ra.

8. PNG Images
Định dạng Portable network graphics là địng dạng mới nhất trong số các
định dạng. nó đc phát triển vào giai đoạn cuối những năm 90, lí do là vì
công ty sở hữu bản mẫu định dạng gif ( Unisys) đã quyết định đánh phí
việc tạo ra và xem anh gif của những công ty phát triển phần mềm, buộc
họ phải đóng phí để sử dụng công nghệ gif. Trong khi những nhà thiết
kế web và người chơi web ko bị ảnh hưởng trực tiếp thì những công ty
phần mềm bị ảnh hưởng nhiều.
Định dạng Png đc thiết kế cùng công dụng như định dạng gif, nhưng nó
còn đc tạo ra để giải quyết những vấn đề bất lợi của gif. Kết quả là có 2
loại PNG. Loại 8-bit png có cùng giới hạn như 8-bit gif – chỉ có 256
màu, và sự trong suốt của mỗi điểm ảnh chỉ có thể hoặc tắt hoặc mở.
Ngoài ra có 1 sự nâng cao đó là Png-24, 1 phiên bản 24-bit có 2 điểm
ích lợi chính:
Số lượng màu có sẵn cho 1 b.ả là ko giới hạn, ví vậy bất cứ màu nào
cũng đã có, ko cần lo lắng việc mất bất cứ dữ liệu nào.
Một cái bản đồ ( tương tự như lookup table của gif) đc sử dụng để cung
cấp những mức độ khác nhau của sự trong suốt cho mỗii điểm ảnh làm
cho những cạnh mềm hơn và chống bị răng cưa
Hơn thế nữa là định dạng Png có xu hướng nén tốt hơn định dạng gif.
Tuy nhiên trở ngại thực sự của Png là hiện nay 1 vài trình duyệt cũ vẫn
ko hỗ trợ các định dạng 1 cách đầy đủ. Trong khi các hỗ trợ cơ bản đã đc
đưa ra từ lúc trình duyệt ra đời, thì hiện nay các điểm nâng cấp của các
định dạng vẫn mất khá lâu để đc bổ sung. Ví dụ như Internet Explorer
ko thể xác định đc mức độ trong suốt 1 cách chính xác cho đến khi phiên
bản 7 ra đời.
Làm nhỏ dung lượng file

9. Bạn thường có ý muốn lưu 1 b.ả trên địa chỉ của bạn bằng định dạng có
thể nén tốt nhất, và vì thế làm cho dung lượng nhỏ lại. Trang của bạn ko
những mở nhanh hơn mà còn tiết kiệm đc phí miền cho website
Thông thường thì 1 hay những định dạng là sự lựa chọn rõ rang dành
cho bạn. Quy tắc ngón tay cái là:
Sử dụng Đd Jpeg cho những ảnh chụp với nhiều chi tiết hoặc có những
sắc thái màu khác nhau mà bạn muốn duy trì.
Sử dụng Đd gif hoặc Png cho những ảnh có màu nhẵn (đúng hơn là
những màu đc kết cấu), và có những cạnh cứng như là biễu đồ, văn bản
hoặc logo.
Hãy nhìn váo hình 3-17, 1 bức là ảnh chụp những chiếc lá mùa thu, và
cái thứ 2 là logo của 1 công ty tưởng tượng gọi là Wheels mà chỉ sử
dụng 2 màu
Trong bảng dưới đây sẽ cho bạn thấy dung lượng của mỗi hình đc lưu
dưới đd gif và jpeg ( đd jpeg đc lưu với chất lượng 60%)
Image JPEG GIF
Leaves 54.81k 116.3k
Wheels 8.26k 6.063k
Như bạn thấy, logo Wheels có những màu nhẵn, màu cơ bản trong khi
b.ả rừng sử dụng rất nhiều sắc thái màu khác nhau. Ví thế logo thik hợp
với đd gif hoặc png, còn bức ảnh rừng lá với tất cả những cái bóng của
nó phù hợp với đd jpeg hơn.
Phần mềm chỉnh sửa hình ảnh tốt sẽ rất hữu ích khi bạn sử dụng nhìu
hình ảnh trên trang của bạn. Adobe Photoshop là phần mềm đc các
chuyên gia dùng nhiều nhất mặc dù giá của nó khá đắc. Tuy nhiên, có 1
phiên bản khác có chức năng giới hạn là Photoshop Elements, bao gồm
nhiều chức

10. năng thông thường, kể cả những tùy chọn lưu hình cho web. 2 chương
trình chỉnh sửa hình ảnh phổ biến khác là Paint Shop Pro ( có sẵn trong
Corel tại website www.corel.com ) và 1 phần mềm chỉnh sửa hình ảnh
miễn phí khác là Gimp ( bạn có thể download tại www.gimp.com )
Nếu bạn phải đem len web những b.ả chụp lớn, phứt tạp, thì tốt hơn bạn
nên để cho khách xem phiên bản nhỏ của b.ả khi bắt đầu mở trang, sau
đó bạn tạo thêm 1 link để khách có thể xem đc b.a lớn. Những b.ả nhỏ
này thường đc biết đến như là Thumbnails ( những ảnh nhỏ), và bạn sẽ
thấy chúng trong những galery hình ảnh hoặc những trang chứa phần
tóm tắt thông tin ( như là những trang chủ chứa nhiều trang mới và
những trang có mục liệt kê nhiều sản phẩm, từ đó bạn sẽ đc liên kết đến
trang đầy đủ chi tiết và có hình ảnh lớn hơn.) Hình 3-18 cho thấy 1 ví dụ
của thumbnails trong 1 galery hình ảnh (những b.ả nhỏ ở dưới thì có
kích thước và dung lượng nhỏ hơn b.ả ở phía trên.)
Khi tạo ra 1 phiên bản nhỏ hơn, vùng ảnh sẽ giảm trong chương trình
chỉnh sửa hình ảnh. Ko đơn giản để thay đổi chiều dài và chiều rộng dựa
trên các yếu tố <img> hay <object>, bởi vì người ta vẫn phải download
h.ả với kích cỡ đầy đủ mặc dù họ chỉ muốn xem 1 phiên bản nhỏ của nó
(h.ả đúng kích cỡ sẽ mất nhiều thời gian hơn để download). Bằng cách
tạo ra thumbnails cho những ảnh nhỏ của bạn, trang của bạn sẽ mở
nhanh hơn rất nhiều.
Bạn có thể đã từng nghe về 1 đd khác gọi là đd vector, khá phổ biến
trong những phần mềm minh họa và hoạt họa. Flash, SVG, và
Silverlight đều dùng những đồ họa vevtor. Đd vector lưu giữ thông tin
h.ả dựa hệ tọa độ giữa những đường và hình vẽ. Trong những vùng có
màu sắc thì những đường này vẫn đc nhận ra. Bởi vì chúng dựa trên tọa
độ, nên rất dễ dàng để tăng dung lương của h.ả bằng cách gia tăng

11. khoảng cách giữa các điểm đc đánh dấu tọa độ. Có 1 sự thiếu sót là trình
duyệt không hỗ trợ đd vector nếu ko dùng plug-in. Bạn sẽ tìm hiểu thêm
về plug-ins khi chúng ta nghiên cứu về flash ngay sau đây.