Загрузка изображений быстрее на веб-странице

Ответ 1

Существует несколько решений для управления большими изображениями:

Попробуйте уменьшить размер файла (3-5 Мбайт слишком высокий IMHO):

• Удалить все метаданные
• Уменьшить разрешение/плотность пикселей
• Уменьшить высоту/ширину изображения
• Использование сжатия JPEG
• Используйте сжатие GZIP на вашем сервере.

Вы также можете изучить:

• Используйте CDN для обслуживания изображений (чтобы разрешить параллельную загрузку)
• Используйте службы, такие как Cloudinary/IMGIX, которые позволяют динамически выберите желаемый размер изображения.

Ответ 2

Как это работает Собирались удалить изображения из HTML, а затем вернуть их обратно с помощью jQuery. Просто как тот. Это позволит загружать изображения после завершения всего вашего другого контента.

PLUS, это важная добавленная выгода: поисковые системы измеряют скорость вашей страницы при загрузке через HTML, а не то, что загружает jQuery после факта. Это означает, что когда Google измеряет скорость загрузки ваших сайтов, результат скорости страницы будет выглядеть значительно лучше.   Вот как это сделать:

     

  

Во-первых:     Удалите все большие изображения из вашего HTML (мои изображения просто оказались в неупорядоченном списке):     Удалите все большие изображения из вашего HTML.     

  

Во-вторых: Добавьте фрагмент jQuery, который добавит их обратно в HTML, после загрузки всего остального на странице:

[js]
$(window).load(function(){ // This runs when the window has loaded
var img = $("").attr(‘src’, ‘YourImagePath/img.jpg’).load(function() {
$("#a1″).append(img);
// When the image has loaded, stick it in a div
});
var img2 = $("").attr(‘src’, ‘YourImagePath/img2.jpg’).load(function() {
$("#a2″).append(img2);
});
});[/js]

Готово: D

Ответ 3

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

Ответ 4

Попробуйте загружать изображения, когда document загружается, используя свойство background-image элемента контейнера; set container element display:none. Это должно кэшировать изображения в браузере, устраняя необходимость дополнительных запросов к серверу для изображений в момент фактического click - изображения, уже загруженного в document, кэшированного в браузере перед первым click по ссылке или button. В click из ссылки "link" или button переключить свойство display элемента контейнера с id таким же, как className, нажав button между "block", "none"; отображая, а не отображая изображение, на каждом click "link" button.

var buttons = document.querySelectorAll("button[class^=img]");

Array.prototype.slice.call(buttons)
.forEach(function(elem, index) {
  document.getElementById(elem.className)
  .style.display = "none";
  elem.onclick = function(e) {
    var img = document.getElementById(elem.className);
    img.style.display = (img.style.display === "none") ? "block" : "none";
  };
});

body {
  width: 1800px;
  height: 1600px;
}
div[id^="img"] {
  width: 100%;
  height: 100%;
  position: relative;
}
div[id="img-1"] {
  background-image: url(http://lorempixel.com/1800/1600/cats);
}
div[id="img-2"] {
  background-image: url(http://lorempixel.com/1800/1600/technics);
}

<button class="img-1">image 1</button>
<button class="img-2">image 2</button>
<div id="img-1">
</div>
<div id="img-2">
</div>

Ответ 5

• Попробуйте сжать размер ваших изображений, так как большие изображения потребовали времени для загрузки.
• Используйте файлы jpg/jpeg или zip файлы для загрузки.

Ответ 6

Если вы действительно не можете уменьшить размер файла изображения, загрузите изображения динамически:

https://github.com/pazguille/aload

По крайней мере, страница будет реагировать на ввод пользователя во время загрузки изображений.

Ответ 7

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

Предварительно загрузите размеры вашего изображения с помощью php с сервером.

<?php
list($w,$h) = getimagesize("enu_20150522_1.jpg");
echo('<img src="http://myserver.com/enu_20150522_1.jpg" width='.$w.' height='.$h.'>');
?>

Это не улучшит скорость, но позволит браузеру заполнить остальную часть страницы при загрузке img. Он будет выглядеть быстрее. Иногда восприятие может быть реальностью.

Кроме того, используйте CSS или Javascript и т.д. для предварительной загрузки изображений. Я бы использовал Javascript. На этом есть много хороших сайтов. Топы в Google: 3 способа предварительной загрузки изображений с помощью CSS, JavaScript или Ajax

Если вы объедините оба из них и сжатие, у вас может быть рабочее решение. Но трудно сказать без рабочего образца. SSR

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

Ответ 8

См. Дорогой следуйте этому URL: Проверка производительности сайта

вставьте свое доменное имя или URL-адрес и проверьте свой сайт, затем найдите ссылку на изображение и щелкните по нему правой кнопкой мыши и сохраните его. Размер файла изображения будет автоматически уменьшен, но качество изображения будет идеальным.

Ответ 9

Вы можете найти решение, подобное google (по-прежнему), с мобильным браузером, где вы в основном устанавливаете прокси-сервер, который может

• Gzip it (на прокси)
• использовать другие протоколы (например, spdy)

Здесь выполняется сжатие данных:

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

Ответ 10

Вы можете просто просто использовать Microsoft Office Picture Manage, так что вы сможете изменить размер своего изображения как документа, не теряя его качества, попробуйте!

Ответ 11

Попробуйте загрузить его динамически, используя обратный код в файле .CS Такой As

.азрх

<asp:Repeater ID="Repeater1" runat="server" Visible="True">
    <ItemTemplate>
        <a><asp:Image ID="Image1" runat="server" Width="1200" Height="300" ImageURL='<%#Eval("ThumbnailPath")%>' class="slide" /></a>
    </ItemTemplate>
    </asp:Repeater>

.cs

    GallerySTR = ConfigurationManager.ConnectionStrings["PPDB"].ConnectionString;
    GalleryCN = new SqlConnection(GallerySTR);

    string LoginQuery = "SELECT * FROM Albums";
    GalleryCN.Open();
    GalleryCMD = new SqlCommand(LoginQuery, GalleryCN);

    GalleryDA = new SqlDataAdapter(GalleryCMD);
    GalleryDS = new DataSet();
    GalleryDA.Fill(GalleryDS);
    Repeater1.DataSource = GalleryDS;
    Repeater1.DataBind();

Это мой код с использованием ASP.NET Repeater COntrol. Надеюсь, это даст вам представление о более быстрой загрузке;) всегда старайтесь загружать его динамически;) Загрузка изображений динамически дает лучшие результаты, потому что вы не можете уменьшить размер;)

Ответ 12

Советы:

• Если изображения являются общими для нескольких страниц, вы можете использовать CSS Image Sprite, что уменьшит округлые поездки и для более быстрой доставки изображения вы можете использовать CDN.
• Если изображения случайны, попробуйте async загрузку изображений, это не приведет к уничтожению UI/UX.
• Преобразуйте изображения в png, затем используйте их, или вы можете попробовать новый WebP, как указано выше.

Ответ 13

Вы можете сделать свое изображение прогрессивным по Photoshop. Вы должны сохранить как в Интернете, так и в режиме проверки. Более подробно описано здесь.

Ответ 14

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

В среде веб-сервера у вас есть два варианта:

1. Откройте изображение вручную в графическом редакторе (например, Gimp), используйте опцию "Сохранить для Интернета" и установите размеры и качество изображения в соответствии с вашими потребностями.

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

3. Ваши запросы изображений будут проходить через сервис оптимизации изображений в реальном времени, например tiny.pictures. Они (отказ от ответственности: или "мы", соответственно) получают оригинальное, огромное изображение в режиме реального времени, масштабируют и оптимизируют его и доставляют обратно вашим посетителям. Вы можете установить размеры, которые вы хотите, в качестве параметров URL (как, вероятно, было вашей первой идеей, хотя обычные веб-серверы не могут этого сделать).

В следующем фрагменте показано, как можно уменьшить ширину изображения с 10800 до 400 пикселей (см. Параметр width), уменьшив тем самым размер файла с 5,9 МБ до 6,3 КБ (сокращение на ~ 99,9%). Все, что вам нужно сделать, это добавить исходный URL изображения.

<img src="https://tiny.pictures/api/demo/?width=400&source=http://upload.wikimedia.org/wikipedia/commons/1/15/Srtm_ramp2.world.21600x10800.jpg" alt="World map">