Jump to content
  • Sign Up
Katerina23

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

Recommended Posts

У меня из галереи отбирается пять случайных картинок и показывается пользователю, эти картинки имеют довольно солидный вес до 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 картинок все не отредактируешь.

Share this post


Link to post
Share on other sites

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

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

Share this post


Link to post
Share on other sites

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

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Member Statistics

    46,895
    Total Members
    1,451
    Most Online
    Neovo
    Newest Member
    Neovo
    Joined
  • Recently Browsing   0 members

    No registered users viewing this page.

  • Спрашивают сейчас

  • Пишут сейчас

    • Привет! Меня зовут Евгения и я ищу талантливых программистов в компанию DevCube. https://mydevcube.com/ Это международная компания, которая занимается DevOps, web и software разработками. На данный момент в команду требуются Full stack .NET (Junior & Senior) — 3+ year of commercial experience; — Strong knowledge of Angular 5+; — Strong knowledge of Typescript; — Experience with HTML/HTML5, CSS/CSS3, SCSS; — Good understanding of Git; — Conversational English. Будет плюсом: VB experience Условия: Удаленная работа full-time Зарплата от 10-20$/час по результатам собеседования. Обязательное условие - быть на связи до 21-22:00 по Москве. Для отклика прошу писать на почту: evgeniia.ko@mydevcube.com
    • Привет! Меня зовут Евгения и я ищу талантливых программистов в компанию DevCube. https://mydevcube.com/ Это международная компания, которая занимается DevOps, web и software development. На данный момент в команду требуются PHP developers (Junior & Senior) Requirements: — 3+ year of commercial experience; — Strong knowledge PHP 7+ — Framework knowledge — Conversational English — CSS, Json, HTML5 Будет плюсом: Shopify implementation expertise. Условия: Удаленная работа full-time Зарплата от 10-20$/час по результатам собеседования. Обязательное условие - быть на связи до 21-22:00 по Москве. Для отклика прошу писать на почту: evgeniia.ko@mydevcube.com
    • Подскажите пожалуйста, как позиционировать элемент на всю видимую область окна браузера? Есть слайдер, в котором крутятся картинки, и есть скрипт, благодаря которому картинка увеличивается, но не могу понять относительно какого элемента он позиционируется. <div class="sl_slider"> <div class="sl_img"> <img class="image" src="img/001-1.jpg" alt="001-1"> </div> <div class="sl_img"> <img class="image" src="img/002-2.jpg" alt="002-2.jpg"> </div> <div class="sl_img"> <img class="image" src="img/001-1.jpg" alt="001-1"> </div> <div class="sl_img"> <img class="image" src="img/002-2.jpg" alt="002-2.jpg"> </div> <div class="sl_img"> <img class="image" src="img/001-1.jpg" alt="001-1"> </div> <div class="sl_img"> <img class="image" src="img/002-2.jpg" alt="002-2.jpg"> </div> </div> .popup { position: absolute; height:100%; width:100%; top:0; left:0; display:none; text-align:center; } .popup_bg { background:rgba(0,0,0,0.4); position:absolute; z-index:1; height:100%; width:100%; } .popup_img { position: relative; margin:0 auto; z-index:2; max-height:94%; max-width:94%; margin:1% 0 0 0; } В классе popub выводится и позиционируется изображение, но как можно прописать его позиционирование на видимую обасть браузера? Решил  position: fixed;  у классов .popub_bg и .popub_img и margin выровнять как нужно. Может кому пригодится. 
  • Popular Contributors

    Nobody has received reputation this week.

×
×
  • Create New...