Что такое масштабированное изображение и как его использовать на веб-странице?

Whan я запускаю тестовую страницу в Google PageSpeed. Я нашел несколько предупреждений, таких как, например, служить масштабированные изображения..

 http://man-vimal.net78.net/introduction/?intro/action=main

THe results were as such :
The following images are resized in HTML or CSS. Serving scaled images could save 449.3KiB (99% reduction).
http://man-vimal.net78.net/.../twitter-logo.png is resized in HTML or CSS from 367x367 to 20x20. Serving a scaled image could save 140.9KiB (99% reduction).
http://man-vimal.net78.net/introduction/views/images/fb.png is resized in HTML or CSS from 1,692x1,692 to 20x20. Serving a scaled image could save 115.9KiB (99% reduction).
http://man-vimal.net78.net/.../linkedin.jpg is resized in HTML or CSS from 1,024x768 to 20x20. Serving a scaled image could save 99.6KiB (99% reduction).
http://man-vimal.net78.net/.../panorama.jpg is resized in HTML or CSS from 604x453 to 100x100. Serving a scaled image could save 81KiB (96% reduction).
http://man-vimal.net78.net/.../googleplus.jpg is resized in HTML or CSS from 450x320 to 20x20. Serving a scaled image could save 12KiB (99% reduction).

что такое изображение и как я могу исправить это ??

10
css html

5 ответов

масштабируемое изображение-это изображение, масштабируемое в соответствии с отображаемым размером.

http://man-vimal.net78.net/.../twitter-logo.png is resized in HTML or CSS from 367x367 to 20x20. Serving a scaled image could save 140.9KiB (99% reduction).

Это говорит вам, что ваше исходное изображение 367x367, но вы отображаете его в 20x20.

это неэффективно, потому что браузер должен загрузить большее изображение, а затем масштабировать его. Изображение 367x367 140kb больше, чем изображение 20x20.

чтобы исправить это, измените размер изображения (в photoshop, preview и т. д. ) так что это 20x20 и служить это вместо образа, который вы сейчас обслуживаете.

17

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

3

типичная ситуация заключается в том, что, скажем, у вас есть изображение с шириной 400px, но оно не вписывается в ваш макет, поэтому вы идете в таблицу стилей и пишете:

img { width: 300px; }

здесь вы изменили размер изображения с помощью CSS. Но вы все еще обслуживаете изображение размером 400px и масштабируете изображение вниз.

подразумевается, что вместо использования изображения 400px вы должны использовать изображение, размер которого вам нужен, потому что размер файла будет меньше, и таким образом страница будет загружаться быстрее.

2

например, если пользователь веб-сайта загружает изображение размером 400px x 400px, и вы используете это изображение в качестве эскиза, скажем, 40px x 40px с помощью html/css.

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

таким образом, веб-браузер не должен неэффективно масштабировать изображение.

надеюсь, это поможет.

2

масштабируемое изображение-это изображение, размер которого точно соответствует размеру, определенному в CSS или HTML.

Если ваше исходное изображение называется twitter-logo.png имеет размер 300 x 250, но размер, определенный в HTML-операторе:

<img src="http://man-vimal.net78.net/.../twitter-logo.png" width="600" height="500">

затем браузер сначала загрузит исходное изображение (которое имеет размер 300 x 250), а затем изменит его размер в соответствии с размерами, определенными в инструкции HTML. то есть 600 х 500

этого размера изображений в HTML или CSS значительно замедляет общий рендеринг страницы и его следует избегать.

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

1