Как обрабатывать большие изображения на HTML-странице

Question

У меня большое изображение JPEG размером около 3500 x 2500 пикселей и размером 4 МБ.

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

Это возможно?

Answer 1

HTML

<img class="big_image" src="x.jpg"> 
<!-- don't set width and height in the HTML -->

CSS

img.big_image {width:75%; -ms-interpolation-mode:bicubic;} 
/* don't set the height and it will be proportionally scaled */

Изображение будет масштабировано до 75% от первого позиционного предка.(любой содержащий элемент с позицией: относительный; или положение: абсолютный; установить, надеюсь, это элемент body. Возможно, вам придется установить ширину тела и HTML в 100% также в CSS. Я не уверен.

Специфическая штука для MS css предназначена для IE7 и более поздних версий, потому что по умолчанию они используют интерполяцию ближайшего соседа. Это глупо.

Изображения уже очень сжаты. Возможно, это будет лучшеjpeg или png, попробуйте оба и посмотрите, что меньше.

Answer 2

Нет, это нереально в HTML. HTML не сжимает изображения. Он МОЖЕТ изменить размеры изображений, указав атрибуты высоты и ширины, но они не будут хорошо выглядеть.

Вы должны изменить размеры изображений вручную.

Answer 3

Да, но не в HTML.Вам нужно будет запустить какой-нибудь серверный скрипт, который уменьшит размер изображения до того, как будет передано через провод в браузер.Языки, которые могут делать что-то подобное, включают в себя (в алфавитном порядке, чтобы меня не обвиняли в фаворитизме) Perl, PHP, Python, Ruby и многие другие.Однако для этого требуется некоторый опыт программирования или желание учиться (читая веб-сайты и / или книги).Я бы порекомендовал против задать здесь вопрос о StackOverflow, который в основном спрашивает, как это сделать.

Answer 4

Если вы хотите, чтобы ваш jpg занимал ¾ экрана, вы не можете предполагать, что у всех был одинаковый размер окна браузера. И вы, вероятно, захотите изменить размер изображения, когда пользователь изменит размер окна.

Вы можете растянуть изображение по размеру экрана, используя атрибут background-size CSS 3, но это не будет работать во всех браузерах. В противном случае вы можете сделать это с помощью некоторого умного Javascript.

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

Я думаю, что большинство людей используют разрешение экрана от 1024 до 1280 пикселей. Так что, может быть, вам стоит начать тестирование примерно такого размера.