Rate this post
Có nhiều lý do tại sao bạn có thể muốn thêm hình ảnh vào trang web: bạn có thể muốn bao gồm một logo, ảnh, minh họa, sơ đồ hoặc biểu đồ. Có một số điều cần xem xét khi chọn và chuẩn bị hình ảnh cho trang web của bạn, nhưng cần thời gian để có được chúng đúng sẽ làm cho nó trông hấp dẫn và chuyên nghiệp hơn.
Trong bài viết này, bạn sẽ học cách:
- Đưa hình ảnh vào các trang web của bạn bằng HTML
- Chọn định dạng hình ảnh sẽ sử dụng
- Hiển thị hình ảnh ở kích thước phù hợp
- Tối ưu hóa hình ảnh để sử dụng trên web để tạo trang tải nhanh hơn
Bạn cũng có thể sử dụng CSS để đưa hình ảnh vào các trang của mình bằng cách sử dụng thuộc tính background-image mà bạn sẽ gặp trên các trang.
Các bài viết liên quan:
Cách chọn hình ảnh
Hình ảnh có thể được sử dụng để thiết lập giai điệu cho một trang web trong thời gian ngắn hơn nó cần để đọc một mô tả. Nếu như bạn không có ảnh để sử dụng trên trang web của bạn, ở đó là những công ty bán cổ phiếu hình ảnh; đây là những hình ảnh bạn trả tiền để sử dụng (có một danh sách các kho các trang web nhiếp ảnh dưới đây).
Hãy nhớ rằng tất cả các hình ảnh đều tùy thuộc vào bản quyền, và bạn có thể gặp rắc rối vì đơn giản chụp ảnh từ trang web khác.
Nếu bạn có một trang hiển thị một số hình ảnh (chẳng hạn như sản phẩm ảnh hoặc thành viên của một nhóm) sau đó đưa họ vào một nền đơn giản, nhất quán giúp họ trông đẹp hơn khi một nhóm.
Hình ảnh nên …
- Có liên quan
- Truyền đạt thông tin
- Truyền tải đúng tâm trạng
- Có thể nhận ra ngay lập tức
- Phù hợp với bảng màu
Kho ảnh các bạn nên sử dụng là:
- www.istockphoto.com
- www.gettyimages.com
- www.veer.com
- www.sxc.hu
- www.fotolia.com
Lưu hình ảnh vào website
Nếu bạn đang xây dựng một trang web từ đầu, điều đó thật tốt thực hành tạo một thư mục cho tất cả các hình ảnh trang web sử dụng.
Khi một trang web phát triển, giữ hình ảnh trong một thư mục riêng biệt giúp bạn hiểu làm thế nào trang web được tổ chức. Ở đây bạn có thể xem ví dụ về các tệp cho một trang web; tất cả các hình ảnh là được lưu trữ trong một thư mục được gọi là hình ảnh.
Trên một trang web lớn, bạn có thể thích thêm các thư mục con bên trong hình ảnh thư mục. Ví dụ, những hình ảnh như vì các biểu trưng và nút có thể nằm trong một thư mục được gọi là giao diện, sản phẩm những bức ảnh có thể nằm trong một trang được gọi là sản phẩm và hình ảnh liên quan đến tin tức có thể sống trong một thư mục được gọi là tin tức.
Nếu bạn đang sử dụng một nội dung hệ thống quản lý hoặc viết blog nền tảng, thường có các công cụ được tích hợp vào trang web quản trị cho phép bạn tải lên hình ảnh, và chương trình có thể sẽ đã có một thư mục riêng cho các tệp hình ảnh và bất kỳ tải lên khác.
Thêm hình ảnh vào trang web
<img>
Để thêm hình ảnh vào trang bạn cần sử dụng <img> yếu tố. Đây là một trống rỗng phần tử (có nghĩa là có không có thẻ đóng). Nó phải mang hai thuộc tính sau:
- src
Điều này cho trình duyệt biết nơi nó có thể tìm thấy tệp hình ảnh. Cái này thường sẽ là một URL tương đối trỏ đến một hình ảnh trên của bạn trang web riêng. (Ở đây bạn có thể thấy rằng những hình ảnh nằm trong một thư mục con được gọi là hình ảnh.
- alt
Điều này cung cấp một mô tả văn bản của hình ảnh mô tả hình ảnh nếu bạn không thể nhìn thấy nó.
- title
Bạn cũng có thể sử dụng tiêu đề thuộc tính với phần tử <img> cung cấp thông tin bổ sung về tấm ảnh. Hầu hết các trình duyệt sẽ hiển thị nội dung của cái này thuộc tính trong một chú giải quá mức khi người dùng di chuột qua hình ảnh.
Văn bản được sử dụng trong thuộc tính alt thường được gọi là văn bản thay thế. Nó sẽ cung cấp một chính xác mô tả nội dung hình ảnh vì vậy nó có thể được hiểu bởi phần mềm đọc màn hình (được sử dụng bởi người khiếm thị) và các công cụ tìm kiếm.
Nếu hình ảnh chỉ để tạo ra một trang trông hấp dẫn hơn (và nó không có ý nghĩa, chẳng hạn như đường kẻ đồ họa), sau đó là thuộc tính alt vẫn nên được sử dụng nhưng các dấu ngoặc kép nên được để lại trống.
Bạn cũng sẽ thường thấy một <img> phần tử sử dụng hai thuộc tính khác xác định kích thước của nó:
- Chiều cao
Điều này chỉ định chiều cao của hình ảnh tính bằng pixel.
- chiều rộng
Điều này chỉ định chiều rộng của hình ảnh tính bằng pixel.
Hình ảnh thường mất nhiều thời gian hơn để tải hơn mã HTML tạo nên phần còn lại của trang.
Do đó, đó là một ý kiến hay để chỉ định kích thước của hình ảnh để trình duyệt có thể kết xuất phần còn lại của văn bản trên trang trong khi để lại đúng số lượng không gian cho hình ảnh tĩnh.
<img src="images/test_image.jpg" alt="test" title="test_image" />
Chúng ta nên đặt hình ảnh ở đâu
Nơi đặt hình ảnh trong mã sẽ ảnh hưởng đến cách nó được hiển thị. Đây là ba ví dụ về vị trí hình ảnh tạo ra các kết quả khác nhau:
1: trước một đoạn văn
Đoạn văn bắt đầu trên một dòng sau hình ảnh.
2: bên trong sự bắt đầu của một đoạn văn
Hàng văn bản đầu tiên căn chỉnh với dưới cùng của hình ảnh.
3: ở giữa đoạn văn
Hình ảnh được đặt giữa từ của đoạn văn mà nó xuất hiện trong.
Nơi bạn đặt hình ảnh vào mã rất quan trọng bởi vì trình duyệt hiển thị các phần tử HTML bằng một trong hai cách:
Các phần tử khối luôn xuất hiện trên một dòng mới. Ví dụ về khối các phần tử bao gồm <h1> và phần tử <p>.
Nếu <img> được theo sau bởi một phần tử cấp khối (chẳng hạn như đoạn văn) rồi đến mức khối phần tử sẽ nằm trên một dòng mới sau khi hình ảnh hiển thị trong ví dụ đầu tiên trên trang này.
Các phần tử nội tuyến nằm trong một phần tử cấp khối và không bắt đầu trên một dòng mới. Ví dụ về các phần tử nội tuyến bao gồm <b>, phần tử <em> và <img>.
Nếu phần tử <img> nằm bên trong phần tử cấp khối, bất kỳ văn bản nào hoặc các phần tử nội tuyến khác sẽ chảy xung quanh hình ảnh như được hiển thị trong ví dụ thứ hai và thứ ba trên trang này.
<img src="images/test.gif" alt="test_Bird" width="100" height="100" /> <p>There are around 10,000 living species of birds that inhabit different ecosystems from the Arctic to the Antarctic.</p> <hr /> <p><img src="images/test.gif" alt="test_bird" width="100" height="100" />There are around 10,000 living species of birds that inhabit different ecosystems from the Arctic to the Antarctic.</p> <hr /> <p>There are around 10,000 living species of birds that inhabit different ecosystems from the Arctic to the Antarctic.<img src="images/test.gif" alt="test_bird" width="100" height="100" />Many species undertake long distance annual migrations, and many more perform shorter irregular journeys.</p>
Căn chỉnh chiều ngang
Thuộc tính align là thường được sử dụng để chỉ ra cách các phần khác của trang phải dòng chảy xung quanh một hình ảnh. Nó có đã bị xóa khỏi HTML5 và các trang web mới nên sử dụng CSS để kiểm soát sự liên kết của hình ảnh
Tôi đã thảo luận về nó ở đây bởi vì bạn có khả năng đi qua nó nếu bạn nhìn vào mã cũ hơn, và bởi vì một số trình chỉnh sửa hình ảnh vẫn chèn thuộc tính này khi bạn cho biết hình ảnh phải như thế nào thẳng hàng.
Thuộc tính align có thể lấy các giá trị ngang này:
- left
Điều này căn chỉnh hình ảnh ở bên trái (cho phép văn bản chảy xung quanh bên tay phải).
- right
Điều này căn chỉnh hình ảnh sang bên phải (cho phép văn bản chảy xung quanh phía tay trái).
Cái này trông gọn gàng hơn rất nhiều có một dòng văn bản bên cạnh hình ảnh (như được hiển thị trên ví dụ trước).
Khi bạn căn chỉnh thuộc tính một giá trị bên trái, hình ảnh được đặt ở bên trái và dòng chảy xung quanh nó.
Khi bạn căn chỉnh thuộc tính một giá trị của quyền, hình ảnh được đặt ở bên phải và dòng chảy xung quanh nó.
Khi văn bản chảy sang phải cạnh của một hình ảnh nó có thể tạo ra khó đọc hơn. Bạn sẽ học cách thêm khoảng cách giữa văn bản và hình ảnh trên các trang sử dụng phần padding CSS và margin
Căn chỉnh theo chiều dọc
Như bạn đã thấy ở trang cuối cùng, thuộc tính align không còn được sử dụng trong HTML5, nhưng nó được đề cập ở đây bởi vì bạn có thể thấy nó được sử dụng trong các trang web cũ hơn và nó vẫn được sử dụng trong mã được tạo bởi một số biên tập viên trực quan.
Bạn có thể xem cách sử dụng CSS để đạt được những hiệu ứng tương tự.
Có ba giá trị mà thuộc tính align có thể lấy đó kiểm soát hình ảnh sẽ như thế nào căn chỉnh theo chiều dọc với văn bản bao quanh nó:
- top
Điều này căn chỉnh dòng đầu tiên của văn bản xung quanh với đầu bức hình.
- center
Điều này căn chỉnh dòng đầu tiên của văn bản xung quanh với giữa của hình ảnh.
- bottom
Điều này căn chỉnh dòng đầu tiên của văn bản xung quanh có dưới cùng của hình ảnh.
Giá trị của những vị trí hàng đầu là giá trị đầu tiên dòng văn bản gần đầu hình ảnh và các dòng tiếp theo của văn bản xuất hiện dưới hình ảnh.
Giá trị của những vị trí trung gian dòng đầu tiên của văn bản gần dọc giữa hình ảnh vàcác dòng văn bản tiếp theo xuất hiện dưới hình ảnh.
Giá trị của dưới cùng đặt dòng đầu tiên của văn bản gần cuối của hình ảnh và tiếp theodòng văn bản dưới hình ảnh.
Khi văn bản chảy sang phải cạnh của một hình ảnh nó có thể tạo ra khó đọc hơn. Bạn sẽ học cách thêm khoảng cách giữa văn bản và hình ảnh trên các trang.
sử dụng phần padding CSS và thuộc tính margin.
Nếu bạn muốn tất cả các văn bản để quấn quanh hình ảnh (đúng hơn là không chỉ một dòng văn bản), bạn nên sử dụng CSS float
Trong code cũ hơn, bạn có thể thấy thuộc tính align được sử dụng với giá trị bên left hoặc bên right để đạt được cùng một hiệu ứng (như được mô tả trên trang trước), mặc dù nósử dụng không còn được khuyến khích
3 bước để tạo hình ảnh cho trang web
Có ba quy tắc cần nhớ khi bạn đang tạo hình ảnh cho trang web của bạn tóm tắt dưới đây.
- Lưu hình ảnh vào định dạng phù hợp
Các trang web chủ yếu sử dụng hình ảnh trong định dạng jpeg, gif hoặc png. nếu bạn chọn sai hình ảnh định dạng thì hình ảnh của bạn có thể trông không sắc nét như nó cần và có thể tạo trang web tải chậm hơn.
- Lưu hình ảnh tại Đúng kích cỡ
Bạn nên lưu hình ảnh tại cùng chiều rộng và chiều cao nó sẽ xuất hiện trên trang web. Nếu như hình ảnh nhỏ hơn chiều rộng hoặc chiều cao mà bạn có được chỉ định, hình ảnh có thể được bị bóp méo và kéo dài. Nếu hình ảnh lớn hơn chiều rộng và chiều cao nếu bạn đã chỉ định, hình ảnh sẽ mất nhiều thời gian hơn để hiển thị trên trang.
- Sử dụng đúng resolution
Màn hình máy tính được tạo thành của các chấm được gọi là pixel. Hình ảnh được sử dụng trên web cũng được thực hiện lên của các chấm nhỏ. Độ phân giải đề cập đến số chấm trên mỗi inch, và hầu hết chỉ màn hình máy tính hiển thị các trang web ở 72 pixel mỗi inch. Vì vậy, lưu hình ảnh tại độ phân giải cao hơn dẫn đến hình ảnh lớn hơn cần thiết và mất nhiều thời gian hơn để Tải xuống.
Công cụ tạo hình ảnh
Có một số công cụ bạn có thể sử dụng để chỉnh sửa và lưu hình ảnh để đảm bảo rằng chúng là đúng kích thước, định dạng và độ phân giải. Công cụ phổ biến nhất trong số
chuyên gia web là Adobe Photoshop. (Thực tế, chuyên nghiệp các nhà thiết kế web thường sử dụng phần mềm để thiết kế toàn bộ trang web.)
Phiên bản đầy đủ của Photoshop là đắt, nhưng có một rẻ hơn phiên bản có tên là Photoshop Các yếu tố phù hợp với nhu cầu của hầu hết người mới bắt đầu.
Phần mềm khác
- Adobe Fireworks
- Pixelmator
- PaintShop Pro
- Paint.net
- www.photoshop.com
- www.pixlr.com
- www.splashup.com
- www.ipiccy.com
Định dạng File image
JPEG
Bất cứ khi nào bạn có nhiều khác nhau màu sắc trong ảnh bạn nên sử dụng JPEG.
Một bức ảnh có tuyết hoặc một bầu trời u ám có thể trông giống như bầu trời rộng lớn các khu vực chỉ có màu trắng hoặc xám, những bức tranh thường được tạo thành từ nhiều màu sắc khác nhau một cách tinh tế.
GIF và PNG
Sử dụng định dạng GIF hoặc PNG khi lưu hình ảnh có ít màu hoặc lớn các khu vực có cùng màu.
Không gian image
Hình ảnh bạn sử dụng trên trang web của mình phải là được lưu ở cùng chiều rộng và chiều cao mà bạn muốn chúng xuất hiện trên trang.
Ví dụ, nếu bạn có đã thiết kế một trang để bao gồm một hình ảnh rộng 300 pixel x Cao 150 pixel, hình ảnh bạn sử dụng phải là 300 x 150 pixel. Bạn có thể cần sử dụng chỉnh sửa hình ảnh các công cụ để thay đổi kích thước và cắt hình ảnh. Khi tìm nguồn cung ứng hình ảnh, nó điều quan trọng là phải hiểu làm thế nào bạn có thể thay đổi kích thước của một tấm ảnh; tưởng tượng rằng bạn đã có thiết kế một trang web để bao gồm một hình ảnh rộng 300 pixel cao 150 pixel:
Bạn có thể giảm kích thước của hình ảnh để tạo ra một phiên bản của hình ảnh.
Ví dụ: Nếu hình ảnh của bạn là 600 rộng pixel và cao 300 pixel, bạn có thể giảm kích thước của hình ảnh giảm 50%. Kết quả: Điều này sẽ tạo ra một hình ảnh tải xuống nhanh hơn.
Bạn không thể tăng kích thước của ảnh đáng kể mà không có ảnh hưởng đến chất lượng hình ảnh.
Ví dụ: Nếu hình ảnh của bạn chỉ Rộng 100 pixel x cao 50 pixel, tăng kích thước lên 300% sẽ dẫn đến chất lượng kém. Kết quả: Hình ảnh sẽ mờ hoặc khối.
Chỉ một số hình ảnh có thể được cắt xén mà không làm mất giá trị thông tin (xem trang tiếp theo). Ví dụ: Nếu hình ảnh của bạn là 300 pixel vuông, bạn có thể xóa các phần của nó, nhưng khi làm như vậy bạn có thể mất thông tin có giá trị. Kết quả: Chỉ một số hình ảnh có thể được cắt và vẫn có ý nghĩa.
