Preparing Images for Web: Photoshop v GIMP


In this post, I’ll be explaining some of the differences between exporting files from Photoshop and GIMP for the web. Specifically, I will be explaining how to use the controls in the Save for Web dialogue box in Photoshop and how to save JPEG and PNG files in GIMP 


Photoshop:

SHRINK IT!

In the case that you are exporting an image that is very large, users will need to scale it down. When saving for web, our goal is to scale this way down to appropriate size and try to make the file size the smallest possible without losing the quality of the image.

So users should go to File, Export, then Save for Web (Legacy). And in the dialogue box, choose Fit in View so that you can see the entire file, and use then Two-Up View option to see the original image side by side with a preview of the exported file to compare the quality of the image.

Then we can move on to choosing a file format. In JPEG youll notice that any transparency within the file goes away because JPEG doesn’t support it. However when using JPEG you’ll notice that the file size could still be too large for web, users could try lowering the JPEG quality to apply more compression and lower the file size so I can go from high to medium or low. However, at low, the file could still be too large and the image could lose too much of its original quality.

A solution to this is to try a different file format. For example, PNG-24. This may improve the quality of the file, but size could still be a problem. Instead, another option to try is PNG-8 which should maintain the quality and the file size should be a lot better. A final option to downsize file sizes is to reduce the number of colours to only the colours necessary which will greatly reduce file sizes too.

Now if the file is a good size and quality users can now use the Save for Web dialogue box.


GIMP:

Creating images for the web is a common task that GIMP is used for. So, let’s take a look at the process of saving GIMP images in the most common image file format for the web, JPEG. JPEG is a file format best suited to photographic images. It allows you to compress the image data to achieve a small file size. Like photoshop, the smaller an image is, the faster it’ll load.

 But the good news is with GIMP, you can control the amount of compression that’s applied to your images and then preview the effects of that compression. Users should select File, Export As and in the dialog box then export it to the desktop. To tell GIMP to export to JPEG, users just need to either manually change the extension to JPG or JPEG. Or, you can go down and click, Select File Type (By Extension) and find JPEG in the list and GIMP sets the extension for you automatically. 

The users will get a dialog box where I get to choose the quality. Select Show Preview in the image window. With the slider, the higher the image quality, the higher the file size. If you drag the slider to a lower value, somewhere around 30, you’ll see the file size declines and so does the image quality. You can start to see signs of compression in the image. Typically, a value of around 70-80 will give you a good looking image and some reduction in file size. Then your image is ready for web.

Another format for web use is PNG files, which are typically used for graphics like logos, icons, buttons and screenshots, which don’t work as well in JPEG format. Like photoshop, the PNG format supports transparency, where JPEG does not. Like JPEG, users should select File, Export As, and in the dialogue box manually add the PNG extension up here, or choose PNG from the available file export formats. Unlike JPEGs, you can always use maximum compression with PNGs.


For our visual learners, this video gives a great to tutorial for users on Photoshop:


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

Create your website at WordPress.com
Get started
%d bloggers like this: