оптимизация сайта оптимизаций изображений

Оптимизация сайта: оптимизация изображений

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

Какие форматы лучше всего использовать?!

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

  • GIF – идеально подходят для изображений с несколькими цветами, например логотип.
  • JPEG – отлично подходят для детализированных изображений с большим количеством цветов, такие как фотографии.
  • PNG – ваш выбор, когда вам нужно высококачественное изображение с прозрачностью.

Сервисы которые я использую для конвертации:

  1. Iloveimg – https://www.iloveimg.com/ru/convert-to-jpg

Сайты для сжатия изображений

Оптимизировать изображение можно двумя способами: используя программы или онлайн сервисы в Интернете для сжатия изображений. В первом случае от Вас потребуются определенные знания для работы с той или иной программой, а вот воспользоваться онлайн сервисами может каждый. От Вас лишь требуется загрузить нужные изображения, а сервис сам оптимизирует их и выдаст ссылку на скачивание уже сжатых файлов.

Сайты которые я использую для сжатия изображений:

  1. Iloveimg https://www.iloveimg.com/ru/compress-image
  2. Optimizilla – http://optimizilla.com/ru/

Использование спрайтов

Спрайты это изображения которые состоят из нескольких небольших картинок. Как правило спрайты используют для иконок, например иконки социальных сетей. Для того чтобы использовать выбранную картинку (часть набора), программист с помощью CSS стелей отображает только часть изображения.

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

Спрайты выглядят так

Для добавления выбранной иконку необходимо указать её координаты.

CSS стили:

.icon {
float: left;
background: url('http://prog-time.ru/wp-content/uploads/2019/02/837d9099300dc42d37756bc7217195a7.png');
width: 48px;
height: 46px;
}
.icon1 {
background-position: 68px 61px;
}
.icon2 {
background-position: 68px 61px;
}

Html код:

<div class="icons_sprite">
<div class="icon icon1" ></div>
<div class="icon icon2"></div>
</div>


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

Lazy load

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

Lazy load – это плагин который позволяет загружать изображения, по мере появления их в зоне просмотра.

О нем я рассказывал в данной записи – http://prog-time.ru/nastrojka-plagina-lazy-load-xt-dobavlenie-lenivoj-zagruzki-izobrazhenij-na-sajt/

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

Да это так! Но по факту, данная библиотеку имеет крошечный размер, так как состоит из пары строк кода.

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

На этом всё!
Если у вас есть вопросы, пишите их в нашей группе - https://vk.com/progtime
Вы так же можете разместить свой вопрос на нашем форуме, где другие программисты смогут вам помочь в решение вашей задачи - https://vk.com/prog_time
В ней мы делимся своим опытом с другими начинающими программистами, поэтому обязательно ответим на ваш вопрос.
Так же прокачивайте свои навыки на нашем канале - https://www.youtube.com/c/ProgTime

38
Оставить комментарий

avatar
38 Цепочка комментария
0 Ответы по цепочке
0 Последователи
 
Популярнейший комментарий
Цепочка актуального комментария
36 Авторы комментариев
AndrewBogAndrewBogtreantincMurrayVumMurrayVum Авторы недавних комментариев
  Подписаться  
новее старее большинство голосов
Уведомление о
StepFoush
Гость

Cialis In Sam Club [url=https://apcialisle.com/#]cialis tablets for sale[/url] Cialis Ne Marche Pas Forum Buy Cialis Medikament Viagra 50 Mg

StepFoush
Гость

Kamagra Aus Der Apotheke [url=http://apcialisle.com/#]Buy Cialis[/url] Kamagra Jelly Orale Donne cialis 40 mg Sueno De Propecia

JanleF
Гость

Levitra Alternative [url=https://apcialisle.com/#]buy cialis pro[/url] Lipitor Cialis Cephalexin Info

JanleF
Гость

Foros Donde Comprar Viagra [url=https://apcialisle.com/#]Cialis[/url] Buy Tamoxifen Gynecomastia cialis online pharmacy Cephalexin Paralysis Dog

Bupbaipt
Гость
Bupbaipt

cialis tadalafil 10mg tablets medicine without dr prescription buy cialis 5mg

Bupbaipt
Гость
Bupbaipt

how to buy viagra in canada cialis online viagra super force for sale

Bupbaipt
Гость
Bupbaipt

buy cialis vancouver bc buy cialis levitra professional cheapest

Arturojep
Гость
Arturojep

buy levitra australia viagra without prescription cheap cialis in the uk

JimmyGoori
Гость
JimmyGoori

viagra super force 100 mg 60 mg pills canada pharmacy generic viagra buy canada

RaymondLem
Гость
RaymondLem

viagra for men for sale https://www.sildwithdoctorprescription.com viagra sale tesco

Harryraw
Гость
Harryraw

order cialis uk http://aralenph.com – cheap chloroquine cheapest place buy cialis online

Harryraw
Гость
Harryraw

can you order cialis online for canada http://hydroxychloroquine24.com – generic plaquenil where to buy viagra online uk

Harryraw
Гость
Harryraw

order levitra over the counter http://kaletra24.com – kaletra price cheap viagra pharmacy

Harryraw
Гость
Harryraw

order cheap cialis online http://kaletra24.com – Lopinavir order viagra in india

BradleyAnync
Гость
BradleyAnync

buy cialis at walmart
buy viagra

BradleyAnync
Гость
BradleyAnync

buy cialis johor bahru
cost of viagra

BradleyAnync
Гость
BradleyAnync
BradleyAnync
Гость
BradleyAnync

buy cialis canada
sildenafil

BradleyAnync
Гость
BradleyAnync

buy cialis no prescription in uk
viagra without a doctor prescription

BradleyAnync
Гость
BradleyAnync

cialis buy now
buy sildenafil

BradleyAnync
Гость
BradleyAnync

viagra sale jamaica
sildenafil

BradleyAnync
Гость
BradleyAnync

cheap viagra bangkok
generic viagra 100mg

MathewDaups
Гость
MathewDaups

generic names for cialis and viagra
http://cialisxtl.com/ cialis samples request

MathewDaups
Гость
MathewDaups

cialis 100 mg lowest price
http://cialisxtl.com/ cialis coupons printable

AndrewCig
Гость
AndrewCig

how much is viagra https://sildenafilprof.com
safe place order cialis online

AndrewCig
Гость
AndrewCig

side effects for viagra https://sildenafilprof.com
buy viagra from canada online

Robertorell
Гость
Robertorell

tadalafil vs cialis viagra vs cialis vs levitra

Robertorell
Гость
Robertorell
RichardHap
Гость
RichardHap

viagra problem: best price 100mg generic viagra viagra buy paypal

RichardHap
Гость
RichardHap

hims viagra: generic viagra cialis 5 mg cheap

unsenty
Гость

cialis free samples [url=https://buyciallisonline.com/]Cialis[/url] Tamoxifen Bodybuilding buy cialis online in usa Buy now isotretinoin claravis

MurrayVum
Гость
MurrayVum

prescription drugs without doctor approval prices of viagra at walmart
onlinepharmacyero.com ed meds online

MurrayVum
Гость
MurrayVum

prescription drugs without prior prescription viagra without a doctor prescription
onlinepharmacyero.com viagra without doctor prescription amazon

MurrayVum
Гость
MurrayVum

fast ed meds online buy prescription drugs without doctor
onlinepharmacyero.com 100mg viagra without a doctor prescription

MurrayVum
Гость
MurrayVum

google viagra dosage recommendations buy prescription drugs from canada cheap
onlinepharmacyero.com ed meds online without prescription or membership

treantinc
Гость
treantinc

Discount Codes For Pharmacy Express [url=https://bbuycialisss.com/]Buy Cialis[/url] Keflex Naprosin Damaged Platelets generic cialis for sale achat 20mg levitra en france

AndrewBog
Гость
AndrewBog

cialis at a discount price cheap cialis

AndrewBog
Гость
AndrewBog

which is better – cialis or viagra cialis vs viagra