All unnecessary metadata is stripped too. By reducing the number of colors, 24-bit PNG files can be converted to much smaller 8-bit indexed color images. Finally we will close this project without saving changes.File size 57 KB vs Shrunk transparent PNGĮxcellent question! When you upload a PNG (Portable Network Graphics) file, similar colors in your image are combined. In this way we will save a JPEG version of the original file in the desired folder. įinally, in the Save Optimized As dialog box, we will use the original name and click on Save.
OPTIMIZE IMAGES FOR WEB PHOTOSHOP DOWNLOAD
In the Optimized Panel (to the right of the dialog) make sure that the Progressive option is activated (this will cause the image to download in several passes, each of which increases the image quality) and click Ok. Although this option provides a smaller file size than the original image, the image quality is not as good as the JPEG Medium version, which will also have a smaller file size.įinally we will click on the JPEG version, that is, the one we have in the lower left. We will choose PNG-8 128 with hatching from the drop down menu once again. The image quality is now acceptable, while the file size is considerably smaller than the JPEG High version or the GIF version.įinally we will select the lower right panel. We will choose JPEG Media from the Preset drop-down menu again.
This greatly improves image quality, but also causes a significant increase in file size.įinally, the best option will be the middle ground. We will choose JPEG High from the settings drop-down menu again. We will try to increase the quality of the image without obtaining an unacceptable file size. The image will appear quite pixelated and its quality is unacceptable, especially in the text area it is very noticeable. We will choose the Low JPEG version in the presets menu. We will click on the lower left version of the image to select it. Then we will continue to see the JPEG and PNG settings in the following panels. Notice how immediately in the version of the image that we have selected (in this case the upper right) there have been changes making the darker areas more visible. We will drag to change the position of the image so that we find the most suitable area of the image, the one where we find the greatest amount of nuances and contrasts.įrom the Preset drop-down menu in the Optimized panel, we'll choose GIF 128 with Dither.
The cursor will take the shape of a hand, which indicates that we can drag it to move the image. We will place the mouse cursor over the upper right version of the image (which is the active version as indicated by the darkest border). Using the Zoom level drop-down menu at the bottom left of the dialog box, we will change the magnification to 200% or more so that we can analyze our photograph well and appreciate the details of the image. Optimization mappings can then be adjusted for each version of the image to select the best combination of mappings.
We will do that, we will apply different formats and we will observe which of them best suits our pretensions. Using the 4-fold views, multiple versions of an image can be displayed in the same image window. By looking at the four different settings in the file, we can get a good idea of which setting will be best suited for our purposes. We'll click the tab labeled “four copies” at the top of the Save for Web dialog. To save this photograph with suitable characteristics for working on the web, we will have to go to the File menu> Save for Web… (we can also access this option through Alt + Shift + Ctrl + S). To begin we will start our application and import the photograph with which we are going to work, in this case a medium image and in JPEG format. It is interesting that you take into account these basic options, you already know that we must try to take care of all the details that are at our fingertips. In this way we will try to find the cheapest option taking into account aspects such as quality (cutting and pixelation) and on the other hand the size of the file, you already know that when we are going to upload photographs or files to our website they should weigh as little as possible so that the operation of our website is a lot more agile. In this case, we will see in the following tutorial the settings that Adobe Photoshop offers us to save our images in such a way that they have an optimal treatment to be reproduced on web pages and the Internet. For this reason, it is necessary that we pay special attention to these types of aspects, otherwise we could reduce the quality of our compositions indirectly and without knowing it. Each medium has different deficiencies, characteristics or needs. It is not the same to configure a photograph that will be printed, be displayed on a digital projector or appear on a web page. Depending on the purpose of our photographs will require one treatment or another.
0 kommentar(er)
