Cách sử dụng máy ảnh số để thêm hình ảnh vào HTML5 và CSS3 của bạn Dựa trang Web - núm vú

Máy ảnh và máy quét kỹ thuật số thật tuyệt vời trong những ngày này. Bạn có thể sử dụng chúng để thêm hình ảnh vào trang web HTML5 và CSS3 của mình. Ngay cả các máy ảnh giá vừa phải cũng có thể tiếp cận độ phân giải của các camera analog cũ. Máy quét cũng có khả năng chụp ảnh truyền thống và chuyển đổi chúng sang các định dạng kỹ thuật số mà máy tính sử dụng.

Tuy nhiên trong cả hai trường hợp, hình ảnh mặc định có thể ở định dạng gây ra vấn đề. Hình ảnh kỹ thuật số được lưu trữ dưới dạng một loạt các chấm, hoặc pixel. Trong bản in, các dấu chấm rất gần nhau, nhưng màn hình máy tính có dấu chấm lớn hơn. Hình ảnh này là thẳng từ máy ảnh kỹ thuật số.

Ảnh này (chụp trên một máy ảnh kỹ thuật số cũ hơn) đăng ký ở độ phân giải 6 megapixel (MP). Đó là một độ phân giải khá tốt, nhưng máy ảnh số hiện đại cao hơn nhiều. Nếu bạn in ảnh trên giấy, tất cả những chấm đó đều rất nhỏ và bạn sẽ có được một bức tranh đẹp. Nếu bạn cố gắng hiển thị cùng một hình ảnh trên màn hình máy tính, bạn chỉ thấy một góc.

Hình ảnh thực tế này xuất hiện ở chiều rộng 2, 816 pixel rộng 2, cao 112 pixel. Bạn chỉ nhìn thấy một góc nhỏ của hình ảnh vì ảnh chụp màn hình được chụp ở độ phân giải 1024 × 768 pixel. Ít hơn một phần tư hình ảnh hiển thị.

Khi bạn xem một hình lớn trong hầu hết các trình duyệt, nó sẽ tự động thay đổi kích thước để phù hợp với trang. Con trỏ thường biến thành một loại kính lúp, và nếu bạn nhấp vào hình ảnh, bạn có thể nhìn thấy nó trong kích thước đầy đủ hoặc kích thước nhỏ hơn.

Một số trình xem hình ảnh có hình ảnh rất lớn và tự động thay đổi kích thước chúng để chúng vừa với màn hình. (Đây là hành vi mặc định của trình xem hình ảnh mặc định của Windows và hầu hết các trình duyệt.) Hình ảnh có thể có kích thước hợp lý vì tính năng này, nhưng sẽ rất lớn và khó tải xuống trong một trang web thực. Hãy chắc chắn rằng bạn đã biết kích thước thực của một hình ảnh trước khi bạn sử dụng nó.

Mặc dù co lại một hình ảnh để nó có thể được nhìn thấy trong toàn bộ rõ ràng là có lợi, có một lý do thậm chí còn hấp dẫn hơn để làm như vậy. Mỗi pixel trên màn hình yêu cầu 3 byte bộ nhớ máy tính. (A byte là đơn vị cơ bản của bộ nhớ trong máy tính). Để so sánh các mục đích, một ký tự của văn bản yêu cầu khoảng 1 byte.

Hình ảnh không nén của con tàu nặng 17 megabytes (MB). Nếu bạn nghĩ một từ dài năm ký tự, một bức ảnh thẳng từ máy ảnh kỹ thuật số sẽ chiếm khoảng không gian lưu trữ và thời gian truyền giống như khoảng 3, 400.000 từ.Hình ảnh này cần gần ba phút để tải xuống trên một modem 56K!

Trong trang web, hình ảnh nhỏ thường được hiển thị ở khoảng 320 x 240 pixel, và các hình ảnh lớn hơn thường là 640 x 480 pixel. Nếu bạn sử dụng phần mềm để resample hình ảnh với kích thước mà bạn thực sự cần và sử dụng một thuật toán nén thích hợp, bạn có thể nhận được hình ảnh để xem bên phải.

Phiên bản mới của hình ảnh là kích thước và định dạng tệp tin là cần thiết, nó trông cũng tốt, và nó nặng 88 kb nhiều hợp lý. Đó là 2 phần trăm kích thước hình ảnh ban đầu.

Mặc dù hình ảnh này nhỏ hơn rất nhiều so với hình ảnh ban đầu, nhưng nó vẫn chiếm nhiều bộ nhớ hơn so với văn bản. Ngay cả hình ảnh nhỏ hơn này cũng mất nhiều thời gian truyền và không gian lưu trữ như 1, 600 từ! Phải mất 10 giây để tải xuống mà không có kết nối băng thông rộng. Sử dụng hình ảnh một cách khôn ngoan.

Hình ảnh thật tuyệt vời, nhưng lưu ý một số điều khi bạn sử dụng chúng:

• Đảm bảo rằng các hình ảnh có giá trị hiển thị. Không sử dụng ảnh mà không có lý do chính đáng vì mỗi bức ảnh làm cho trang của bạn chậm hơn đáng kể.

• Sử dụng phần mềm để thay đổi kích thước hình ảnh của bạn. Bạn thậm chí có thể sử dụng phần mềm miễn phí để thay đổi hình ảnh chính xác đến kích thước bạn cần.

• Sử dụng định dạng nén. Hình ảnh gần như không bao giờ được sử dụng ở định dạng gốc của chúng trên web vì chúng chỉ là quá lớn. Một số định dạng xuất hiện rất hữu ích cho việc làm việc với nhiều loại hình ảnh khác nhau.