14 công cụ thiết kế và hình ảnh miễn phí chạy trong trình duyệt của bạn

Công việc hình ảnh có một vấn đề cụ thể: công việc thường nhỏ và các công cụ được cung cấp rất lớn. Bạn cần loại bỏ 400 KB hình ảnh chính hoặc nhận giá trị hex mà nhà thiết kế của bạn đã đề cập hoặc tạo một biểu tượng yêu thích chưa ai tạo ra. Điều đó không yêu cầu đăng ký.

Mười bốn công cụ bên dưới bao gồm việc chuẩn bị hình ảnh, xử lý màu sắc, tạo hiệu ứng CSS và các nội dung sản xuất nhỏ cần thiết. Mọi thứ đều chạy cục bộ, điều này quan trọng đối với hình ảnh hơn là văn bản: ảnh bạn vừa nén thường là ảnh bạn chưa xuất bản.

Hầu hết các vấn đề về hình ảnh đều thực sự là vấn đề về trọng lượng. Một trang có cảm giác chậm thường chứa những hình ảnh lớn hơn kích thước hiển thị, ở định dạng sai, ở cài đặt chất lượng mà không ai từng thắc mắc.

Bạn nên nén bao nhiêu? Câu trả lời trung thực là: cho đến khi thấy sai thì hãy lùi lại một bước. Đối với một bức ảnh anh hùng, chất lượng từ 70 đến 80 phần trăm thường không thể phân biệt được với ảnh gốc ở kích thước xem bình thường. Đối với logo, ảnh chụp màn hình hoặc bất kỳ thứ gì có màu phẳng và các cạnh cứng, hãy sử dụng PNG và nén mạnh hơn — những thứ này thu được nhiều hơn và mất ít hơn.

Một nguyên tắc nhỏ thực tế: mọi thứ dưới 200 KB đều phù hợp cho hình ảnh chính, dưới 80 KB cho hình thu nhỏ và nếu bạn không thể đạt dưới 300 KB thì có thể bạn đang gặp vấn đề về kích thước chứ không phải vấn đề về chất lượng.

Việc chuyển đổi hình ảnh thành URI dữ liệu Base64 sẽ loại bỏ yêu cầu HTTP, điều này nghe giống như một chiến thắng thuần túy. Thông thường thì không. Chuỗi được mã hóa lớn hơn khoảng một phần ba so với tệp nhị phân, nó không thể được lưu vào bộ nhớ đệm riêng biệt và nó làm cồng kềnh CSS hoặc HTML của bạn.

Chỉ nội tuyến khi hình ảnh nhỏ — dưới vài kilobyte — được sử dụng một lần và rất quan trọng. Một biểu tượng nhỏ trong một mẫu email là trường hợp điển hình. Đối với bất kỳ nội dung nào được lặp lại trên các trang hoặc lớn hơn vài kilobyte, hãy phân phát nó dưới dạng tệp và để trình duyệt lưu vào bộ nhớ đệm.

Hãy rõ ràng về những gì điều này làm. Nó loại bỏ hoặc che khuất dấu hiệu có thể nhìn thấy. Nó không thể tái tạo lại các pixel cơ bản - thông tin được tô lên đã biến mất và không có bộ lọc nào tái tạo lại thông tin đó. Các kết quả có thể từ vô hình khi dấu nằm trên nền trơn cho đến vết ố rõ ràng khi dấu nằm trên chi tiết.

Một điều đáng nói rõ ràng hơn: xóa hình mờ của người khác và xuất bản kết quả là vấn đề bản quyền ở hầu hết các khu vực pháp lý và vi phạm cấp phép bất kể bạn có bị bắt hay không. Công cụ này dành cho trường hợp này.

Màu sắc là nơi những lỗi nhỏ trở nên rất dễ thấy. Tỷ lệ tương phản không hỗ trợ khả năng truy cập, giá trị hex thực sự là bộ ba HSL, bảng màu trông mạch lạc trên màn hình của bạn và mờ trên máy chiếu.

Một lưu ý đối với các công cụ màu sắc: tất cả đều cho rằng màn hình của bạn đã được hiệu chỉnh và người xem trang của bạn có đôi mắt hoạt động tốt. Không có giả định nào là an toàn. Đó là lý do người ta thích những sự kết hợp có kiểm tra độ tương phản hơn là những sự kết hợp chủ quan.

Viết một gradient hoặc một lớp bóng bằng tay là một công việc thực sự khó chịu. Cú pháp khó hiểu, bạn không thể thấy những gì bạn đang tạo ra và sự khác biệt giữa bóng tốt và bóng xấu là một vài pixel mờ.

Bí quyết cho cả bốn người là sự kiềm chế. Hai cái bóng - một cái tối đậm và một cái rộng mềm mại - được coi là độ cao vật lý. Một cái bóng đọc như một trang web từ mười lăm năm trước. Tạo, sao chép, sau đó xóa cho đến khi bạn không thể biết nó ở đó.

Đây là toàn bộ cụm làm một công việc thực sự. Một trang cần một anh hùng có hình nền, tiêu đề và nút, nhưng chưa có anh hùng nào trong số đó được xây dựng.

Năm công cụ, không có bộ thiết kế và mỗi đầu ra là một giá trị mà bạn có thể dán thẳng vào mã.

Hình ảnh của tôi có được tải lên bất kỳ đâu không? Không. Quá trình nén, thay đổi kích thước và chuyển đổi Base64 đều diễn ra trong trình duyệt của bạn, đó là lý do không có giới hạn kích thước tệp và không có hàng đợi tải lên.

Việc nén hình ảnh có làm giảm chất lượng không? Theo định nghĩa, luôn luôn như vậy. Câu hỏi là liệu nó có thể nhìn thấy được hay không. Ở mức 70 đến 80 phần trăm chất lượng và kích thước chính xác thì thường là không.

Tại sao hình ảnh đã thay đổi kích thước của tôi trông vẫn lớn? Chín trong số mười lần bạn đã nén trước khi thay đổi kích thước hoặc bạn đang lưu dưới dạng PNG trong khi ảnh tốt hơn ở định dạng JPEG.

Tôi có thể sử dụng những thứ này cho công việc của khách hàng không? Có, không có ghi công và không có hạn chế thương mại.

Chúng có hoạt động trên điện thoại không? Có, mặc dù việc thay đổi kích thước và nén ảnh lớn trên điện thoại phụ thuộc vào bộ nhớ thiết bị của bạn chứ không phải máy chủ.

Thay đổi kích thước trước khi nén, kiểm tra độ tương phản trước khi tranh luận về màu sắc, giữ bóng tinh tế và không bao giờ quên favicon. Dù sao thì đó cũng là hầu hết những gì một bộ thiết kế đã làm cho bạn.