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, hình ảnh, minh họa, sơ đồ hoặc biểu tượng. Có một số điều cần xem xét khi lựa chọn và chuẩn bị cấu 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 nhằm tạo trang tải nhanh hơn
Bạn 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 nền-hình ảnh mà bạn cũng sẽ thấy trên các trang
Các bài viết liên quan
- Cách sử dụng hình ảnh trong Post
- Xây dựng backlink từ hình ảnh
- Hướng dẫn mã hóa địa lý hình ảnh cho SEO Địa phương
- Thao tác cơ bản trên ảnh Opencv
- Bộ dữ liệu (data set) hay nhất cho machine learning
Tóm tắt nội dung
- Cách chọn hình ảnh
- Lưu hình ảnh vào trang web
- Thêm hình ảnh vào trang web
- Chúng ta nên đặt cấu hình ảnh ở đâu
- Căn chỉnh chiều ngang
- Căn chỉnh theo chiều dọc
- 3 bước để tạo ảnh cho trang web
- Công cụ tạo hình ảnh
- File image format
- Không gian hình ảnh
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, thì ở đó là những công ty bán cổ phiếu hình ảnh;
Hãy nhớ rằng tất cả các hình ảnh đều thuộc về bản quyền và bạn có thể gặp rắc rối vì chỉ đơn giản là 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 (không giới hạn như sản phẩm ảnh hoặc thành viên của một nhóm) thì sau đó đưa họ vào một nền đơn giản, quán nhất giúp họ trông đẹp hơn khi ở trong một nhóm
Hình ảnh nên …
- Có liên quan
- Truyền đạt thông tin
- Tâm trạng truyền tải chính xác
- Cannot got a now setting
- 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. những hình ảnh đẹp. com
- www. đổi hướng. com
- www. sxc. hu
- www. fotolia. com
Lưu hình ảnh vào trang web
Nếu bạn đang xây dựng một trang web từ đầu, điều đó thật tốt khi thực hiện việc 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. Tại đây, bạn có thể xem ví dụ về các tệp cho một trang web;
Trên một trang web lớn, bạn có thể thích thêm các mục con bên trong thư mục hình ảnh. Ví dụ, những bức ảnh như vậy vì các biểu tượng và nút có thể nằm trong một thư mục được gọi là giao diện, những bức ảnh sản phẩm 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
Nếu bạn đang sử dụng một hệ thống quản lý nội dung hoặc viết blog nền tảng, thông thường 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
Thêm hình ảnh vào trang web
Chúng ta nên đặt cấu hình ảnh ở đâu
Nơi đặt hình ảnh trong mã ảnh sẽ ảnh hưởng đến cách nó được hiển thị. Đây là 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ản bắt đầu trên một dòng sau hình ảnh
2. side in the started of a textđoạn
Hàng văn bản đầu tiên căn chỉnh với bên 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
và phần tử
.
Nếu
Căn chỉnh chiều ngang
Thuộc tính căn chỉnh thường được sử dụng để chỉ cách các phần khác của trang phải dòng xung quanh một hình ảnh. Nó đã bị xóa khỏi HTML5 và các trang web mới nên sử dụng CSS để kiểm tra các 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 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 biết hình ảnh phải như thế nào
Thuộc tính căn chỉnh có thể lấy các giá trị ngang này
- bên trái
Điều này căn bản chỉnh sửa hình ảnh ở bên trái (cho phép văn bản chảy xung quanh bên tay phải)
- bên phải
Điều này dựa trên việc chỉnh sửa hình ảnh sang bên phải (cho phép văn bản chảy xung quanh phía bên trái)
Cái này nhìn 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 một hình ảnh, nó có thể tạo ra độ khó đọc cao hơn. Bạn sẽ học cách bổ sung khoảng cách giữa văn bản và hình ảnh trên các trang sử dụng phần đệm CSS và lề
Căn chỉnh theo chiều dọc
Như bạn đã thấy ở trang cuối cùng, thuộc tính căn chỉnh không còn được sử dụng trong HTML5, nhưng nó được cập nhật ở đâ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
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 căn chỉnh có thể lấy đó kiểm tra giám sát hình ảnh sẽ như thế nào căn cứ điều chỉnh theo chiều dọc với văn bản bao quanh nó
- đứng đầu
Điều này căn cứ để chỉnh sửa dòng đầu tiên của văn bản xung quanh với bức hình đầu tiên
- trung tâm
Điều này căn cứ để chỉnh sửa dòng đầu tiên của văn bản xung đột giữa các hình ảnh
- đáy
Điều này căn cứ để chỉnh sửa dòng đầu tiên của văn bản xung quanh bên dưới cùng của hình ảnh
Giá trị của các vị trí hàng đầu là giá trị đầu tiên của 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 bên dưới hình ảnh
Giá trị của các 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
The value of the bottom of the same set the first line of the text near the end of the image and next to the line text bottom of the image
Khi văn bản chảy sang phải cạnh một hình ảnh, nó có thể tạo ra độ khó đọc cao hơn. Bạn sẽ học cách bổ sung khoảng cách giữa văn bản và hình ảnh trên các trang
sử dụng phần đệm CSS và thuộc tính lề
Nếu bạn muốn tất cả các văn bản để xem xung 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 mã cũ hơn, bạn có thể thấy thuộc tính căn chỉnh được sử dụng với giá trị bên trái hoặc bên phải để đạt được cùng một hiệu ứng (như được mô tả trên trang trước), mặc dù ứng dụng của nó không còn được khuyến khích
3 bước để tạo ảnh cho trang web
Có ba quy tắc cần nhớ khi bạn đang tạo cấu hình cho trang web của bạn dưới đây.
- Save the image to a fixed format
Các trang web chủ yếu sử dụng hình ảnh ở định dạng jpeg, gif hoặc png. nếu bạn chọn định dạng hình ảnh sai thì hình ảnh của bạn có thể trông không rõ nét như nó cần và có thể tạo trang web tải chậm hơn
- Save the image at Đúng kích thước
Bạn nên lưu hình ảnh ở cùng chiều rộng và chiều cao mà 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 đã định sẵn, thì hình ảnh có thể 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 độ phân giải
Màn hình máy tính được tạo thành của các điểm được gọi là pixel. Hình ảnh được sử dụng trên web cũng được thực hiện trên các điể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 trên mỗi inch. Vì vậy, lưu hình ảnh ở độ phân giải cao hơn dẫn đến hình ảnh cần thiết hơn 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 ảnh để đảm bảo rằng chúng đú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ộ web. )
Phiên bản đầy đủ của Photoshop là đắt, nhưng có giá 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
Other soft
- pháo hoa adobe
- Máy tạo điểm ảnh
- PaintShop Pro
- Sơn. mạng lưới
- www. photoshop. com
- www. pixlr. com
- www. giật gân. com
- www. ipiccy. com
File image format
JPEG
Bất kể khi nào bạn có nhiều màu sắc khác nhau trong ảnh, bạn nên sử dụng JPEG
Một bức ảnh có tuyết hoặc 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 ảnh có ít màu hoặc nhiều khu vực có cùng màu
Không gian hình ảnh
Hình ảnh bạn sử dụng trên trang web của mình phải đượ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 đã 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 công cụ chỉnh sửa hình ảnh để thay đổi kích thước và cắt hình ảnh. Khi tìm nguồn cung cấp hình ảnh, đ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;
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 pixel rộng và cao 300 pixel, bạn có thể giảm kích thước của hình ảnh xuống 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 ảnh hưởng đến chất lượng hình ảnh
Ví dụ. Nếu hình ảnh của bạn chỉ ruộng 100 pixel x cao 50 pixel, việc 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ẽ bị mờ hoặc bị chặn
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à hình vuông 300 pixel, 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 bỏ và vẫn có ý nghĩa