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

[Katerina23 0]

У меня из галереи отбирается пять случайных картинок и показывается пользователю, эти картинки имеют довольно солидный вес до 300 кб. При извлечении картинки становятся миниатюрными с помощью php тега getImageSize и увеличиваются если щёлкнуть по картинке, вес никуда не девается он по прежнему 300 кб. Как мне оптимизировать изображения так, чтобы ускорить загрузку сайта? Прочла вот эту статью https://habr.com/ru/post/189764/. Она мало мне чем помогла, правдо я использовала только два первых примера вот этот

<div>
    <img src="comicbookguy.jpg" alt="" onload="imgLoaded(this)"/>
</div>

и вот этот

<div id="Slideshow">
    <img src="slide_1.jpg" alt="" onload="slideLoaded(this)" />
    <img src="slide_2.jpg" alt="" onload="slideLoaded(this)" />
    <img src="slide_3.jpg" alt="" onload="slideLoaded(this)" />
</div>

Pagespeed по прежнему говорит, что мне эти картинки нужно сжать. Есть ещё какие-нибудь варианты оптимизировать изображение не меняя высоту и ширину и без помощи photoshop и других графических редакторов?

А то у меня 5000 картинок все не отредактируешь.

[npofopr 420]

Из онлайн инструментов, нравится — https://tinypng.com/ 

PS: Не стоит читать статьи 2013 года, тем более по оптимизации. Во всяком случае, лучше всегда искать, что по свежее. 

[Ryzex 0]

Если речь именно о JPEG картинках, использовать прогрессивный (progressive) формат JPEG.

Конвертировать можно тут (после сжатия автоматически делает прогрессивным) и тут.

[Katerina23 0]

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