Prethodno sam napisao članak o tome kako smanjiti veličinu slikovne datoteke  pomoću ugrađene opcije e-pošte u Exploreru^(Explorer) ili korištenjem desktop programa pod nazivom Image Resizer za Windows . Ovo su dobre opcije, ali postoji nekoliko drugih načina za optimizaciju slike. Također, mnoge web stranice će vam reći da koristite Paint , ali otkrio sam da to nije dobra metoda jer slike izgledaju puno lošije.

Prvo, važno je razumjeti da će neke metode koje se koriste za smanjenje veličine slike rezultirati slikom niže kvalitete, što može biti dobro za web stranicu, ali ne i za ispis. To se obično događa kada promijenite rezoluciju slike, recimo s 2560×1440 na 1920×1080.

Drugi način smanjenja veličine slike je komprimiranje slike. Postoje dvije vrste kompresije: bez gubitaka i bez gubitaka. Kompresija bez gubitaka^(Lossless) smanjit će veličinu slike bez gubitka niti jednog piksela izvorne datoteke. Gubitak^(Lossy) znači da će neki podaci biti izgubljeni.

Konačno, format slike također čini veliku razliku u veličini datoteke. Normalna slika koju snimite fotoaparatom vjerojatno će biti JPG slika jer ona dobro funkcionira u smislu kompresije. Međutim, slike s malo boja (256 boja ili manje) bit će puno manje ako koristite GIF . PNG je format bez gubitaka koji se može jako komprimirati. Dobro funkcionira za web grafiku i složene fotografije.

U ovom članku dajem nekoliko primjera sa snimkama zaslona komprimiranja slike pomoću više formata tako da možete vidjeti razlike u veličini i kvaliteti.

Kako smanjiti veličinu slike

Počnimo s razgovorom o tome kako možete smanjiti veličinu slike bez gubitka kvalitete. Time ćete dobiti najmanju datoteku uz zadržavanje izvorne kvalitete slike. Očito, korištenje kompresije s gubicima dat će vam mnogo manje datoteke, kao što ćete vidjeti u primjerima u nastavku, ali ćete izgubiti nešto na kvaliteti.

Format i kompresija

Prvo, počnimo s ravnom grafikom u boji. Kao primjer, upravo sam uzeo screenshot HDG web stranice (600×319) jer ima malo boja i nije složen. Evo veličina datoteka u različitim formatima bez kompresije:

Izvorni GIF: 27 KB

Izvorni JPEG: 67 KB

Original PNG: 68 KB

Kao što možete vidjeti, PNG i GIF datoteke su definitivno oštrije od JPEG . Kao što je ranije spomenuto, JPEG je bolji za fotografiju. GIF se ovdje dobro snalazi jer ima samo 27 KB u usporedbi s PNG -om , koji iznosi 68 KB. Međutim, prema mom iskustvu, PNG^(PNGs) -ovi se mnogo bolje komprimiraju ako je kompresija s gubicima i kvaliteta slike je i dalje vrlo dobra.

Kada sam napravio kompresiju bez gubitaka od tri, samo su JPG i PNG slike smanjene u veličini, ali ne mnogo. PNG je otišao na 45 KB, a JPG na 58 KB. Kad sam napravio kompresiju s gubicima, brojevi za PNG su bili najimpresivniji.

GIF s gubitkom: 22 KB

JPEG s gubitkom: 50 KB

PNG s gubitkom: 23 KB

Kao što vidite, PNG izgleda najbolje i samo je 1 KB veći od GIF -a ! Zato koristim PNG slike na ovoj web stranici za većinu svojih snimki zaslona. JPEG će obično biti bolji za fotografije s puno boja. Ali zapamtite, JPG je samo 16-bitni, dok je PNG 24-bitni, tako da JPG podržava milijune boja, ali PNG podržava neograničene boje.

GIF je smanjen samo za 5 KB, ali je u isto vrijeme izgubio dosta kvalitete. JPG se nije komprimirao puno, ali JPG^(JPGs) -ovi se obično ne komprimiraju tako dobro kao PNG-ovi^(PNGs) .

Možete koristiti svoju aplikaciju za fotografije za promjenu formata slike kako biste vidjeli koja je veličina najmanja. Za kompresiju preporučam korištenje internetskih alata jer oni izvrsno rade. Ja osobno koristim Kraken.io za svoje web stranice, ali postoje i druge dobre kao što su TinyPNG  i Optimizilla .

Promjena rezolucije slike

Glavni način smanjivanja slike je smanjenje rezolucije slike. Ako imate datoteku veličine 4000×2500, smanjenjem veličine na 2000×1250 datoteka će biti upola manja. Očito ćete izgubiti veliki dio izvorne slike u podacima, ali ovisno o vašoj namjeni, to možda nije važno.

Svaki program za uređivanje slika imat će način na koji možete promijeniti ili promijeniti veličinu slike. Ovdje možete promijeniti širinu/visinu ili razlučivost, koja je obično točkica po inču ( DPI ) ili piksela po inču ( PPI ). Pročitajte ovaj sjajan članak o razlici između DPI i PPI^{(difference between DPI and PPI)} . Za bilo što na webu morate se brinuti samo o pikselima, a ne o točkama. Točke^(Dots) će utjecati samo na ispisane slike.

Tako, na primjer, moja web stranica može imati samo slike širine do 680 piksela. Stoga^(Therefore) uvijek mijenjam veličinu slike na 680 piksela ili niže prije nego što je učitam jer će u protivnom WordPress promijeniti njezinu veličinu na 680 piksela za mene, ali će veličina datoteke biti veća nego što bi trebala biti.

Ako želite razumjeti više o broju od 72 piksela/inču i opciji ponovnog uzorkovanja, pogledajte ovaj izvrstan post^{(excellent post)} koji ide u velike detalje.

Promijenite dubinu/način boje

U gornjem primjeru, ako imate sliku sa samo nekoliko boja, onda ne morate koristiti format slike koji podržava milijune boja. U primjeru moje web stranice, GIF treba podržavati samo indeksiranu^(Indexed) boju i 8 bita/kanal.

Možete odabrati RGB boju i 16 bita/kanal, ali bi slika izgledala potpuno isto, ali bi imala veću veličinu datoteke. Više o ovim načinima boja^{(colors modes)} možete pročitati na Adobeovoj web stranici. Osim Photoshopa^(Photoshop) , većina uređivača slika također vam omogućuje promjenu dubine boje/načina za sliku.

Izreži sliku

Još jedan jednostavan način za smanjenje veličine slike je jednostavno je izrezati! Sve što je izrezano bit će dovršeno uklonjeno sa slike. Bez obzira koju sliku imate, normalno je možete barem malo izrezati, što će svakako pomoći u smanjenju veličine.

I imajte na umu da izrezivanje ne mora biti samo tipično u kojem izrezujete stvari odozgo/dolje ili lijevo/desno. SnagIt Editor , jedan od mojih omiljenih, ima alat za izrezivanje koji vam omogućuje izrezivanje dijelova slika iz sredine slike vodoravno ili okomito. Ovo dolazi na ruku češće nego što mislite. Evo primjera gdje moram uključiti snimku zaslona izbornika Start dok upisujem naredbu.

Gornja veličina datoteke izvorno je bila 22 KB. Umjesto toga, izrezala sam srednji dio, koji mi nije trebao kao što je prikazano ispod.

Nova veličina datoteke je samo 9 KB! Sve to čak ni bez kompresije ili promjene formata datoteke. Kada sam ga komprimirao, smanjio sam ga na samo 4,4 KB. Dakle, izrezivanje je važan način za smanjenje veličine slike.

Nadamo se da ste smanjili veličinu svoje slike i usput naučili nešto o tome kako digitalne slike funkcioniraju! Ako imate bilo kakvih pitanja, slobodno komentirajte. Uživati!

How to Reduce the Size on an Image File

Previoυsly, I wrote an article on how tо reduce the size of an image file using the built-in email option in Explorer or by usіng a desktop program сalled Image Resizer for Wіndows. These are good options, but there are several other ways to go about optimizing an image. Also, a lot of websіtes will tell you to use Paint, but I have found it’ѕ not a good method because the images look way worse.

Firstly, it’s important to understand that some methods used to reduce the size of an image will result in a lower quality picture, which may be fine for a website, but not for printing. This usually occurs when you change the resolution of a picture, say from 2560×1440 to 1920×1080.

Another way to reduce the size of an image is to compress the image. There are two types of compression: lossless and lossy. Lossless compression will reduce the size of the image without losing a single pixel of the original file. Lossy means that some data will be lost.

Finally, the picture format also makes a big difference in the size of the file. A normal picture you take from your camera will probably be a JPG image because that works well in terms of compression. However, images with few colors (256 colors or less) will be a lot smaller if you use GIF. PNG is a lossless format that can be highly compressed. It works well for web graphics and complex photographs.

In this article, I give a few examples with screenshots of compressing an image using multiple formats so you can see the size and quality differences.

How to Reduce Image Size

Let’s start off by talking about how you can reduce the size of the image without losing quality. This will give you the smallest file while keeping the original quality of the image. Obviously, using lossy compression will give you much smaller files, as you’ll see in the examples below, but you’ll lose some quality.

Format & Compression

First, let’s start with a flat color graphic. As an example, I just took a screenshot of the HDG website (600×319) since it has few colors and isn’t complex. Here are the files sizes in the different formats without any compression:

Original GIF: 27 KB

Original JPEG: 67 KB

Original PNG: 68 KB

As you can see, the PNG and GIF files are definitely sharper than the JPEG. As mentioned earlier, JPEG is better for photography. GIF does well here as it’s only 27 KB compared to the PNG, which is 68 KB. However, in my experience, PNGs compress much better if it’s a lossy compression and the image quality is still very good.

When I did a lossless compression of the three, only the JPG and PNG images got reduced in size, but not by much. The PNG went to 45 KB and the JPG went to 58 KB. When I did a lossy compression, the numbers for PNG were the most impressive.

Lossy GIF: 22 KB

Lossy JPEG: 50 KB

Lossy PNG: 23 KB

As you can see, the PNG looks the best and it’s only 1 KB bigger than the GIF! That’s why I use PNG images on this website for most of my screenshots. JPEG will always normally be better for photography images with lots of colors. But remember, JPG is only 16-bit, whereas PNG is 24-bit, so JPG supports millions of colors, but PNG supports unlimited colors.

The GIF only reduced by 5 KB, but at the same time lost a lot of quality. The JPG didn’t compress much, but JPGs normally don’t compress as well as PNGs do.

You can use your photo app to change the format for an image to see which size is smallest. For compression, I recommend using online tools as they do a great job. I personally use Kraken.io for my websites, but there are other good ones out there like TinyPNG and Optimizilla.

Change Image Resolution

The main way to shrink an image is to lower the picture resolution. If you have a file that is 4000×2500, then reducing the size to 2000×1250 will make the file half the size. You’ll obviously be losing a large chunk of the original image in the data, but depending on your purpose, it may not matter.

Every image editing program will have a way for you to change or resize the image. Here you can change the width/height or the resolution, which is normally dots per inch (DPI) or pixels per inch (PPI). Read this great article on the difference between DPI and PPI. For anything on the web, you only have to worry about pixels, not dots. Dots will only effect printed images.

So, for example, my website can only have images up to 680 pixels wide. Therefore, I always resize an image to 680 pixels or lower before uploading it because otherwise WordPress will resize it to 680px for me, but the file size will be larger than it needs to be.

If you want to understand more about the 72 pixels/inch number and the resample option, check out this excellent post that goes into great detail.

Change Color Depth/Mode

In the example above, if you have an image with only few colors, then you don’t need to use an image format that supports millions of colors. In my webpage example, the GIF only needs to support Indexed color and 8 bits/channel.

You can choose RGB color and 16 bits/channel, but the image would look exactly the same, but have a larger file size. You can read more about these colors modes on Adobe’s website. In addition to Photoshop, most image editors also let you change the color depth/mode for an image.

Crop Image

Another easy way to reduce the size of an image is to simply crop it! Anything that is cropped out will be completed removed from the image. No matter what image you have, you can normally crop it a little bit at least, which will definitely help reduce the size.

And note that a crop doesn’t just have to be the typical one where you cut out stuff from the the top/bottom or left/right. SnagIt Editor, one of my favorites, has a cut out tool that lets you cut out parts of images from the middle of an image horizontally or vertically. This comes in handy way more often than you would think. Here’s an example where I have to include a screenshot of the Start menu while typing a command.

The above file size was originally 22 KB in size. Instead of using that, I cut out the middle portion, which I didn’t need as shown below.

The new file size is just 9 KB! All that without even doing any compression or changing the file format. Once I compressed it, I got it down to only 4.4 KB. So cropping is an important way to reduce the size of an image.

Hopefully, you reduced the size of your image and learned a little bit about how digital images work along the way! If you have any questions, feel free to comment. Enjoy!

Related posts

• Izvoz, brisanje i povećanje veličine zapisnika događaja u sustavu Windows

• Kako vidjeti veličinu korisničkih poštanskih sandučića u Exchangeu 2007

• Recenzija knjige - Vodič za štreberke za Windows 8

• Instaliranje dodataka GIMP: Vodič s uputama

• Kako preuzeti izvanmrežni (samostalni) instalacijski program za Google Chrome

• Kako izbrisati mapu Windows.old u sustavu Windows 7/8/10

• Kako otvoriti DDS datoteke u sustavu Windows 10

• 6 najboljih postavki kamere za fotografije Mjeseca

• Koristite Netstat da biste vidjeli portove za slušanje i PID u sustavu Windows

• Kako napraviti snimke zaslona na Nintendo Switchu

• Kako stvoriti tim u Microsoft timovima

• Kako ući SSH ili SFTP u vaš Raspberry Pi

• Isključite kontrolu korisničkog računa (UAC) za određenu aplikaciju

• Korištenje web sučelja prijenosa

• Napravite Gmail aplikaciju za stolna računala s ova 3 klijenta e-pošte

• Deinstalirajte i ponovno instalirajte IE u sustavu Windows 7

• Kako otvoriti zaključanu datoteku kada je koristi drugi program

• Kako oporaviti hakirani Facebook račun

• Kako letjeti dronom za potpune početnike

• 7 tehničkih savjeta za SEO optimizaciju za bilo koju web stranicu