создание огромных пиксельных изображений в соответствии с заданной шириной и высотой

Question

У меня проблема с изображениями и их пикселями probem.well, позвольте мне сказать вам это. Я получил изображение 2448 x 3264 пикселей. Так что это большое изображение, я просто решил уменьшить его размер, используя этот способ

 <img src="1.jpg" style="width:600px;height:500px"/>

Но есть проблема, которую я вижу, картинка теряет свою четкость и видимость, выглядит как будто она притянута ближе, а человек на изображениях выглядит так безобразно. Я уверен, что есть способ сделать это, потому что я вижу результат изображений Google, а также на некоторых веб-сайтах, которые я пытался увидеть их код, но не смог понять это.

Может ли кто-нибудь сказать мне, как сделать так, чтобы изображения выглядели хорошо, даже если у них слишком большое разрешение, и чтобы они соответствовали заданной ширине?

Обновление

Хорошо, теперь я понимаю, что нам нужна некоторая обработка изображений на стороне сервера, и кто-нибудь может сказать мне, как это сделать? Спасибо

Answer 1

Самым распространенным методом является изменение размера изображения на стороне сервера.Когда изображение загружается на сервер (например, пользователем), сервер берет его, создает и создает необходимые миниатюры.

К сожалению, этого нельзя сделать с помощью HTML, CSS или JavaScript.И есть много минусов в форсировании размера изображения с помощью CSS.Например, пользователь должен загрузить все изображение (думаю, у вас около 6 МБ), и это может занять много времени.

Answer 2

Чтобы изображения сохраняли четкость, вам необходимо поддерживать соотношение сторон. Соотношение сторон - это соотношение ширины и высоты изображений, и если вы изменяете размеры изображений, сохраняя соотношение, то их четкость сохраняется. Вы получаете испорченное изображение, потому что 2448/3264! = 600/500.

Теперь размер тега изменяется по соотношению сторон, если вы задаете только один из атрибутов ширины или высоты. например:

<img src="your_src" width=600> 

Это позволит поддерживать соотношение сторон (вычисляет необходимую высоту). Однако это может иногда приводить к проблемам, если у вас есть ограничение максимальной высоты, потому что пересчитанная высота может превышать высоту div, если у вашего div максимальная высота.

Если у вас есть ограничения max-height и max-width, вы можете использовать следующий код для изменения размера изображения с помощью JS. Я предполагаю, что значения max-width и max-height равны 600px и 500px соответственно, и вы можете изменить их в соответствии с вашими потребностями:

height = this.clientHeight;
width = this.clientWidth;

aspectRatio =  width / height;
if (height > width)
{
    height = 500;
    width = height * aspectRatio;
}
else if (width > height)
{
    width = 600;
    height = width / aspectRatio;
}
this.setAttribute("height", height+"px");
this.setAttribute("width", width+"px");

Answer 3

Что вам нужно, это обработка изображений на стороне сервера.Например, phpThumb или другая реализация в зависимости от вашей серверской платформы.

Пример:

<img src="../phpThumb.php?src=1.jpg&w=600" />

phpThumb откроет изображение, переданное в src ,и измените его размер до ширины, передаваемой в w -> образе процесса на лету и выводится в браузер.

Answer 4

Чтобы получить лучшее качество, вам нужно нечто большее, чем только HTML.Вы должны изменить размеры изображений вручную, либо использовать некоторые серверные сценарии для подготовки изображений перед рендерингом (лучше даже сделать это при загрузке, если вы уверены в определенных размерах).

Answer 5

Попробуйте использовать простой HTML. Это также поможет, если у вас есть правильное соотношение ширина: высота (в данном случае 3: 4)

так:

<img src="1.jpg" width="375" height="500"/>

Answer 6

Ни на каком языке вы не можете это сделать, или вам нужно отредактировать изображение и загрузить его на свой хост.