Connect with us

How To Properly Optimize Images for Web… In Photoshop


How To Properly Optimize Images for Web… In Photoshop

Before you upload your next product photo, logo, or banner image to your store, think about the quality and file size of the image. You dont want to make the mistake of uploading a ginormous file size.

Your customers won’t wait around for that picture to load and leave your site.

On the other hand, you dont want to upload a poor pixelated and blurry image.  Your website will look unprofessional. The secret is… you will need to properly save all your images for web, before uploading.

Listen, no one likes to wait… unless you’re in line for Twilight, and in a place where speed matters, quick loading images is important and a quick loading website keeps visitors engaged.

In order to do so,  a good balance between image quality and image file size will be needed when you save an image to web.

Cool, let’s do this!

Slow… your… roll. You think you can just download an image from a digital camera and save the image to web just like that?

You actually can but with all the different types of digital cameras out in the market with each having its own different settings, you’re going to need to check the image size first.

You must open the image in Photoshop and view it at a 100%. This allows you to view the image at the exact size it will be displayed on a computer monitor when you save the image for web.

You will most likely need to edit the size of the image and Photoshop makes it happen in a few simple clicks.

Do remember, enlarging smaller images will lose quality and we highly encourage avoiding this situation when you save an image for web.

Now move forward and save the image for web in one of the image formats.

Formats?! There’s more than one? Yup! There are three different types of formats (JPG, GIF, PNG) to save an image for web.

There are also two separate categories of image compression (Lossy, Lossless) which are all different in important properties and we will show you how to use them best when you save an image for web.

A Lossy compression will lose quality while using a small amount of memory making it great for web performance.

A Lossless compression will give you the exact quality as the original image using a greater amount of memory where web performance is affected. It is important to consider the quality and size of an image for web performance when you save an image for web… but don’t fret, we’re here to take your image to the right party!

JPEG Format

If a JPEG went to high school, it would be voted “Most Popular”. JPEG is named after a group of nerds who created it, “Joint Photographic Experts Group”, and is the most common format used to save an images to web.

This format is a Lossy compression and is perfect for images with lots of colors and gradients such as photographs or detailed illustrations. You are able to control the compression level in the image editor in Photoshop.

GIF Format

A GIF format is like a cheese and cracker party… boring. It limits you from having lots of fun. GIF, or Graphics Interchange Format, is an image format that is used for less detailed images and illustrations.

This format is a Lossless compression giving it a limited palette of  256 colors which should almost never be used for photographs but its the perfect party for an image with solid colors or limited number of colors. GIF also allows you to save with a transparent background. Think simple when you choose GIF to save an image for web.

PNG Format

A PNG, or Portable Network Graphics, is similar to a GIF using a Lossless compression but can support a much greater number of colors when you save an image for web.

PNG images are replacing more GIF images these days and since GIF is patented it is not free. PNG was created to be a  new and improved GIF.

You can now save your logo, product photos and other images correctly for the web.

Before uploading your next image to your MadeFreshly store, follow these steps.  Your website visitors will thank you.

Sign up for my newsletter and get the YouTube Caption Scraper WordPress plugin for free
(worth 29$)!

Continue Reading
Click to comment

Leave a Reply

Your email address will not be published. Required fields are marked *

More in blogging

About Me:

Szabi Kisded

Hey there, I'm Szabi. At 30 years old, I quit my IT job and started my own business and became a full time WordPress plugin developer, blogger and stay-at-home dad. Here I'm documenting my journey earning an online (semi)passive income. Read more

Sign up for my newsletter and get the YouTube Caption Scraper WordPress plugin for free
(worth 29$)!

All My Plugins In A Bundle:

My AutoBlogging Plugins:

My Online Courses:

A Theme I Recommend:

Featured Posts:

To Top