Как уменьшить размер картинки в html CSS

Есть несколько способов уменьшить размер картинки с помощью HTML и CSS.

1. Указать размеры через атрибуты width и height в HTML

<img src="image.jpg" width="300" height="200">

2. Использовать свойство width в CSS

img {
  width: 300px;
}

3. Использовать свойство max-width в CSS

img {
  max-width: 100%;
}

При этом ширина картинки будет уменьшаться пропорционально, чтобы она не выходила за пределы своего содержащего блока.

4. Использовать оба свойства width и max-width в CSS

img {
  width: 300px;
  max-width: 100%;
}

Таким образом, картинка будет иметь фиксированную ширину до тех пор, пока ее размер не станет меньше охвата блока на 100%. Если ширина блока меньше, чем заданная фиксированная ширина картинки, она уменьшится до ширины блока.

Если вам нужно уменьшить размер картинки с сохранением пропорций, то необходимо задать соответствующее значение для свойства height, max-height или height и max-height.