So cropping is an important way to reduce the size of an image. Once I compressed it, I got it down to only 4.4 KB. The new file size is just 9 KB! All that without even doing any compression or changing the file format. Instead of using that, I cut out the middle portion, which I didn’t need as shown below. The above file size was originally 22 KB in size. Here’s an example where I have to include a screenshot of the Start menu while typing a command. This comes in handy way more often than you would think. 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. No matter what image you have, you can normally crop it a little bit at least, which will definitely help reduce the size.Īnd 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. Crop ImageĪnother 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. In addition to Photoshop, most image editors also let you change the color depth/mode for an image. You can read more about these colors modes on Adobe’s website. You can choose RGB color and 16 bits/channel, but the image would look exactly the same, but have a larger file size. In my webpage example, the GIF only needs to support Indexed color and 8 bits/channel. 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. 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. 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. So, for example, my website can only have images up to 680 pixels wide. For anything on the web, you only have to worry about pixels, not dots.
Read this great article on the difference between DPI and PPI. Here you can change the width/height or the resolution, which is normally dots per inch (DPI) or pixels per inch (PPI). You’ll obviously be losing a large chunk of the original image in the data, but depending on your purpose, it may not matter.Įvery image editing program will have a way for you to change or resize the image. If you have a file that is 4000×2500, then reducing the size to 2000×1250 will make the file half the size. The main way to shrink an image is to lower the picture resolution. I personally use Kraken.io for my websites, but there are other good ones out there like TinyPNG and Optimizilla. For compression, I recommend using online tools as they do a great job. You can use your photo app to change the format for an image to see which size is smallest. The JPG didn’t compress much, but JPGs normally don’t compress as well as PNGs do. The GIF only reduced by 5 KB, but at the same time lost a lot of quality. But remember, JPG is only 16-bit, whereas PNG is 24-bit, so JPG supports millions of colors, but PNG supports unlimited colors. JPEG will always normally be better for photography images with lots of colors. Lossy GIF: 22 KBĪs 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. When I did a lossy compression, the numbers for PNG were the most impressive. The PNG went to 45 KB and the JPG went to 58 KB. When I did a lossless compression of the three, only the JPG and PNG images got reduced in size, but not by much. However, in my experience, PNGs compress much better if it’s a lossy compression and the image quality is still very good. GIF does well here as it’s only 27 KB compared to the PNG, which is 68 KB.
As mentioned earlier, JPEG is better for photography. Here are the files sizes in the different formats without any compression: Original GIF: 27 KBĪs you can see, the PNG and GIF files are definitely sharper than the JPEG.
As an example, I just took a screenshot of the HDG website (600×319) since it has few colors and isn’t complex. Format & Compressionįirst, let’s start with a flat color graphic.
Obviously, using lossy compression will give you much smaller files, as you’ll see in the examples below, but you’ll lose some quality. This will give you the smallest file while keeping the original quality of the image. Let’s start off by talking about how you can reduce the size of the image without losing quality.
0 kommentar(er)
