Resize Image

Resize Image for Optimization

Last updated October 19, 2014

Purpose of Post – How to Resize an Image

These instructions teach you to easily resize your images using a free online graphics program (no download needed). The resulting image created will be optimized for the web.

You never know what type of connection your potential customer may be using to view your website. One key way of making your website load, as quickly as possible, is for the images on the website to be optimized. When someone takes a photo (with a camera or smart device) the picture will be large (in terms of resolutions and size). Resizing an image is the most efficient way to controlling the size of the images/graphics for the web.

Often you will want (or need) to select only a portion of an image. For those instructions view

Pixlr Graphics Software

In 2012 the intent was to find a free web based graphics software that was easy to use. Pixlr ( was that software. Pixlr graphical software has become even more robust and amazing. (I am not an affiliate, this is my real opinion.) Pixlr now offers multiple ways to use their software. You can still use it as a web based tool, from your computer or mobile device. You NOW have the option of downloading the software directly to your laptop / desktop. There are great tutorials and blogs found on the Pixlr website.

IMPORTANT – Never Make Small Larger

Never take a small image and make it larger, because doing so will make the resulting image blurry. So, for example, do not take an image with dimensions of “150 x 150” and try to make it “400 x 400” unless you like blurry image results.

Step One

(A) Go to

(B) On the PIXLR home page find the image shown on the right.

Click on this “PIXLR EDITOR” image. (This option allows you to optimize the image when you are saving it in “Step Five (M)” below. home page

Step Two

(C) The action in Step One which will bring you to what is displayed on the right. In these instructions we will use the “Open image from computer” option.
Upload image into graphics software

Step Three

I opened (uploaded) an image and if I look at the bottom left hand corner I see the image dimensions are width = 3000px (first number) and height = 2250px (second number). (Click Here to View Larger Image.)
View image in Pixlr


Step Four

(D) Now from the horizontal toolbar located across the top select “Image”.

(E) And then select “Image Size”, which will give you a pop-up box that looks like the second image in this section.

Select Image from toolbar

(F) Displays the image dimensions, which is this case are width = 3000px and height = 2250px.

(G) It is normally very important to ensure the “Constrain proportions” box is clicked before proceeding.

Image Size Popup

(H) In this case I entered 800 in place of where it used to say 3000, and automatically the 2250 was changed to 600.

(I) Now click the ok button to modify the image to these dimensions.

Resize image

Step Five

(J) Now from the horizontal toolbar located across the top select “File”.

(K) Then select “Save”, which will give you a pop-up box that looks like the second image in this section.

(L) Change name in this field to be something other than the original image name so that your original image will not over-written.

Please, please make sure the image name is lowercase only, with no spaces in the image name, but you can use underscores (_) or dashes (-). (This request pertains to images created for use in websites.)

(M) Make quality between 30 and 50. The smaller the number, the smaller the size (and possible quality) of the image.

(N) Click “Save” to save this modified image. You will be prompted to save this modified image someplace on your computer.

Select save from toolbar

Save image on computer

File Size Comparison

Compare image sizesOriginal file size = 2332 KB (2.27 MB).
Resized file size = 57 KB.

That is quite a difference!

Photoshop Image Optimization

Here at Webprem we tend to use Adobe Photoshop to create and edit images. The resulting image is usually optimized to a resolution of 72, and a quality of 30. See image below for an example of the Photoshop settings we tend to use.
Optimizing Images Using Photoshop