Crop and Resize Image

Crop and Resize Image

Crop and Resize Image

Crop Image

Last updated October 19, 2014

Purpose of Post – How to Crop Image

These instructions teach you how to crop an image into a defined size (dimension) using a free online graphics program (no download needed).

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 and cropping an image, to a specific width and height (as defined by the structure of your website), is the most efficient way to controlling the size of the images/graphics for the web.

However — if you just want to resize an image (no cropping needed) view https://www.webprem.com/resize-image/

Pixlr Graphics Software

In 2012 the intent was to find a free web based graphics software that was easy to use. Pixlr (https://pixlr.com) 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.

Online Store Product Image Note

An online store product image is usually required to be “square in shape”. (I advise my clients creating online store product images to create them to be 500px wide by 500px high.) Most images do not start out square in shape, so these instructions allow clients to create images that is both square in shape and are also optimized for the web.

These instructions teach you how to crop an image to obtain a particular (non square) size, but you can enter whatever width and height dimensions (below in “Step Four: (E) ) you choose.

Step One

(A) Go to https://piclr.com.

(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 Seven (M)” below.

https://pixlr.com 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) Click “Crop” icon located in the vertical “Tools” bar. (It may already be clicked by default).

(E) Select “Output size” in the “Constraint” drop down box. Enter the dimensions you want your image to be in the width and height boxes.

In this example the values entered were “Width” = 615 and “Height” = 340.

Click crop icon

Update crop dimensions


Step Five

(F) Now draw a box within the image and no matter what size it looks like you are creating it will crop what you are doing at the output size you specified in the “Constraint = Output size” fields above.
Draw crop box

(G) You can move the crop box around before doing the crop.
Move crop box around

Step Six

(H) Click “Crop” icon located in the vertical “Tools” bar again.

Doing this will bring up the “Confirm” popup box.

Click crop icon again
(I) Click “Yes” within the “Confirm” popup box to crop the image.
Click yes in confirm box

Step Seven

(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 file sizes
Original file size = 2332 KB (2.27 MB).
Cropped file size = 29 KB.

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

Resize Image

Resize Image

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 https://www.webprem.com/crop-resize-image/

Pixlr Graphics Software

In 2012 the intent was to find a free web based graphics software that was easy to use. Pixlr (https://pixlr.com) 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 https://piclr.com.

(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.

https://pixlr.com 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