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!
Diane Talbotier says
Hi, does resizing mean changing the size of the images as they are shown on the website, or resizing the size of the file , please?
And how do I know what is the optimal size?
WPBeginner Support says
It would depend on what you mean, for compression in this guide, it is the size for the file. You can also reduce the width and height of an image if it is too large. Your specific theme would determine the specific image size you want to use.
Administrator
Terri says
You mentioned in your optimise example that your original photo was 300dpi, then you optimised it to a smaller file size. But you did not say what the target dpi was. Is it 72 for web? Or higher? Thanks for the informative article.
WPBeginner Support says
That would depend on your personal preference and how large you are wanting/needing the images to be.
Administrator
Romel says
thanks a lot it cleared a lot of doubts.
WPBeginner Support says
Glad our article was helpful
Administrator
Odenyi Emmanuel Chidera says
What I like most about wpbeginner is how they will give you information on what to implement on your own site but also tell you what they are using on their own site. It really helps me decide faster. Learning from a master is always easier. Thanks.
WPBeginner Support says
You’re welcome, glad you like our content
Administrator
Luz Manalo-Cruz says
I’ve compressed images via TinyPNG and tried to replace the heavier images on my site with these (ie. I deleted the heavy photos and uploaded the compressed ones). However the media library is still uploading the old heavier images. Does that mean that I can’t replace the old images already uploaded? Will it only upload the compressed images that have not been uploaded at all?
WPBeginner Support says
If you are replacing the heavier images, you would want to ensure you don’t have caching on your site that is showing the old image and when you upload the new image that you are uploading the correct image.
Administrator
Giovanna says
Thanks for the informative article, Syed.
Moving forward I am going to make sure to always use optimized images. Do you recommend I go back to already published posts and replace my images with optimized ones?
WPBeginner Support says
If possible we would recommend updating your older images, the plugins we recommended should handle that for you
Administrator
Percy Young says
Thank you for your post. many nice tools. I wonder if theres any thing to be done to rezize images that have been previously uploaded, and how to delete images the worpress is not using any more.
WPBeginner Support says
If you need to generate new images you could follow our guide here:
https://www.wpbeginner.com/plugins/regenerate-thumbnails-new-image-sizes-wordpress/
For removing the extra images there are media cleanup plugins that you are able to use
Administrator
WPBeginner Support says
Glad you’ll use our recommendations
Administrator
Dr Amandeep Sandhu says
Thanks for sharing such ideas….!
WPBeginner Support says
You’re welcome, thanks for reading our articles
Administrator
İbrahim BOZKURT says
I’m a WordPress developer. I am writing from Turkey.
Very difficult to find quality WordPress resources.
I discovered you. I didn’t know English but learned English. Thanks to you everything.
WPBeginner Support says
Thank you for reading our articles and congratulations on learning a new language
Administrator
Felipe Adan Lerma says
Hi, it seems maybe WordPress has incorporated some of this into its current image upload process, at least in the Premium bracket?
I ask cause I now get the option to choose the actual size or something larger or smaller?
Or is that process not an optimization / reduction in size of the image?
Thanks so much! Very important useful topic.
Adan
WPBeginner Support says
It sounds like you may be talking about WordPress.com and they have custom plugins setup for sites on their service
Administrator
Felipe Adan Lerma says
Ahhh, yes, I forget the two WP’s differ, sorry. I’m still trying to figure out how to work where I am w/WP & it’s definitely via their .com sites. Thank so much then, WP – Adan
WPBeginner Support says
No worries, should it help we have our article listing the differences here:
https://www.wpbeginner.com/beginners-guide/self-hosted-wordpress-org-vs-free-wordpress-com-infograph/
Anna says
Very helpful info!! I was just researching how to do this when your email came through! Saved em time and effort and had just the advice I was looking for.
WPBeginner Support says
Glad our guide and newsletter could be helpful
Administrator
Lindsay says
When saving on photoshop what width do you suggest for optimum web performance?
My theme is saving 1600×1050 for optimum header but what should I do for the body images. Theme designer doesn’t have a recommendation.
WPBeginner Support says
If you’re going through the other steps in this article then the image size would be what would fit your content’s dimensions best so WordPress wouldn’t need to resize the image.
Administrator
edccde says
Please update that youtube video.First of all Jpegmini isn’t a web app and it is a software which i have to install in my pc.
WPBeginner Support says
Thank you for letting us know about the video, we’ll certainly look into updating the video
Administrator
Jackie says
Is there way to compress images already uploaded to wordpress? Or do I need to compress all my images and then reupload into WP? THanks in advance for the advices.
Irina says
Hi,
Need an advice: I need to upload Low res and Hi-res images (1200pix at 300dpi) so my customers can download them. I have no questions about LR image optimization. How can I save hi-res images? The size is up to 2 MB. I have hundreds of thousands of images…
Ratan Kumar says
This post is awesome and really add value to my site. However, I recently tried to save images from flipkart but it saved in very low pixel format. Wondering if you can help me to figure out on how to do that.
Ray says
I already bulk uploaded 1500 product images that were connected to image urls I found on the internet.
Now that I have those 1500 images already in my Media Library, how can I go back and resize and compress them?
Also, I’m confused about whether resizing means changing the size of the images as they are shown on the website, or resizing the size of the file.
Thanks!
Sara Lewis says
what about the plugin ewww image optimizer?
WPBeginner Support says
Hey Sara,
Yes its a good alternative. However, for better results we would still recommend optimizing images in your image editing program before uploading to WordPress.
Administrator
Donna says
I will be travelling to a place where internet connectivity is limited and expensive. So, I want to reduce the file size of my photos before I go online to upload them to my blog. Can someone please recommend for me what resolution and dpi would be good to use? The app I am planning to use asks for three measurements:
resolution – from 200 to 2048
DPI – from 72×72 to 300×300
jpeg quality (compression level) – from 0.00 to 1.00
Carrie says
In the video she changes her pic. I understand the screen in PS. But you have not explained what should the width and height be in pixels for WP the limit is 2mb. What would be a good standard for sliders, etc for a wp site?
Carrie says
Sorry for being the dunce in the corner, but could someone please clarify one thing? I installed the WP Smush it plugin and have been slowly working through all the photos I’ve uploaded to my site for the last 2 years. I’m doing 50 at a time, the free limit. However, now that I have the plugin, for future photo uploads, does having it mean I don’t have to use any other program to resize my photos before uploading them to my WP site? If I have an 8 MB photo and upload it to my site, the plugin does everything for me? I just want to confirm that the original photo is not still uploaded and saved to my host server, SiteGround. My site is wicked slow, I’ve run tons of diagnostics, and I still can’t figure out why except that everything points to my photos. Thanks!
Tony Squibb says
Hi Carrie, I’m defo not an expert in any way but I do have experience with WP Smush it and yes, future uploads should be auto 'smushed’. There is a little notification in the media gallery as you do so.
To check the causes of your slow site you can use GTmetrix and then open the waterfall page where it will show the times of the individual pages items loading. Once you know what is the problem you can then address it.
I hope that helps from one 'dunce’ to another
Carrie says
Hi Tony,
Thanks for weighing in! Unfortunately I uninstalled WP Smush and tried EWWW Image Optimizer along with the Thumbnail Regerate plugin (based on another bloggers suggestion) and royally messed up the photos on my site. I’m a newb with regards to how to manage my files through the FTP on my web host, so I ended up deleting a bunch of images (as in hundreds) and re-uploading them after resizing them manually in an image program. Turns out that too was a bad idea. Now I have a bunch of error messages when I render my site in my Google Console because when Google crawls my site, those files are now gone or moved. AGH! I’m on the verge of simply paying someone to revamp my site or quitting altogether. But I really appreciate that you took the time to leave a helpful comment.
Happy New Year! May 2017 be better than 2016.
Jeff says
hi
Best Image Optimization Plugins for WordPress Site Which is?
Gagan says
I was thinking what if i upload my Images to Google Blogger and use them on my wordpress Site by „Insert From URL” option?
Any suggestion if this is a Good Idea or no?
Thanks in advance
Zimbrul says
I came back here as I’m looking for plugins that upload a large image as a optimised image straight to WordPress. I’m sure I’ve seen this somewhere here at WP Beginner but I cannot find it.
WPBeginner Support says
Please take a look at Optimizing images with WP Smush pros, cons, and alternatives.
Administrator
Jack says
Photoshop is definitely the best one, for online services, kraken.io and resizeimage.net are good alternatives to tinypng.
tanveer says
is xnview a good option for compressing images?
WPBeginner Support says
We haven’t tried it.
Administrator
Larry Aldrich says
Someone mentioned RIOT in an earlier comment. It is my go-to app for minimizing images BEFORE you upload them. The compression rate is close to phenomenal. Sorry MAC users, but it’s only available for Windows.
Martin says
Hello WPBeginner,
I would be very interested in the Windows version of Trimage you have apparently seen.
On the Trimage homepage you just see a link asking for help with the windows port…
Greg says
I have got used to using Fireworks even though I have CS3
Zimbrul says
Me too. I use CSS4 and still go to Fireworks for image optimisation.
Marianne P. says
I just checked out the Trimage site and did not see the Windows version – just various *nix versions. Please point me in the right direction. Thanks so much – really great article!
Corinna says
I was wondering if there was any way of reducing the size of the images already uploaded to a site? I have changed the way I upload them so in future all my images will be smaller. But I thought maybe it would be useful to change the size of those already uploaded.
Julie Anglesey says
I would also like to know how to reduce the size of images already uploaded.
Zimbrul says
It’s (or was) Smush-It.
Samiullah Khan says
Search the web too much to find good solution to optimize images; but most of them most of them doesn’t let’s see tools mentioned in this post work or not
Graham says
The article defines PNG as an uncompressed file format, but as far as I know, standard PNGs use lossless compression.
And I think it would be helpful to mention why you might choose one format over another for continuous tone images (eg. a photo) vs. limited palette images (eg. a logo).
Rob Dewing says
Why no mention of Photoshop Elements, the cut down home use version of Photoshop? It does 90+% of the things full phat Photoshop will do, including 'save for web’ image compression, all for less than $100.
Ines says
Would you recommend to use Flickr to upload your images and then copy the HTML code to your wordpress site? What would you suggest for travel blogs that contain lots of pictures? Thanks.
WPBeginner Support says
You can add flickr photos in WordPress by simply pasting the photo URL in a post. Normally we would not recommend it, because people will be viewing and finding your photos on Flickr and may never even get a chance to visit your website. However, if you feel that building a community around your photos on flickr is more useful for you, then sure go ahead.
Administrator
Benjamin says
You could add kraken.io to your list. It does the same thing as Jpegmini but also works with PNG images.
Aurel says
I am using RIOT, which is free, very fast and exelent program.
Debra Torres says
I’ve been using the Yahoo Smush it tool at: http://www.smushit.com/ysmush.it/
Would you recommend this one? Or are the others you mentioned better?
WPBeginner Support says
Smushit is a great tool too. But try other tools we mentioned and compare the results.
Administrator
James DiGioia says
There is WordPress plugin for Smush.it:
http://wordpress.org/plugins/wp-smushit/
This makes it easier to compress images using Smush.it without having to prep them beforehand.
Youri van Dijk says
I was about to mention that plugin as well. I generally do save my images optimized myself, but for clients that are not very familiar with these tools installing the plugin is a huge benefit.
John Mauldin says
Your article is VERY timely. Just encountered the need to reduce hundreds of photos for a kitchen and bath showroom. Bought JPEGmini since I could only do 20 photos a day in the free version but $19.99 is nothing for the ability to drag and drop entire folders into the program and have it zip them in seconds/minutes. Thanks so much for the help!
Haseeb says
Isn’t there any automated way of doing this on wordpress? How about 'WP Smush.it’ ?
Editorial Staff says
You can automate the process with some tools that we mentioned or using this plugin:
http://wordpress.org/plugins/ewww-image-optimizer-cloud/
But why create more server load when this can be resolved by educating the user.
Administrator
Marlene says
Great article, however I was under the impression that any images with text on them should be saved as PNG files for best sharpness….?
Editorial Staff says
PNG will definitely have a higher quality, but most folks won’t be able to tell the difference unless you put them side-by-side. If you can speed up your site with a non-noticeable difference, then why not
Administrator
Adam W. Warner says
Great article, and an important subject many WordPress admins miss.
[Link Removed]
Lynn says
Lightroom has a number of presets for exporting to Facebook and Web – do those compress the photo files sufficiently or should I still turn to Photoshop?
Editorial Staff says
Not sure about lightroom and how it exports image. You can run a side-by-side test.
Administrator
Graham says
Lightroom will do pretty much the same job as Photoshop when exporting photos to JPEGs.
Bill Wells says
Lightroom is the go-to for photographers; it allows you to optimise your photos in batches and then will export the batch to your preferred pixel size and compression in a number of formats, including jpeg. It also automatically adds your copyright message to the batch if you want.
I don’t know about batch-processing in Photoshop but I use it for major image manipulation only.
I guess if you’re doing graphics or heavy manipulation, use Photoshop but if you’re using lots of photos and just want them to look their best, use Lightroom.
Scott Wyden Kivowitz says
I’m a big advocate for many of the products you mentioned. Now I get to add this link to my resources for whenever customers ask me this exact question. Thanks Syed.
Editorial Staff says
You’re very welcome Scott.
Administrator
Dave Kulas says
If you are taking the pictures yourself for your website …. set your camera to take a picture at 800 x 600 and at less resolution. Some camera have a Good – Better – Best resolution setting … use the „GOOD” setting. . You should get an image that will load quickly.
If you already have some images … take a look at for FREE … http://www.getpaint.net ….. I have been using it for years. I take the HUGE photos given to me by clients … then RE-SIZE them to 800 x 600. Then I use the built in compression tool to compress the image.
Steven Alig says
I would not recommend taking low resolution photos.
You will want to take your original photos at higher resolutions just in case you want to use them for something else. Plus if you take photos at a higher resolution, you will have the ability to crop in on an area if desired.
If the photos are a lower resolution, you will not have that option and will be stuck with what you have taken as the original.
Mark Pridham says
I have to agree with Steven on this. I highly recommend taking high resolution images in your camera. You then have a large file that you can work with, It very easy to reduce file size from a hi-res image, but impossible to go the other way. By taking hi-res images, you also have the option of using them for print work if the need arises, Generally, I end up with the large, raw image, a cropped and retouched print image, and a smaller image for web-based work.
Michael Maye says
I would agree too about taking full high resolution photos. Then resize down and compress for uploading to your website. You will always have the original high res photo for other uses.
Zimbrul says
I usually use Fireworks and then Tiny PNG if required.
Editorial Staff says
Yup that’s a good combination
Administrator
Geoffrey Gordon says
Great article Syed.
However I really think that fireworks is the king when it comes to optimising images for the web and its a whole lot cheaper than Photoshop.
Editorial Staff says
Thanks Geoffrey. Yup I know Photoshop is expensive which is why I mentioned other free tools as well. GIMP and Fireworks both has this functionality.
Administrator
paul says
So I’ll just follow the options as seen on the image in this article’s Photoshop section and it’s all good?
Editorial Staff says
Yup, if you do that, then you will have probably one of the best performance results. However depending on an image, some might not look as good, so in those cases we try the Very High. Do it on case by case basis, but most images would be fine.
Administrator
Andrew Brown says
You discuss using Photoshop, which is way beyond most bloggers needs or price – why do you not refer to Lightroom, which also has an excellent image export option, including an option to restrict the max file size, as well as save by dimension or using a set dpi.
Once some one knows the comp screens work at 72dpi, the rest becomes much easier, and it becomes amazing as to how easy it is to have a web template amongst the export options without needing any real in depth knowledge of what needs to be done.
Editorial Staff says
Andrew,
Yes we understand that Photoshop is expensive which is why we mentioned several other free options. Just updated the article now to add a link to GIMP right below photoshop.
As for Lightroom, didn’t mention it because we don’t use it. Same reason why Fireworks was left out.
Administrator