Optimizing images for your site

Last modified: October 23, 2018



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



We typically save our images at 72 DPI (dots per inch), which is a web standard quality. Saving images at 72dpi prevents someone from using your image and being able to print the image at a good quality at a large size. It doesn’t effect file size or load times if you keep your image at 300dpi. Changing the DPI should only be done if you care about people being able to print your images by grabbing them off your website.

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

For Verticals: 600 x 900

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.



The most important thing is having small file sizes. If you have uploaded images to any website (ProPhoto, Showit, or not) that is megabytes (mb) in size, then your site is going to run slow. Always. File sizes should be anywhere from 200kb – 500kb at the most. This is why we use some of the methods below to further optimize images even after we’ve saved them for web.




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.



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.



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

Can’t find what you’re looking for?