Ранее я написал статью о том, как уменьшить размер файла изображения  с помощью встроенной опции электронной почты в проводнике^(Explorer) или с помощью настольной программы под названием Image Resizer для Windows . Это хорошие варианты, но есть несколько других способов оптимизации изображения. Кроме того, многие веб-сайты советуют вам использовать Paint , но я обнаружил, что это не очень хороший метод, потому что изображения выглядят намного хуже.

Во-первых, важно понимать, что некоторые методы, используемые для уменьшения размера изображения, приведут к ухудшению качества изображения, что может подойти для веб-сайта, но не для печати. Обычно это происходит, когда вы меняете разрешение изображения, скажем, с 2560×1440 на 1920×1080.

Еще один способ уменьшить размер изображения — сжать изображение. Существует два типа сжатия: без потерь и с потерями. Сжатие без^(Lossless) потерь уменьшит размер изображения, не теряя ни одного пикселя исходного файла. Lossy означает, что некоторые данные будут потеряны.

Наконец, формат изображения также сильно влияет на размер файла. Обычное изображение, которое вы снимаете с камеры, вероятно, будет изображением в формате JPG , потому что оно хорошо работает с точки зрения сжатия. Однако изображения с небольшим количеством цветов (256 цветов или меньше) будут намного меньше, если вы используете GIF . PNG — это формат без потерь, который может быть сильно сжат. Он хорошо работает для веб-графики и сложных фотографий.

В этой статье я приведу несколько примеров со скриншотами сжатия изображения с использованием нескольких форматов, чтобы вы могли увидеть разницу в размере и качестве.

Как уменьшить размер изображения

Начнем с того, как можно уменьшить размер изображения без потери качества. Это даст вам самый маленький файл, сохраняя исходное качество изображения. Очевидно, что использование сжатия с потерями даст вам гораздо меньшие файлы, как вы увидите в приведенных ниже примерах, но вы потеряете некоторое качество.

Формат и сжатие

Во-первых, давайте начнем с плоской цветной графики. В качестве примера я просто сделал скриншот веб-сайта HDG (600×319), так как он малоцветный и не сложный. Вот размеры файлов в разных форматах без сжатия:

Оригинальный GIF: 27 КБ

Исходный JPEG: 67 КБ

Оригинал PNG: 68 КБ

Как видите, файлы PNG и GIF определенно более четкие, чем ^(GIF)JPEG . Как упоминалось ранее, JPEG лучше подходит для фотографии. GIF преуспевает^(GIF) здесь, так как его размер составляет всего 27 КБ по сравнению с PNG , который составляет 68 КБ. Однако, по моему опыту, PNG^(PNGs) сжимаются намного лучше, если это сжатие с потерями, а качество изображения все еще очень хорошее.

Когда я выполнил сжатие без потерь из трех, только изображения JPG и PNG уменьшились в размере, но ненамного. PNG увеличился до 45 КБ, а JPG — до 58 КБ. Когда я выполнял сжатие с потерями, цифры для PNG были самыми впечатляющими.

Потерянный GIF: 22 КБ

JPEG с потерями: 50 КБ

PNG с потерями: 23 КБ

Как видите, PNG выглядит лучше всего, и он всего на 1 КБ больше, чем GIF ! Вот почему я использую изображения PNG на этом сайте для большинства своих скриншотов. JPEG всегда будет лучше для фотографий с большим количеством цветов. Но помните, что JPG только 16-битный, а PNG — 24-битный, поэтому JPG поддерживает миллионы цветов, а PNG поддерживает неограниченное количество цветов.

GIF уменьшился^(GIF) всего на 5 КБ, но при этом сильно потерял в качестве. JPG не сильно сжимается, но обычно JPG ^(JPGs)не^(JPG) сжимается так хорошо, как PNG^(PNGs) .

Вы можете использовать свое фото-приложение, чтобы изменить формат изображения, чтобы увидеть, какой размер наименьший. Для сжатия я рекомендую использовать онлайн-инструменты, так как они отлично справляются со своей задачей. Я лично использую Kraken.io для своих веб-сайтов, но есть и другие хорошие инструменты, такие как TinyPNG  и Optimizilla .

Изменить разрешение изображения

Основной способ уменьшить изображение — уменьшить разрешение изображения. Если у вас есть файл размером 4000×2500, то уменьшение размера до 2000×1250 уменьшит размер файла вдвое. Очевидно, вы потеряете большую часть исходного изображения в данных, но в зависимости от вашей цели это может не иметь значения.

В каждой программе редактирования изображений есть способ изменить или изменить размер изображения. Здесь вы можете изменить ширину/высоту или разрешение, которое обычно составляет количество точек на дюйм ( DPI ) или пикселей на дюйм ( PPI ). Прочитайте эту замечательную статью о разнице между DPI и PPI^{(difference between DPI and PPI)} . Для чего-либо в Интернете вам нужно беспокоиться только о пикселях, а не о точках. Точки^(Dots) влияют только на печатные изображения.

Так, например, на моем веб-сайте могут быть изображения шириной до 680 пикселей. Поэтому^(Therefore) я всегда изменяю размер изображения до 680 пикселей или меньше перед его загрузкой, потому что иначе WordPress изменит его размер до 680 пикселей для меня, но размер файла будет больше, чем нужно.

Если вы хотите узнать больше о числе 72 пикселя на дюйм и параметре повторной выборки, ознакомьтесь с этой отличной статьей^{(excellent post)} , в которой подробно рассказывается.

Изменить глубину цвета/режим

В приведенном выше примере, если у вас есть изображение с несколькими цветами, вам не нужно использовать формат изображения, поддерживающий миллионы цветов. В моем примере с веб-страницей GIF должен поддерживать только индексированный^(Indexed) цвет и 8 бит на канал.

Вы можете выбрать цвет RGB и 16 бит/канал, но изображение будет выглядеть точно так же, но иметь больший размер файла. Подробнее об этих цветовых режимах^{(colors modes)} можно прочитать на веб-сайте Adobe. Помимо Photoshop , большинство графических редакторов также позволяют изменять глубину цвета/режим изображения.

Обрезать изображение

Еще один простой способ уменьшить размер изображения — просто обрезать его! Все, что обрезано, будет полностью удалено из изображения. Независимо от того, какое у вас изображение, вы обычно можете его хотя бы немного обрезать, что определенно поможет уменьшить размер.

И обратите внимание, кадрирование не обязательно должно быть типичным, когда вы вырезаете элементы сверху/снизу или слева/справа. SnagIt Editor , один из моих любимых, имеет инструмент вырезания, который позволяет вырезать части изображения из середины изображения по горизонтали или вертикали. Это пригодится гораздо чаще, чем вы думаете. Вот пример, когда я должен включить скриншот меню « Пуск^(Start) » при вводе команды.

Приведенный выше размер файла изначально составлял 22 КБ. Вместо этого я вырезал среднюю часть, которая мне не нужна, как показано ниже.

Новый размер файла составляет всего 9 КБ! И все это без какого-либо сжатия или изменения формата файла. Как только я сжал его, я уменьшил его до 4,4 КБ. Таким образом, кадрирование — важный способ уменьшить размер изображения.

Надеюсь, вы уменьшили размер своего изображения и немного узнали о том, как работают цифровые изображения! Если у вас есть какие-либо вопросы, не стесняйтесь комментировать. Наслаждаться!

How to Reduce the Size on an Image File

Previously, I wrote an article on how to reduce the size of an image file using the built-in email option in Explorer or by using a desktop program cаlled Image Resizer for Wіndows. These are good options, but thеre are several other ways tо go about optimizing an image. Also, a lot of websites will tell you to use Paint, but I have found it’s not a good method because the images loоk 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

• Экспорт, очистка и увеличение размера журналов событий в Windows

• Как просмотреть размер почтовых ящиков пользователей в Exchange 2007

• Рецензия на книгу — Руководство для гиков по Windows 8

• Установка плагинов GIMP: практическое руководство

• Как загрузить автономный (автономный) установщик Google Chrome

• Как делать скриншоты на Nintendo Switch

• Как включить аутентификацию Steam Guard

• Как настроить мастер-страницы в Adobe InDesign CC

• Как использовать Chromebook в качестве второго монитора

• Как конвертировать изображения WEBP в JPG, GIF или PNG

• Как оцифровать DVD

• Как управлять дроном для начинающих

• Как добавить музыку в Google Slides

• Использование веб-интерфейса передачи

• Как удалить папку Windows.old в Windows 7/8/10

• Как собрать свой собственный ноутбук

• Как открыть заблокированный файл, когда его использует другая программа

• Как отключить ключ Windows

• Как обновить Raspberry Pi

• 7 советов по технической SEO-оптимизации для любого сайта