pThumb: What size & quality of image should I begin with?

What's a good rule of thumb for original image size and quality.

Currently, I am setting my big photos to around 2000px, and then web optimizing them to keep them around 400kb to 600kb. Certainly, images with less detail compress smaller.

I only ask because I saw that the default q setting for Resizer is 75. So, it doesn't make sense for me to save for web out of photoshop with a setting of 30 or 40, only to have resizer increase the quality.

For images that I am using pThumb and picturefill on, should I just save a normal jpeg, or at a minimum, use high (80) export setting out of photoshop, and then control quality through my pThumb settings?

Any feedback greatly appreciated.
[ed. note: mmcgee last edited this post 9 years, 1 month ago.]

Resizer decreases image quality of your original image (unless q=95, which if memory serves is the highest quality output setting). pThumb does not increase image quality from the original. When using Resizer's default settings, you render an image to 75% quality of the original image that is output from PS.

Because pThumb creates a new image, starting image dimensions are not impactful unless you increase image dimensions too much from said starting point. More important is resolution; for web output from PS a resolution of 72 is fine, again if you're not expanding images by much. I'd say the same is roughly true for reduction of image dimensions -- anything too great and you're going to see an impact on image quality. In this case, you'd be best off creating sized sets of images in PS and calling the variants depending upon the usage.

You can definitely mess with an image's quality with the q setting -- just play with it until you feel it's right.

FWIW, my approach (which is photography-centric) is to output at a higher quality from PS and tinker with pThumb q values to control page speed, rather than quality. Basically, I push things as far as I can to retain quality, and probably concede a little on performance to do so. My starting point is a factor of the max page width of the site template.

What throws all of this into the trash is retina display, which is where Resizer's scale option comes in. Per the documentation:

"Convenient when creating retina images. Any dimensions given will be multiplied by this number internally. If aoe is off—the default—and the input image doesn’t have sufficient resolution, scale will be adjusted downward so you get as much output resolution as possible without scaling the image up."

Very helpful. I like your way of approaching it. Puts my anxious mind at ease.

FWIW, my approach (which is photography-centric) is to output at a higher quality from PS and tinker with pThumb q values to control page speed, rather than quality. Basically, I push things as far as I can to retain quality, and probably concede a little on performance to do so. My starting point is a factor of the max page width of the site template.

Thanks for your insight.