小さくすると画像がぼやける

前提・実現したいこと

Webコース制作初級編と書かれた画像をぼやけない状態で小さくしたいです。

発生している問題・エラーメッセージ

現在このように小さくしたものの画像がぼやけてしまっています。

該当のソースコード

html
1<!DOCTYPE html>
2<html lang="ja">
3  <head>
4    <link rel="stylesheet" href="css/style.css">
5    <meta charset="UTF-8">
6    <title>練習</title>
7  </head>
8  <body>
9    <header>
10      <img src="img/main-vsual.png">
11    </header>
12
13      <h1>デイトラとは</h1>
14      <section>
15        <div class="pic">
16          <img src="img/about.png" alt="" width="500" height="500">
17        </div>
18
19        <div class="desk">
20          <p>デイトラとは、無料で・迷わず・楽しく学べるプログラミング学習アプリです。毎月設定された課題をこなしていくだけで、未経験から30日でプログラミングが身に付きます。
21            1日1題30日でプロのWebエンジニアを目指しましょう。
22          </p>
23        </div>
24      </div>
25    </section>
26
27    <div>
28    <h1>コース一覧</h1>
29
30    <div class="gazo-box">
31      <img src="img/web_first.png" alt="" width="400"height="200">
32      <img src="img/web_second.png" alt="" width="400"height="200">
33      <img src="img/web_third.png" alt="" width="400"height="200">
34    </div>
35    <h1>お問い合わせ</h1>
36    <h2>さあ今日から始めよう</h2>
37    <div class="btn">無料ではじめる</div>
38  </body>
39</html>
40

css
1div {
2  text-align: center;
3}
4
5h1 {
6  color:darkslategray;
7  text-align:center;
8}
9
10section{
11  display:flex;
12}
13
14.pic{
15  margin-right:30px;
16  width: 30%;
17  height: 30%;
18}
19
20.desk{
21  flex: 1;
22  margin: 100px;
23}
24
25.h2{
26  text-align:center;
27  padding-top:100px;
28}
29
30.gazo-box img{
31  justify-content:space-between;
32  border:1px;
33  padding-right:20px;
34  padding-left:20px;
35
36}
37
38.btn{
39  text-decoration: none;
40  font-weight:bold;
41  font-size: large;
42  display:inline-block;
43  background: #ff6666;
44  width:300px;
45  line-height:3;
46  padding:5px;
47  border-radius:5px;
48  color:white;
49}
50
51