Working with a graphics editor Adobe Photoshop for 5 years now, I was surprised to learn that not everyone knows about the importance and necessity of saving images correctly. Turning to the Internet, I really couldn't find up-to-date and correct information on this topic. For this reason, I figured out the issue and want to tell you how to save images correctly.

Who needs to know this and why?

Anyone who works with a graphics editor, not necessarily Adobe Photoshop. Illustrator, artist, graphic designer, web designer, interface designer, photographer, student, schoolchild - by learning how to properly save images, reducing the file size, you save not only your own, but also other people’s time.

What time are we talking about?

First, let's make one thing clear:

Using the Internet, you waste time - a lot of time

Loading pages on the Internet is not instantaneous and takes time, but over many years of being on the Internet you have become accustomed to not noticing this. Let's say average page loading speed 3 seconds, where 2 of them are for loading images. Illustrations, interface elements, photographs, advertising banners, PDF presentations or even a picture of a cute cat, depending on the file size, will take time for the browser to display the image on the screen.

Don't be fooled by "megabytes per second"

Most likely, your Internet provider promises you 100 Mbit/s- this is a brilliant advertising move (read as: deception) that has given rise to many misconceptions, including the topic of site loading speed. I measured the connection speed with a server located in Moscow, the result:

But the page loading speed from the site is much lower:

How many images do you view per day?

Dozens? Hundreds? As an active Internet user, I view several hundred images a day, most of them high resolution. If you reduce the weight of these images and accordingly increase the loading speed, at least by 1 second, multiplying by 500 images per day, then we get about 8 minutes a day and 4 hours per month.

I wait 4 hours a month for a picture to load

Everything you need to know about saving images

With rare exceptions, there is no need to save the final result using the same method as PSD, in this case, additional and unnecessary information from the date of creation and name graphic editor to the weather and camera model.

A bad habit is to set quality to value. 100 , but in comparison with 80 varies visible quality practically equal to zero, but the difference in weight palpable.

To post an image on a website, send it by mail, save it in the cloud, send it in a messenger, etc., you must use Save for Web.

JPEG or PNG?

JPEG - for images with a lot of colors and complex shapes: illustrations, paintings, photographs.

PNG - for vector images or images containing text, simple geometric shapes, transparency and a small number of colors: logos, screenshots, stickers, icons.

Which Quality should I choose?

For most images the optimal value would be 80 , for some simple images where a clear transition between colors is not important. you can set the value 60 .

Optimized

The function includes an additional color conversion algorithm, it is recommended always turn on, except when the smallest details are important (for example Pixel Art).

Convert to sRGB

Converts the colors of the image to the corresponding sRGB table.

sRGB is the Internet standard

Resolution(Image Size)

The most common screen resolution is: 1366×768- for computer and 720×1280- for smartphone. Keep this in mind and do not save images larger than 1920 in width.

Metadata

Extra information that I already mentioned. There is no need to provide additional image information, which will only increase the size of the file.

When was the last time you looked at the detailed information of a downloaded image?

Using this method, I managed to reduce the weight of the image by half.

Of course, there are rare exceptions when you may find it useful detailed information or increased detail, but in most cases these rules will be appropriate and will save hundreds of hours.

Thank you, Vladislav.

Hello, dear readers of the Start-Luck blog! Andrey Zenkov and mine are in touch practical advice in web design. Today we’ll talk about those very keys without which your website will never open the door to the world of browser bookmarks (and it’s so important for the user to star their favorite pages).

We will talk, as you might have guessed, about images. Selecting a bright photo is only half the battle. After its processing, colorization, text overlay and other manipulations, a new problem: how to save an image in Photoshop?

Let's say you've created a website about pets and are eager to add an extensive photo gallery. Bang - and you can no longer imagine design without charming menu icons in the form of paw prints. What about a section with funny animations that will cheer up site guests?

With enthusiasm, you adjust all the images to fit, save and... see that your efforts are in vain. Pixels completely kill the painstakingly created “paws”, and you can’t look at pictures in motion without tears. Photoshop is automatically moved to the list of programs for removal, and you promise yourself to find a real craftsman. For what? You can do everything yourself by learning the main secret that I always use.

The algorithm for saving images in optimal quality depends on their format. I don’t want to go into details, talking about which ones are raster and which are vector. Moreover, you can change them in a couple of clicks. I already wrote about this in one of my articles, sharing with readers how to change image formats.

Analyzing the sites that the Internet is rich in, I noticed one interesting detail: all graphic elements are presented in only a few universal formats, while the existence of others is completely forgotten. What are they?

Basic groups of images in web design

Graphic content on websites is divided into three categories.

Collages and photographs

They are characterized by the JPG format - by the way, the most common on the web. These images are small in size, which allows you to use them in website design without fear of slow page loading. For example, the same landscape saved in JPG and PNG differs significantly in weight:

Icons, buttons and banners

For these design elements, PNG is preferred. It allows you to cut out an object and save the image without a background, using the site’s “background” instead. I would also recommend this format for images that do not have a huge palette. For example, we create a document in Photoshop and - the name of the site:

We save the image in two formats and compare the result:

Animation

GIF is intended for creating animated images consisting of two or more layers. This can be done not only using Photoshop, but also. I would call this format the most capricious, since when saving in it it is difficult to achieve good quality. Luckily, I have a life hack that will give you animations with minimal pixelation. Intrigued? Read on!

Step-by-step instructions for saving images

Let's start with JPG: with it it is very easy to get a photo without losing quality. To do this, click “File” - “Save As”. If you wish, you can use the key combination Shift+Ctrl+S:

In the window that appears, look for the “File type” drop-down list and select the JPEG line. Usually it is the default:

In the same drop-down list, you can also select the PNG line, thereby simplifying your task. However, I recommend saving images from transparent background differently.

Examine the window that opens. Your task is to make sure that PNG-24 is selected in the drop-down list, and that the “Transparency” and “Interlaced” lines are checked:

Please note: the last checkbox reduces the loading time of the image on the site, but at the same time increases its weight. If this doesn't bother you, click "Save". In the window that pops up, select the file path and press the coveted button again to get PNG image and post it on the website as soon as possible!

The animation is saved through the same menu item, but now you need to select the GIF option in the drop-down list. A huge number of parameters and unclear words can cause confusion or even fear. Not worth it! Just set the parameters that I use:

Let's sum it up

Working with graphics requires constant improvement of skills, without focusing on one or two areas. What should I do? At one time it became a real find for me set of five mini-courses from the project "Photoshop Master". From them I gleaned more than one byte of useful information.

The material is presented in an accessible form and free of charge. This is an excellent alternative to studying in computer academies and spending many hours searching for the necessary lessons on the Internet.

That's all. Don't forget to subscribe to VKontakte group and blog updates for a weekly dose of fresh and useful articles.

Andrey Zenkov was with you. See you again!

Instructions

A beginner should not delve too deeply into the theory, but you should definitely know that JPEG is a format with a compression algorithm. A file of this format can have different extensions, for example? .jpeg, .jfif, .jpg, .JPG, or .JPE. It is very convenient because it takes up much less space than a similar image in TIFF format or BMP. Unlike the latter, it has less information about the image. This may not be too noticeable when viewing the original file on a monitor, but when the photo is printed in a lab or processed, the result may be of lower quality than formats with complete information.

The way you save JPEGs depends greatly on your needs. Before saving the picture, decide whether you will process it, print it on photo paper, or whether you just need to post the picture on a page on the Internet.

For subsequent processing or printing in the darkroom, save the image at its maximum quality and size. When saving the image you are looking for, open the File menu and select Save as. Select the directory where the file will be saved. Enter the name in the first line, and select the JPEG format in the second line and click the Save button. If you have manipulated the file, a dialog box will pop up in front of you to select the quality of the saved image. You should select the maximum quality using the slider or the corresponding number 12. Confirm your choice by clicking Ok. If you have not manipulated the image, then after saving it, the dialog box for selecting JPEG quality will not open.

When saving a photo for publication on the Internet, modern resources themselves can change the size and quality of the downloaded JPEG. However, in some cases you have to do this yourself. Before saving the picture, change its size by going to the Image menu and selecting Image size. Make sure the Constrain Proportions box is checked. Select a unit of measurement that is convenient for you: centimeters, pixels, inches or millimeters, enter the required value of one of the sides in numbers and click Ok (in most cases, images from 800 to 1500 pixels on the larger side are used for web pages). Save the result, but select a lower quality. With its values ​​from 8 to 10 and a small image size, visual differences from the original size are minimal, but the file size is significantly reduced.

Adobe Photoshop also has a special module for optimizing and saving images for web pages, which may be more convenient. From the File menu, select Save for Web. In the dialog box that opens, you will be presented with a window for viewing the saved image and several settings options. Select the 4-up or 2-up tab. The program will present you with four or two possible options for the optimized image. To save the appropriate one, just click on the picture and click Save. If you are not completely satisfied with the options, then first use the tools located to the right of the image.

Video on the topic

The Russian language is rich, but it is not always possible to convey a complete description of an object or event. And it’s not for nothing that they say that it is better to see once than to hear (read) a hundred times. It's easier to supplement your forum post with an image instead of describing it with words. You can leave pictures in your posts different ways.

Instructions

Different resources have different forms. If you have a form that allows you to add images, use it. Find the “Attach file” field and click on the “Browse” button. In the dialog box that opens, specify the directory in which the image is saved on your computer. Having selected the file with the image with the left mouse button, click on the “Open” button and wait for the file to download. Next, format your message as usual. On English-language sites, use the Additional Options field and the Attach button.

If your message form doesn't have an option to attach an image, use third-party resources. Upload the desired image to a photo hosting site and place a link to it in your post. Without closing the window or tab with the message, open the photo hosting site in a separate tab or window. Click on the “Browse” button in the “Select an image file on your computer” field, specify the path to the file. Next, click on the “Download” button and wait until the download completes.

In this lesson we will look at File formats for saving files in Photoshop, as well as how they differ from each other.

To everyone who deals with computer graphics It is very important to have a good understanding of the file formats in which graphic information is stored.

Document Format in Photoshop is displayed as follows. Let's look at the picture to the right. " Unnamed-2" is the title of the document. After the dot comes document extension, in this case jpg.

Never rush to save your work in Photoshop.

There are currently more than 20 formats graphic files , For example, jpg, gif, png, bmp, tif…
The size of the file largely depends on the selected format. Thus, creating any image using a graphic editor Photoshop, we have to save it as a file. The main task when saving is to find a middle ground between image quality and the size of the containing file. Although even a photo of poor quality can be improved (see the link for an example)

Let's look at the most common graphic formats for saving files in Photoshop

For example, our work contains a number of layers and today there is simply no time to finish this document, i.e. we need to postpone the work until tomorrow and save an intermediate version of our work. So that tomorrow we don’t have to start creating a document all over again, but start from the place where we stopped today.

Saving a document in Photoshop in psd format

We go to the tab FILE and choose SAVE AS. In the window that opens, enter a name and select a format psd and press SAVE.

Besides, PSD is the native format of the Photoshop graphics editor. If we save our document with this extension, then we can open it in any, even the earliest version of Photoshop.

If we have already finished in Photoshop work with a document, it is better to save it in another, more common format that will be accessible to many applications, for example, in the format jpg .

Saving a document in Photoshop in jpg format

Format JPG Designed for compact storage of multi-color, photographic-quality images. A loss graphic information when preserved, it is not very significant. Format jpg V Photoshop It is best to apply it after the final result of image processing.

Saving a document in Photoshop as a gif

Format GIF intended for preservation raster images V Photoshop with the number of colors no more than 256. Let's say this is a screenshot - a screenshot of a tab FILE. The document name is underlined in red in the figure, the extension is in green.

In this screenshot (drawing) there are few colors, clear boundaries and no gradient. GIF format For of this image fits perfectly, it allows you to maintain the transparency of the pixels. Also GIF format supports animation.

IN GIF format It is good to save contrasting images without smooth transitions or noise, for example, logos, banners, diagrams, drawings, etc.

GIF format often used in web design.

Saving a document in Photoshop in png format

PNG format similar GIF format. The only slight difference is that png capable of displaying large quantity colors. Allows you to save images with a color depth of 24 and even 48 bits.

PNG format It is advisable to use it in web design to save small multi-color images with small details, for example, iridescent buttons with pictures. The size of such a file will be larger than in gif or jpg.

We go to the tab FILE V Photoshop. There are several commands for saving an image to a file.

If we need to specify a different file format, change its name and location, then it is better to use FILE-SAVE AS, i.e. Here we set the name, format, and indicate the location for saving.

If in the future our file ends up on the Internet, then it is better to use FILE-SAVE for Web devices.

By opening this command, a dialog box appears where we see our image. Displayed in the lower left corner size of this image(in the figure, the image size is shown in the blue square).

What can we do with our image?! How can we change its parameters?!

To the right of our image we can set format, in which we will save it. At the same time, when choosing one or another format, we can observe all the changes in our image on the screen.

We can also set the image quality when saving in one or another format.

Depending on the choice of quality and format, the image size will change. Keep in mind that if you set the image quality to “medium”, the image quality will not change much, but the image size will be smaller. Therefore, it seems to me this option very important when saving an image.

By selecting best option save the image, click SAVE and select a folder to save.

I welcome you again to the expanses of my blog, dear readers and visitors. Today we will learn how to save a picture in Photoshop for different situations. We will learn how to save images with a transparent background, without losing quality, animation and much more. Many are probably already thinking: “What the hell? When will we start doing normal Photoshop, and not all sorts of little things.” I'll answer you. Don't rush ahead of the locomotive. Learn the theory and basics first, and only then the most interesting part will come. Go in order and everything will be cool. Moreover, there are some nuances here, from the format of the picture to the size.

Normal saving

To save your document or, more precisely, pictures, you need to go to Top Menu and click where? That's right, you need to click on "File". And in the menu that opens, select “Save As”. There are several basic formats in which it is recommended to save. We looked at them in more detail. I’ll briefly tell you which formats are best for saving images for what purposes.

And, by the way, when you save the picture in JPG format, a window will pop up asking you to select the quality. I usually give it an 8 for regular photos. In principle, the quality above is not particularly distinguishable. The type of format doesn’t play a special role, at least you won’t notice anything. You can install the basic optimized one, then the final image will take up a little less space.

If the image involves working with a more precise drawing, where some important details are shown, then set it to the full 12, since this determines how the quality will change when the picture is enlarged. If this is an ordinary picture, where accuracy and quality do not play a special role, then you should not put more than 8.

What formats are best to save images in?

Let's briefly look at the most popular formats pictures that are used for different purposes.

• If your project is not finished yet, then save it in the format PSD. All your progress, transparency, all layers, and so on will be preserved. And by the way, if the project is not just some one-day project, but something larger, then it is better to always keep a copy in PSD. I always keep picture templates that I insert into the announcement of the article, since the topic is the same. The picture inside and the title just change.
• If you have finished your project and want to save your final result (for example, you processed a photo or made a collage), then save it in JPG (JPEG). Best for photography. In the vast majority of cases, we will save there.
• If you have done animation (for example, animated banners), then only GIF, since only it can consist of several images simultaneously. But despite the huge plus, this extension also has a big minus. The fact is that it is not capable of saving pictures with more than 256 colors. And this, as you probably already guessed, is very small, considering that a regular JPG photo can contain more than 16 million colors. Can you smell the difference? But for low-color animated banners, this will be what you need.
• If your image has a transparent background, i.e. in the picture there is only a certain object without a white background (or), then your format PNG. The fact is that if you save any picture with a transparent background in Photoshop with the JPG extension, it will simply be filled with white. And when you subsequently insert the image into the editor, there will no longer be any transparency.
• If you want to save a picture in Photoshop without losing quality, then it is best to do it in the format TIFF. This is where everything is stored color palette and pixels. This format They are used for printing when printing raster images just because the quality is not poor. The only downside is that it takes up an indecent amount of space on your hard drive.
• And of course, it was impossible not to mention that Photoshop is capable of creating graphics in the format PDF, which will allow you to open it not as an image, but as a document.

I would also like to note that GIF, like PNG, supports background transparency, but unlike the latter, it does not support translucency. Either everything or nothing.

Of course, you can see many other extensions here, but trust me, they are not worth your attention.

Saving for Web

In addition to the usual file export, you can save the image for posting on the Internet. With this method, it will be more optimized for the Internet, which will speed up its opening and generally be more convenient. So if you want to insert pictures onto the site, it is better to first save them for the Internet.

And if you want to save a picture in Photoshop with a transparent background for the Web, then select the PNG-24 format. Be sure to make sure that the Transparency option is checked, otherwise your image will have a white background that will replace all the emptiness. As you already know, the PNG extension can work without a background.

It doesn’t take much effort to save the animation either. Just select the GIF saving format and, if necessary, set it to full color, i.e. all 256 colors if you think you need it. You don’t need to touch the rest of the settings; leave everything without dezering so as not to take up extra space.

Before saving, you can see for yourself how it was and what happened for comparison. This is a very convenient thing, because you can play with the sliders and settings and see for yourself in real time how much the photo quality will change, and which settings are the most optimal. Select the 2 options tab and then you will see the original and optimized image at the same time.

Try to do all the manipulations from start to finish yourself. It's very simple. Also, do this for each of your appointments.

Well, if you want to study Photoshop in more detail, I can offer you wonderful video course, thanks to which you will learn Photoshop in a couple of weeks. Believe me, it is not difficult at all if you devote 1-2 hours a day to the program. All lessons are in video format and are designed for beginners, so you won’t be uncomfortable and you’ll understand everything the first time. Believe me, this is a really worthwhile course!

Well, this concludes our lesson today. I am very glad if this article was useful to you. By the way, if you want to receive updates on my blog, be sure to subscribe, and then you will be aware of the latest news, competitions and simply useful lessons for you. Good luck and see you in the next articles. Bye bye.

Best regards, Dmitry Kostin