Crop and Resize 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.
(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.
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.)
(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.
Doing this will bring up the “Confirm” popup box.
(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.
File Size Comparison
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.