Czy wiesz, że optymalizacja twoich obrazków przed wgraniem ich do WordPressa może mieć ogromny wpływ na szybkość twojej witryny internetowej?
Podczas zakładania nowego bloga wielu początkujących po prostu przesyła obrazki bez optymalizacji ich pod kątem sieci. Te duże pliki obrazków sprawiają, że twoja witryna internetowa działa wolniej.
Możesz to poprawić, stosując najlepsze praktyki optymalizacji obrazków w ramach rutynowego blogowania.
W tym artykule pokażemy ci, jak zoptymalizować twoje obrazki, aby przyspieszyć działanie stron internetowych bez utraty jakości. Udostępnimy również wtyczki do automatycznej optymalizacji obrazków dla WordPressa, które ułatwią ci życie.
Ponieważ jest to kompleksowy przewodnik po optymalizacji obrazków na potrzeby sieci, stworzyliśmy łatwy w użyciu spis treści:
- What Is Image Optimization?
- What Are the Benefits of Image Optimization?
- How to Save and Optimize Images for Web Performance
- Best Image Optimization Tools and Programs
- Best Image Optimization Plugins for WordPress
- Final Thoughts and Best Practices for Image Optimization
- Expert Guides on Improving WordPress Performance
1. Czym jest optymalizacja obrazków?
Optymalizacja obrazków to proces zapisywania i dostarczania obrazków w najmniejszym możliwym rozmiarze pliku bez obniżania ogólnej jakości obrazka.
Choć proces ten wydaje się skomplikowany, w dzisiejszych czasach jest on dość prosty. Możesz użyć jednej z wielu wtyczek i narzędzi do optymalizacji obrazu, aby automatycznie skompresować obrazy nawet o 80% bez widocznej utraty jakości obrazka.
Oto przykład zoptymalizowanego i niezoptymalizowanego obrazka:
Jak widać, przy odpowiedniej optymalizacji ten sam obrazek może być nawet o 80% mniejszy od oryginału bez utraty jakości. W tym przykładzie obrazek jest mniejszy o 52%.
Jak działa optymalizacja obrazków?
Najprościej rzecz ujmując, optymalizacja obrazków polega na wykorzystaniu technologii kompresji.
Kompresja może być „stratna” lub „bezstratna”.
Kompresja bezstratna zmniejsza całkowity rozmiar pliku bez utraty jakości obrazka. W przypadku kompresji stratnej może wystąpić niewielka utrata jakości, ale w idealnym przypadku nie będzie ona zauważalna dla twoich odwiedzających.
Co oznacza optymalizacja obrazków?
Być może otrzymałeś zalecenie optymalizacji obrazków od pomocy technicznej Twojego hostingu WordPress lub narzędzia do testowania prędkości i zastanawiasz się, co musisz zrobić.
Będziesz musiał zmniejszyć rozmiar plików swoich obrazków, optymalizując je pod kątem sieci. Pokażemy ci, jak to zrobić krok po kroku.
2. Jakie są korzyści z optymalizacji obrazków?
Istnieje wiele korzyści płynących z optymalizacji twoich obrazków, ale oto najważniejsze z nich, o których powinieneś wiedzieć:
- Większa szybkość witryny internetowej
- Ulepszone rankingi SEO
- Wyższy ogólny współczynnik konwersji sprzedaży i potencjalnych klientów
- Mniej pamięci masowej i przepustowości (co może obniżyć koszty hostingu i CDN)
- Szybsze tworzenie kopii zapasowych witryn internetowych (co może obniżyć koszty przechowywania kopii zapasowych)
Obrazki są drugim po filmach najcięższym elementem na stronie internetowej. Według archiwum HTTP, obrazki stanowią 42% całkowitej wagi przeciętnej strony internetowej.
Ponieważ wiemy, że szybkie witryny internetowe zajmują wyższe pozycje w wyszukiwarkach (SEO) i mają lepszą konwersję, optymalizacja obrazków jest czymś, co każda witryna internetowa firmy musi zrobić, jeśli chce odnieść sukces online.
Być może zastanawiasz się teraz, jak dużą różnicę może naprawdę zrobić optymalizacja obrazków.
Według badania Strangeloop, jednosekundowe opóźnienie wczytywania witryny internetowej może kosztować 7% sprzedaży, 11% mniej odsłon i 16% spadek zadowolenia klientów.
Jeśli nie są to wystarczające powody, aby przyspieszyć twoją witrynę internetową, to powinieneś wiedzieć, że wyszukiwarki takie jak Google również preferencyjnie traktują pod względem SEO szybciej ładujące się witryny.
Oznacza to, że optymalizując twoje obrazki dla sieci, możesz zarówno poprawić szybkość witryny internetowej, jak i poprawić rankingi SEO WordPress.
Film instruktażowy
Jeśli wolisz pisemne instrukcje, czytaj dalej.
3. Jak zapisywać i optymalizować obrazki pod kątem wydajności w sieci?
Kluczem do udanej optymalizacji obrazków pod kątem wydajności w sieci jest znalezienie idealnej równowagi między najmniejszym rozmiarem pliku a akceptowalną jakością obrazka.
Trzy rzeczy, które odgrywają ogromną rolę w optymalizacji obrazków to:
- Format pliku obrazka (JPEG vs. PNG vs. GIF)
- Kompresja (wyższa kompresja = mniejszy rozmiar pliku)
- Wymiary obrazka (wysokość i szerokość)
Wybierając odpowiednią kombinację tych trzech, możesz zmniejszyć rozmiar swojego obrazka nawet o 80%.
Przyjrzyjmy się każdemu z nich bardziej szczegółowo.
1. Format pliku Imagely
Dla większości właścicieli witryn internetowych jedyne trzy formaty plików obrazków, które naprawdę mają znaczenie, to JPEG, PNG i GIF. Wybór odpowiedniego rodzaju pliku odgrywa ważną rolę w optymalizacji obrazków.
Aby zachować prostotę, należy używać plików JPEG do zdjęć lub obrazków z dużą ilością kolorów, PNG do prostych lub przezroczystych obrazków, a GIF tylko do animowanych obrazków.
Dla tych, którzy nie znają różnicy między każdym rodzajem pliku, format obrazu PNG jest nieskompresowany, co oznacza, że jest to obrazek wyższej jakości. Wadą jest to, że rozmiary plików są znacznie większe.
Z drugiej strony, JPEG to skompresowany format pliku, który nieznacznie obniża jakość obrazka w celu zapewnienia znacznie mniejszego rozmiaru pliku.
Natomiast GIF wykorzystuje tylko 256 kolorów wraz z bezstratną kompresją, co czyni go najlepszym wyborem dla animowanych obrazków.
Na WPBeginner używamy wszystkich trzech formatów obrazków w zależności od ich rodzaju.
2. Kompresja
Kolejną rzeczą jest kompresja obrazków, która odgrywa ogromną rolę w optymalizacji obrazków.
Dostępne są różne rodzaje i poziomy kompresji obrazków. Ustawienia dla każdego z nich różnią się w zależności od twojego narzędzia do kompresji obrazków.
Większość narzędzi do edycji obrazów, takich jak Adobe Photoshop, ON1 Photo, GIMP, Affinity Photo i inne, ma wbudowane funkcje kompresji obrazków.
Można również zapisywać obrazki normalnie, a następnie użyć narzędzia internetowego, takiego jak TinyPNG lub JPEGmini, aby ułatwić kompresję obrazków.
Chociaż wymagają one pewnego ręcznego wysiłku, te dwie metody pozwalają na kompresję obrazków przed wgraniem ich do WordPressa i to właśnie robimy na WPBeginner.
Istnieje również kilka popularnych wtyczek WordPress, takich jak Optimole i EWWW Image Optimizer, które mogą automatycznie kompresować obrazki podczas ich pierwszego przesyłania. Jest to wygodne i wielu początkujących, a nawet duże korporacje wolą korzystać z tych wtyczek do optymalizacji obrazków.
Więcej informacji na temat korzystania z wtyczek WordPress przedstawimy w dalszej części artykułu.
3. Wymiary obrazka
Zazwyczaj, gdy importujesz zdjęcie z twojego telefonu lub aparatu cyfrowego, ma ono bardzo wysoką rozdzielczość i duże wymiary pliku (wysokość i szerokość).
Zazwyczaj zdjęcia te mają rozdzielczość 300 DPI i wymiary od 2000 pikseli wzwyż. Podczas gdy wysokiej jakości zdjęcia dobrze nadają się do druku lub publikacji na pulpicie, ich duże rozmiary sprawiają, że nie nadają się do witryn internetowych.
Zmniejszenie wymiarów obrazka do bardziej rozsądnych może znacznie zmniejszyć rozmiar pliku. Możesz po prostu zmienić rozmiar obrazków za pomocą oprogramowania do edycji obrazków na twoim komputerze.
Na przykład, zoptymalizowaliśmy zdjęcie o rozdzielczości 300 DPI i wymiarach obrazka 4900×3200 pikseli. Oryginalny rozmiar pliku wynosił 1,8 MB.
Wybraliśmy format JPEG dla większej kompresji i zmieniliśmy wymiary na 1200×795 pikseli. Rozmiar pliku został zmniejszony do zaledwie 103 KB. To o 94% mniej niż oryginalny rozmiar pliku.
Teraz, gdy znasz już trzy ważne czynniki w optymalizacji obrazków, przyjrzyjmy się różnym narzędziom do optymalizacji obrazków dla właścicieli witryn internetowych.
4. Najlepsze narzędzia i programy do optymalizacji obrazków
Jak wspomnieliśmy wcześniej, większość programów do edycji obrazów zawiera ustawienia optymalizacji i kompresji obrazków.
Poza oprogramowaniem do edycji obrazów, istnieje również kilka potężnych darmowych narzędzi do optymalizacji obrazów, które można wykorzystać do optymalizacji obrazków na potrzeby sieci (za pomocą zaledwie kilku kliknięć).
Zalecamy korzystanie z tych narzędzi do optymalizacji obrazków przed przesłaniem ich do WordPressa, zwłaszcza jeśli jesteś perfekcjonistą.
Metoda ta pomaga zaoszczędzić miejsce na dysku na twoim koncie hostingowym WordPress i gwarantuje najszybszy obraz w najlepszej jakości, ponieważ ręcznie przeglądasz każdy obrazek.
Adobe Photoshop
Adobe Photoshop to wysokiej klasy aplikacja do edycji obrazków, która umożliwia eksportowanie obrazów o mniejszym rozmiarze na potrzeby Internetu.
Za pomocą okna dialogowego eksportu można wybrać format pliku obrazka (JPG, PNG, GIF), który zapewnia najmniejszy rozmiar pliku.
Można również zmniejszyć jakość obrazka, kolory i inne opcje, aby jeszcze bardziej zmniejszyć rozmiar pliku.
GIMP
GIMP to darmowa i otwarta alternatywa dla Adobe Photoshop. Może być używany do optymalizacji twoich obrazków dla sieci. Wadą jest to, że nie jest tak łatwy w użyciu, jak niektóre inne rozwiązania z tej listy.
Najpierw musisz otworzyć swój obrazek w programie GIMP, a następnie wybrać opcję Plik ” Eksportuj jako…. Spowoduje to wyświetlenie okna dialogowego Eksportuj obrazek, w którym możesz nadać twojemu plikowi nową nazwę. Następnie należy kliknąć przycisk „Eksportuj”.
Zostaną wyświetlone opcje eksportu obrazków. W przypadku plików JPEG można użyć suwaka „Jakość”, aby wybrać poziom kompresji i zmniejszyć rozmiar pliku.
Na koniec należy kliknąć przycisk „Eksportuj”, aby zapisać zoptymalizowany plik obrazka.
TinyPNG
TinyPNG to darmowa aplikacja internetowa, która wykorzystuje inteligentną technikę kompresji stratnej w celu zmniejszenia rozmiaru twoich plików PNG i JPEG. Wszystko, co musisz zrobić, to wejść na ich witrynę internetową i przesłać swoje obrazki za pomocą prostego przeciągania i upuszczania.
Skompresują obrazek i podadzą odnośnik do pobrania.
Mają również rozszerzenie dla Adobe Photoshop, którego używamy jako części naszego procesu edycji obrazków, ponieważ umożliwia dostęp do TinyPNG z poziomu Photoshopa.
Dla programistów mają API do automatycznej konwersji obrazków. Dodatkowo, dla początkujących, mają wtyczkę WordPress, która zrobi to za Ciebie. Więcej na ten temat powiemy później.
JPEGmini
JPEGmini wykorzystuje technologię bezstratnej kompresji, która znacznie zmniejsza rozmiar obrazków, nie mając wpływu na ich postrzeganą jakość. Można również porównać jakość oryginalnego obrazka i obrazka skompresowanego.
Możesz korzystać z ich wersji internetowej za darmo lub kupić program na twój komputer. Mają również płatne API do automatyzacji procesu dla twojego serwera.
ImageOptim
ImageOptim to narzędzie dla komputerów Mac, które pozwala kompresować obrazki bez utraty jakości poprzez znajdowanie najlepszych parametrów kompresji i usuwanie niepotrzebnych profili kolorów.
Alternatywą dla systemu Windows jest Trimage.
5. Najlepsze wtyczki do optymalizacji obrazków dla WordPressa
Uważamy, że najlepszym sposobem na optymalizację twoich obrazków jest zrobienie tego przed przesłaniem ich do WordPressa. Jeśli jednak prowadzisz witrynę z wieloma autorami lub potrzebujesz zautomatyzowanego rozwiązania, możesz wypróbować wtyczkę do kompresji obrazków WordPress.
Oto nasza lista najlepszych wtyczek WordPress do kompresji obrazków:
- Optimole, popularna wtyczka stworzona przez zespół odpowiedzialny za ThemeIsle
- EWWW Image Optimizer
- JPEG, PNG & WebP Image Compression, wtyczka autorstwa wspomnianego wyżej zespołu TinyPNG
- Imagify, wtyczka popularnego zespołu WP Rocket
- ShortPixel Image Optimizer
- Smush
- reSmush.it
- Envira Gallery to wtyczka do galerii WordPress z wbudowaną kompresją obrazków
Te wtyczki do optymalizacji obrazków WordPress pomogą ci przyspieszyć twoją witrynę internetową.
6. Końcowe przemyślenia i najlepsze praktyki dotyczące optymalizacji obrazków
Jeśli nie zapisujesz obrazków zoptymalizowanych pod kątem sieci, musisz zacząć robić to teraz. Zrobi to ogromną różnicę w szybkości Twojej witryny, a użytkownicy będą Ci za to wdzięczni.
Nie wspominając o tym, że szybsze witryny internetowe są świetne dla SEO i prawdopodobnie zauważysz wzrost w rankingach wyszukiwarek.
Poza optymalizacją obrazków, dwie rzeczy, które znacząco pomogą przyspieszyć twoją witrynę internetową, to korzystanie z wtyczki pamięci podręcznej WordPress i korzystanie z WordPress CDN.
Alternatywnie możesz skorzystać z zarządzanej firmy hostingowej WordPress, ponieważ często oferują one zarówno pamięć podręczną, jak i CDN jako część platformy.
Przewodniki ekspertów na temat poprawy wydajności WordPressa
Teraz, gdy już wiesz, jak przyspieszyć twoją witrynę internetową poprzez optymalizację obrazków, być może spodoba ci się kilka innych artykułów związanych z poprawą wydajności WordPressa.
- Najlepszy przewodnik po zwiększaniu szybkości i wydajności WordPressa
- Jak przyspieszyć wydajność WooCommerce
- Najlepsze wtyczki WordPress do pamięci podręcznej, aby przyspieszyć twoją witrynę internetową
- Jak zoptymalizować rdzeń Web Vitals dla WordPress (Ultimate Guide)
- Jak skrócić czas do pierwszego bajtu (TTFB) w WordPress – Porady ekspertów
- Jak wykorzystać wtyczkę GTmetrix do poprawy wydajności witryny WordPress?
- Najszybszy hosting WordPress (testy wydajności)
- Ważne metryki do zmierzenia na twojej witrynie WordPress
- Jak prawidłowo przeprowadzić test szybkości witryny internetowej?
- Jak przeprowadzić test wytrzymałościowy witryny internetowej WordPress
Mamy nadzieję, że ten artykuł pomógł ci dowiedzieć się, jak zoptymalizować twoje obrazki w WordPress. Zachęcamy również do zapoznania się z naszym przewodnikiem na temat tego, jak poprawić zabezpieczenia WordPressa lub z wyborem najlepszych wtyczek WordPress dla witryn biznesowych.
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
Syed Balkhi says
Hey WPBeginner readers,
Did you know you can win exciting prizes by commenting on WPBeginner?
Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
You can get more details about the contest from here.
Start sharing your thoughts below to stand a chance to win!
Dennis Muthomi says
Well for me I ALWAYS convert all my images to .webp file format before uploading them to my WordPress site.
I chose to use .webp over JPEG and PNG because it provides much better lossless compression, allowing the file size to be significantly reduced without affecting image quality.
Jiří Vaněk says
Thanks for the tutorial. Personally, I used to convert the images to .webp format first and then upload them to the web in that format. This format seems to me to be the smallest in terms of data volume and at the same time still very high quality for a good user experience. I don’t use plugins for this, but I usually convert images in online converters or in computer software.
WPBeginner Comments says
The .webp format can also be a good image format to use due to it’s small file size. We happen to have a guide on how to use .webp here, including some handy plugins to convert images into .webp: https://www.wpbeginner.com/wp-tutorials/how-to-use-webp-images-in-wordpress/
Converting via a plugin can be useful because it can convert directly on the website and in bulk.
Jiří Vaněk says
But if I use the plugin, won’t it take up too much space on my FTP because the original file will be there too? But I will certainly be happy to go and look at your instructions. Thanks for the link.
WPBeginner Comments says
You could always delete the original files. You can use the search feature on the Media admin page to search for filetypes, such as the .png or .jpg/.jpeg extensions.
Mrteesurez says
This is a comprehensive guide.
It’s essential to optimize images in order to have fast website loading and content delivery.
You quoted that images are the second heaviest after video, what of audio, is audio lighter than images and how ?
WPBeginner Comments says
Audio would tend to be between images and video. That said, depending on the amount of audio and the audio filetype, this is not an exact rule and it just depends on the files in question.
Mrteesurez says
Thanks for your reply, the thing is, I used to see audio files bigger in term of size than images, most images are in kilobytes while audios are usually more than that, I think the duration for a audio to be played and delivered a meaningful message also contribute to it’s size.
Michelle N says
Would love to say that this has been incredibly helpful, easy to digest and implement, I appreciate all the tools provided. Thank you!
– from a beginner blogger
WPBeginner Support says
Glad our guide was helpful
Administrator
mohadese esmaeeli says
By the way, another question I have is whether, when using image optimization plugins and optimizing previously uploaded images, the new images replace the old ones? Or do the original images remain in the WordPress media library, with the optimized images alongside them?
WPBeginner Support says
It would depend on the specific plugin you are using as some will replace the image while others have the option to keep the original.
Administrator
Jiří Vaněk says
Many of them give you a choice whether you want to keep the original images or delete them. From personal experience, I recommend keeping the original images on the website (at least as a backup).
mohadese esmaeeli says
Hello,
Greetings to you. This article appears to be quite comprehensive. I became acquainted with your website a few days ago and started reading the articles. I have decided to implement the same process on my website as I read through these articles.
I quickly reached point 2, focusing on site speed. To be honest, I have been working on my site for just a few days, and I have only managed to achieve a 10% increase in site speed.
WPBeginner Support says
An improvement is still an improvement, we’re glad to hear our guide is helpful
Administrator
mohadese esmaeeli says
Yes, that’s exactly right. In this vast and competitive world, those who are always improving their website and offering something more than their competitors will be the winners. Otherwise, we will be the losers.
Moinuddin Waheed says
Having optimizes images for websites or blogs is very important for the speed of the website.
Heavy image sizes takes time to load and causes the website to slow.
I have used some of the plugins for image optimisation.
But I think best option is to use caching plugins and CDN for the websites.
it lets the website speed not only fast but also helps in retaining the visitors.
WPBeginner Support says
CDNs are normally for speed instead of retention but a fast loading site does help keep your visitors and helps make them want to return
Administrator
Lewis says
First of all, it’s important to note that not all image file types are created equal. JPEGs are generally going to be much smaller in file size than PNGs, for example, so it’s important to choose the right file type for the job.
Additionally, when it comes to resizing images, you should always resize them before you upload them to your website. This way, you can avoid having to serve oversized images to your visitors, which can slow down your site.
Finally, I wanted to point out that there are a number of plugins available that can help you automate the process of optimizing your images. WP Smush is a great option that can help you save time and ensure that your images are always properly optimized.
WPBeginner Support says
Thanks for sharing your comment
Administrator
Rebecca Gelsi says
This is brilliant, thank you. I’m using JPEGmini after reading this article and am so relieved to have this aspect of our site sorted.
Andy says
Thanks for the normal and simple explanation. I made a few mistakes with my photo content on my site, but with the help of your explanations, I figured out exactly what I needed to do. Thank you!
WPBeginner Support says
Glad our guide was helpful
Administrator
Tania says
So helpful!! Thank you for sharing. Quick question – If I compress my images to an optimal/acceptable KB size directly in Photoshop using the Save for web setting mentioned above, and then upload to WordPress…is there a need to also run Shortpixel or another image compression plugin? Or is that redundant?
Trying to understand if there are added benefits to using a plugin vs Photoshop. Would love to hear your thoughts. Thanks!
WPBeginner Support says
The plugins are an alternative, if you optimize your images before uploading them, you wouldn’t need to use an image optimization plugin
Administrator
Shiv Raj Bhatt says
Great idea to optimize images for faster loading website. Thanks for the info.
WPBeginner Support says
Glad you like our content
Administrator
Lauren says
Excellent and thorough! Thank you!
WPBeginner Support says
Glad our guide was helpful
Administrator
Eddier Naranjo says
The optimization plugins make a copy of the „heavy” image and serve the optimized version. But that increases the storage space on the site.
Is there a way to delete the old version and leave only the optimized image?
WPBeginner Support says
We would recommend checking with the support for the plugin that you are using as they normally have an option to remove the unoptimized version.
Administrator