Optimizing images for your site

Estimated reading time: 4 min
Viewing: Home | Articles | Wordpress | Optimizing images for your site



Be sure when you crop images, to crop them at standard crop ratio, like 2:3 (Vertical) or 3:2 (Horizontal). Why crop them this way? Because it gives you a standard crop ratio, which is a 4 x 6. If you have mixed crops and sizes and upload the images into WordPress or ProPhoto the galleries are going to size oddly or not correct because of the mixed ratios. Ideally, it’s best to keep all images at the same size for verticals, and the same size for horizontals no matter what those sizes may be.

The only time the crop ratio should be ignored is when you’re trying to crop or resize an image that isn’t a standard ratio (like a really wide panoramic image).



Always save images at DPI (dots per inch) of 72, which is a web based quality, you can do this in any image editing program when saving, like Adobe Photoshop or Adobe Lightroom. If you don’t have a program like that, there are some web alternatives and of course other apps like Sketch which are just as good as Photoshop but cheaper on the price spectrum.

Saving images at 72dpi prevents someone from grabbing your image and being able to print the image at a good quality at a large size, but it also saves on disk space and website load time.

For web, we usually save our images at these sizes. For horizontals this size is pretty large, but not too large, this allows some upscaling and still retaining quality when someone is viewing the image on a larger screen and sees a sharper image on a smaller screen. For verticals, we sized them at a size that we think fits most screen types as well.

For Horizontals: 2000 x 1333 @72dpi

For Verticals: 600 x 900 @72dpi

Both of these use standard 3:2 and 2:3 ratios (4×6) crops before resizing.

You don’t have to follow our sizing suggestions at all, you can play around with any image size you like to get what you need, just be consistent so things work more smoothly on your site.




Resizing in Photoshop CC


In Photoshop, you would change the resolution FIRST, then the width, then the height. You do this so that it doesn’t miscalculate how the image should be auto sized when adding the dimensions.

When saving in Photoshop we always save at usually 6 quality, but you can go a little higher if you need to, just keep in mind this makes the file size larger. After we save the image, we drag and drop the image into JPEGMINI Pro to reduce the file size. In this example below, our image was 245K when we saved it from Photoshop, but only 125K after dropping it into JPEGMINI.




Resizing in Lightroom Classic


With Adobe Lightroom Classic, we usually set the quality at 60 with the dimensions and resolution we mentioned above and save as a jpeg. **We don’t turn on file size limiting. After saving the image, we do the same thing and run it through JPEGMINI Pro.




Resizing in Lightroom CC (2018)


With Adobe Lightroom CC (2018) the save dialog is a little different, but you can get nearly the same result. While this one doesn’t have settings to change the DPI or the quality,  you can resize your image down if needed, which we reccommend if you plan on saving for web.

When saving, make sure that you select “custom” for the size setting so that you can enable the downsizing. Here, you can follow our recommendations above or simply enter in your own. Afterwards we do the same thing we always do when saving for web by running it through JPEGMINI Pro.




Resizing in JPEGMINI Pro

If you don’t have either of the options above, you can always resize images quickly in JPEGMINI Pro. It’s especially easy if you’re already going to use it to compress your images safely and easily.

To do that, open up JPEGMINI Pro, and click the options icon in the left hand corner.



From there, click “export to folder”, set your folder, then change the max width to the width that you need, and you can press the + icon to add another size setting, for that one, you’ll want max height.



Be sure to click “apply” when you’re done.

If the screen doesn’t change after clicking apply, just simply click anywhere outside the options window and it will go away.

Now, with the new settings applied, simply drag and drop your images into JPEGMINI Pro and your images will resize and export to the folder you set.


Optimizing JPEGS for web


After saving our images, we’ll do an even further optimization by bringing them into JPEGMINI Pro which you can do individual images on their site for free, but we purchased the standalone mac edition. It allows you to simply drag hundreds of images into an app and optimize the images at no risk of degradation or quality. This program can really save you a lot of issues of spacing on your host and website speed.




Optimizing .PNGS for web



If you’re using .PNG images for say icons or graphics, like we do sometimes there’s also a solution on the web. We use COMPRESSPNG or TINYPNG which have both worked, again optimization on images is always best to save space and speed. These two sites are also free of charge.

Don’t save your gallery images or your regular photos as a .PNG, the file sizes are incredibly large and should never be used in this way. You should only be using the .png format for small graphics like icons or buttons.


Was this article helpful?
Dislike 0 0 of 0 found this article helpful.

Can’t find what you’re looking for?