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.
(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.
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) And then select “Image Size”, which will give you a pop-up box that looks like the second image in this section.
(G) It is normally very important to ensure the “Constrain proportions” box is clicked before proceeding.
(I) Now click the ok button to modify the image to these dimensions.
(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).
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.