Optymalizacja obrazów? - potrzebujesz tylko tych trzech narzędzi (film, 9 minut)
W dzisiejszym wpisie blogowym Siegfried, deploy! przybliża najlepsze narzędzia do optymalizacji obrazów, które znacząco zmniejszają rozmiar plików, co przyspiesza ładowanie stron internetowych. W rozmowie między Siergiejem a Stefanem pada pytanie, dlaczego istotne jest używanie wielu narzędzi do optymalizacji. Wyjaśniają, że chociaż istnieją opcje automatyzacji, zawsze warto samodzielnie upewnić się, że obrazy są już zoptymalizowane przed ich przesłaniem. W materiale Stefan demonstruje, jak za pomocą narzędzia Squoosh app można osiągnąć ogromną redukcję rozmiaru pliku nawet o 84%, co jest świetnym wynikiem, gdyż zmniejsza rozmiar z 304KB do zaledwie 48KB.
Siergiej omawia również różne formaty obrazów, takie jak JPEG czy PNG, i wskazuje, że nie każdy format jest najlepszy dla danej grafiki. Eksperymentując z ustawieniami, odkrywa, że optymalizacja bezstratna dla PNG oferuje jeszcze mniejsze rozmiary plików, a dobór odpowiednich kodeków jak OxyPNG pozwala na osiągnięcie wartości 29KB. To z kolei pokazuje, jak ważne jest dostosowywanie ustawień do konkretnego obrazu, aby uzyskać możliwie najlepszą jakość przy zachowaniu niskiego rozmiaru pliku.
Oprócz Squoosh, mowa jest także o aplikacji SVGO, która pozwala na optymalizację plików SVG. Dzięki niej możliwe jest zminimalizowanie kodu wewnętrznego, co prowadzi do zmniejszenia rozmiarów plików SVG do 4.9KB. Siergiej podkreśla, że każdy plik SVG zasługuje na optymalizację przed przesłaniem go na system zarządzania treścią, zwłaszcza, że SVG nie są optymalizowane automatycznie przez przeglądarki.
Trzecim narzędziem, o którym mowa, jest ImageOptim, aplikacja na Maca, która automatycznie optymalizuje obrazy po ich przesunięciu do aplikacji. Choć opcje są ograniczone, jest to doskonałe narzędzie do zbiorczej obróbki grafik. Ostatecznie, Siergiej zwraca uwagę, że wykorzystanie narzędzi takich jak Squoosh do obróbki pojedynczych obrazów daje większą kontrolę nad ostatecznym rezultatem. Warto dobrze zrozumieć różne dostępne opcje, aby móc w pełni wykorzystać potencjał optymalizacji obrazów.
Na koniec warto zwrócić uwagę na statystyki filmu: w chwili pisania tego artykułu, materiał zgromadził 3394 wyświetlenia oraz 107 polubień. To pokazuje, że temat optymalizacji obrazów jest na pewno ważny, a sześciominutowy film zaprezentował praktyczne narzędzia i techniki, które każdy może zastosować, aby poprawić wydajność swojej strony internetowej.
Toggle timeline summary
-
Wprowadzenie do najlepszych narzędzi do optymalizacji obrazów w celu szybszego ładowania strony internetowej.
-
Dyskusja na temat konieczności posiadania wielu narzędzi do optymalizacji.
-
Eksportowanie obrazu z Figma do użytku na stronie internetowej.
-
Przesyłanie obrazu do aplikacji Squoosh w celu optymalizacji.
-
Obserwacja 84% zmniejszenia rozmiaru pliku po optymalizacji.
-
Opcje dostępne w celu zwiększenia jakości i różnych kodeków.
-
Pytanie, czy strony internetowe automatycznie obsługują optymalizację obrazów.
-
Znaczenie przesyłania zoptymalizowanych obrazów dla jakości.
-
Identyfikacja błędów związanych z formatem obrazu użytym do optymalizacji.
-
Zalety korzystania z PNG do optymalizacji bezstratnej.
-
Wybór odpowiedniego kodeka do dalszego zmniejszenia rozmiaru pliku.
-
Wyjaśnienie kompresji bezstratnej i stratnej w formacie WebP.
-
Porównanie rozmiaru pliku SVG z zoptymalizowanymi wersjami.
-
Wprowadzenie do SVGO do optymalizacji SVG.
-
Znaczenie optymalizacji SVG przed przesłaniem do CMS.
-
Wprowadzenie do ImageOptim do zbiorczej optymalizacji obrazów.
-
Opis funkcji przeciągnij i upuść w ImageOptim.
-
Wyjaśnienie ustawień jakości i opcji wysiłku w ImageOptim.
-
Zalecenie używania aplikacji Squoosh do szczegółowej optymalizacji obrazów.
Transcription
We're going to show you the best image optimization tools to dramatically decrease the file size for fast loading websites. Can I ask you a question, Stefan? Yes. Why multiple? Why can't you just only show us one? I wish there would be an easy answer. And actually, I think one of those tools is somewhat an easy answer. Let's do this. Let's go to Figma and download an image that I want to use as a featured image for a website. So I'm just exporting this here. And then I'm uploading this to one of the coolest online tools that I know, Squoosh app. So we can just take this image, upload it there, and it will immediately start optimizing the image. And you notice that, whoa, I'm getting an 84% decrease in file size. Because we have 304 kilobytes before and 48 kilobytes after. Which is pretty amazing, right? And then you've got some more options here, for example, to increase the quality. But you also got multiple codecs that you can choose. For example, the one I like to use most and gives me the best results is mosjpg. And when you look at the actual changed image, it's very hard to notice a difference in quality there. And why should you actually do this in the first place, optimizing your images, right? Isn't the website taking care of that, like your WordPress website and so on anyways? Not really, right? It depends on how you have set up everything. I mean, there are tools for optimizing WordPress images automatically. But it's always a good idea to upload an optimized image already. But this optimized image should be in the best quality possible and in the best format possible. And actually, I think I did kind of a mistake here, because JPEG is not the best format for this type of image. Because it's more like a graphic. It's not a photograph or something like that, right? So actually, I should rather have taken and exported this as a PNG image. Because then the original file size is at 67 kilobytes only. So let's just drag and drop this one and then see the further magic that it can do. The benefit of the PNG here is that this optimization is actually lossless, whereas the JPEG was compressed to some extent. Whoa, wait. You actually converted it to a JPEG. Now and this even got a decrease in file size. But if you now choose the right format, you will see even a bigger decrease in size. I fixed that. I chose the right format, the right codec here, OxyPNG. And then it's decreased to 29 kilobytes only. And if I increase the slider for the effort, then I can get the image to be even smaller. Usually, not this one doesn't do something for this one. But you should always try like increasing the effort slider to the very right, I'd say. There are so many more options here. Like, for example, if you chose to convert it to WebP, then you have a lot of advanced settings. However, you got to be aware that WebP does support lossless optimization and lossy compression. And by default, it's a lossy compression. So I need to tick this box here lossless and increase the effort there. If I want this to be lossless optimized. And then I'm getting kind of the smallest file size of 20.9 kilobytes. However, this image could actually be an SVG. And I also downloaded an SVG version of this one. And this is in its original format, only 16 kilobytes. So even smaller than all the optimized versions combined. But if I drag and drop this one here, I don't have any options to optimize an SVG. It will only convert this to other formats. But usually this would result in larger file sizes. So with all these options, I think it's great. But you really got to know what you want to do and what you want to achieve in the end result. One tip, always look at the image in the size that it will be displayed. So let's say you have a 1,000 by 1,000 image. And you know, OK, you want to support pixel density of three. Then you would resize it to 3,000 by 3,000. But zoom out so that you see on your screen the 1,000 pixel width. And this should be the image that you judge the quality by, right? Because while lossless is always great if you want to keep the best quality, using lossy compression doesn't necessarily mean that your images look worse. And it can drastically reduce the file size as well. And this becomes very obvious when you take something like a photograph, which is like a huge source file, and then optimize that one. And you will see that there is a dramatic file increase, like for this one from six megabytes to just 1.7 megabytes for AVIF. But let's try also the JPEG compression. Yeah, even like reduced it by less than half of the size. But if you now watch closely, you won't actually notice any difference here. So we probably still got some room to decrease the quality, to further decrease the file size. And it will still be hard to notice a difference. And especially like now, if you zoom out, and if this should be just like a small image on a website, you might have a lot of potential here and a lot of room for optimization. And yeah, if you really want to get down to optimizing kind of the last couple of percents, then this is really the way to go. Yeah. But I think I interrupted you because you wanted to show something about SVGs. Right. And there's another tool, it's called SVGO, which is my favorite tool to optimize SVGs. So I can also, in the same way, drag and drop my SVG here, I will see a preview of the optimized image, and I will immediately get an optimized version, which was optimized here from 6.7 kilobytes to 4.9, which is great. I got some more optimization options here. But the most basic optimization that it does is, it kind of like minimizes the code inside of the SVG. I always like to do this for every SVG, especially as SVGs typically do not get optimized in the browser, right? You don't get multiple automatically resized versions on. But this one SVG is typically what every end user will see. So this is very important that you always optimize your SVGs before uploading them to a CMS like WordPress. Can you switch to the markup tab on the top? Yes. Yeah. You can see it does strip away classes, IDs, and things like that, white space, and also sometimes optimizes paths even. However, as Steffen said, there are a lot of options, and they do a lot of things. And if you are eager to understand them all, I would actually suggest that you look at least a little bit into how SVGs actually work. Absolutely. But these are like some of the most advanced things that you can, or tools that you can use to optimize your images and your SVGs and all kinds of formats. Let's talk about the third tool. And the third tool is more of a no-brainer. Yeah. It's called ImageOptim. And it's actually an app for Mac that is free to use. And the great thing about this one is that you simply drag and drop all your images on it, and it will automatically put them in the queue and optimize them. There are actually no options to choose from here. It also doesn't transcode your images from one format to another one, but it will just go through all those images and directly optimize them and tell you how much it optimized them and how many kilobytes or many times megabytes you actually saved. However, there are actually options. So if you go to the settings of the app, you can see here that you can activate certain tools that it uses to optimize. And in the quality tab, you can also activate a lossy compression. And then you have to specify JPEG, PNG, and GIF quality. And in the third tab and optimization, you can say the effort basically, like what's effort in the Squoosh app is this setting in this app. While you don't have many options for these like automated tools, that's great to optimize a lot of images at once. But if you do something on an image by image basis, then I would still suggest to use the Squoosh app and there check the exact values and try to get the smallest image possible. I couldn't agree more with what you said.