What stock photo width x height + dpi to choose? Before resizing for SEO

Classic General
1

Can some one please give tutorial how choose an image size, width x height + dpi, where to work image size down to under 200kb?

I found this blog post by @jochenabitz from another forum post, but would like bit more info how to choose starting image. Blog post suggested that hero banner to be 1500px wide

On another forum post stated, by @zeebe, that images does not need to be over 72 dpi for web.

A typical iStock options for image are:
S 920 x 383 px 72dpi
M 1589 x 662px 300dpi
L 2689 x 1120px 300dpi
XL 6000 x 2500px 300dpi

Does size S get ‘grainy’ for banner or hero banner image even dpi is enough? Yet it would be good for stacks like image and AB switch, side bar, referance pics?

Would size M be ‘jack of all trade’ suitable for banners and blog writing images on page?

When would you use size L or XL? S or M?

How about when dealig with retina compability? Needles to say that aim is to have fully responsive site.

I think I try to ask is that, does image diameters needs to be as close as possible the content widht px and banner height px in RW’s inspector for best possible results?

How about video clips? Always lower one to work from?
Web 640 x 360 @ 30 fps H.264
HD 1920 x 1080 @ 30p Photo-JPEG
(typical iStock options for video)

2

Hi, Tapio,

Image size is quite often a compromise between image quality and image “weight”. It depends on which one is more important to you.

First, you should consider image dimensions. To avoid any surprises, you should save your image with exact dimensions that you want to be displayed on screen (unless it is a banner, in which case, Jochen’s advice is probably right).

A typical iStock options for image are:
S 920 x 383 px 72dpi
M 1589 x 662px 300dpi
L 2689 x 1120px 300dpi
XL 6000 x 2500px 300dpi

Forget those standards. As @zeebe stated, for Internet use, resolution should always be 72 ppi, because computer screens do not have a practical capability to render images with higher resolution than that. For “retina-style” screens, you need to double dimensions, not resolution.

There’s a lot of apps (free and paid) you can use for editing images. If you care about image quality, don’t bother trying to keep the size below 200kB. I am a photographer, so image quality is important to me. Typically, I use images of 1024px and up to 900kB (and resolution, of course, 72ppi).

As far as video goes, I think that the best practice is to choose high quality video and upload it to Vimeo or YouTube, because those sites use very efficient conversion algorithms. Then, download the same video from their site, in mp4 format, and use that in your website. You can then delete the video from Vimeo or YouTube, if you want.

You should consider “warehousing” your images and video, for less complicated publishing and lighter “weight” of your RW project file.

I’m sure others will give you more tips…

3 Likes
3

I can’t add much beyond what @Rovertek has already stated. For the web photos are always a compromise. However, Most folks are not trying to show photos at their highest quality. If you have a true photo gallery then a bunch of other considerations come into play.

I personally decided to make my images for the web no larger than 1400 px wide. Something like 920 pixels wide will tend to be too small for banners and bigger hero images. On a bigger, or retina, screen people will most likely noticed the degradation in quality.

I also use PhotoJob 2 (app store) to bulk resize my images down (never up) to 1400 pixels wide. They almost always come in at under 300 kB, typically around 200. But PhotoJob 2 is not the only app that will bulk resize images: there are many other good choices.

1 Like
4

I would agree with what Rob (@Rovertek) outlined in his post above. One other thing to keep in mind is there is no one size fits all approach to sizing and optimizing images.
Other than Jumbotron (full width) banners, most images are going to be constrained by the container they’re placed in. Even the latest frameworks like bootstrap 4 and foundation 6 have maximum widths for columns and containers (bootstrap 4 is 1200px for standard containers). So any image larger then the maximum width will be resized by the browser.
By you spending the effort to determine the maximum size that each image can be displayed in the location it’s placed inside and resizing, you’re images to be no wider. This can significantly reduce the weight (size) of the image without any effect on the quality rendered by the browser.
Keep in mind that with responsive designs the widest size might be on smaller devices as they will typically go to a single column.

2 Likes
5

Doug,

I’d be interested what is your advice regarding the dimensions of background images (those that are supposed to fill the entire area of a viewport)…

2 Likes
6

Take a look at Screen Size Stats – in your country:

This is Denmark:

54
542440×332 296 KB

This is World Wide:

10
102436×340 297 KB

But look at your own country and your target group… and then add a little so you don’t have to change resolution of all your images ‘tomorrow’

1 Like
7

Thank you for your advices!

I try to learn to fit images first on full width banners.
Got PhotoJob2 to try it out.

I have banner that is set in RW for 1170px width and 540px height.
So this should be then a target, and it will keep width under 1400px like @Mathew suggested and under 1200px making site bootstrap 4 ready like @Doug states.

Stock photo that I got was
5600 x 3750px 4.2Mt JPEG (it was only download option in Adobe stock for that photo)

I throw it into PhotoJob2
-> Conversion On
-> Keep original On
-> Resize On
-> Preset Custom
-> Fit to rectangle
-> Width 1170
-> Height 540
-> Pixels
-> Resolution box checked for 72 pixels/Inch
-> Export Result: Size 806 x 540 pixels, 70kb

-> Fit to fill rectangle with same options gives
-> Export Result: Size 1170 x 783 pixels, 119kb

I get only either width or height right for my banner that is 1170 x 540.
I am missing something, or I am right that it is not desired out come?

Or if I read right this is what was suggested, to make Full width banner width for 1500px?
-> Fit to width
-> Width 1500
-> Pixels
-> Resolution box checked for 72 pixels/Inch
-> Export Result: Size 1500 x 1004 pixels, 176kb

@Mathew is it better to save original image aspect ratio and choose Fit to retangle instead of Fit to fill rectangle? Opting for Resolution to 72pixels/inch gives same results or leaving this option out gives same result as far as I know.

8

My opinion is it depends. If it’s genuinely just a background then having a bit of softness or distortion then a smaller size that gets blown up a bit works well. I find even with a large screen size like the 27 or 32 inch that has become popular lately, most of us don’t run the browser in full screen. With most websites restricting true content to about 1200px all you get is a lot of white space on each side.
I would not worry too much above 1500px. Anyone using the larger screen sizes are probably using the extra real estate for having other apps open.
The other thing about an actual background image is it may be better to soften the image with your favorite image editor(Affinity Photo, Photoshop, etc.) and add your transparent overlay, then save it and optimize it for the web. Softer images compress much better.
For a photography or graphics organization, then the image quality is more important so at least some of this suggestions would need to be reduced.

1 Like
9

Question for using smaller images that are not part of photogallery

I have page where I have image for each category:

44
442286×750 299 KB

With this this setup:

24
24660×528 24.9 KB

Now if I make lets say 725 x 482px image to 361 x 240 to be near that (320 x 240px) set up - it will look down right blurry on full screen.

In this case I am even supposed to resize image? Should I use bigger size image for RW will scale it and constrain width? In that case what size would you recommend and why?

Than you for your help!

10

As I mentioned in my initial response:

It is best to instruct RW to use an image “as is”, without altering its size and—especially—proportions.
So, that means that you should not constrain image’s dimensions in RW’s settings. You should use 100% scale, to make sure of that, unless you are dealing with some special requirements.

Again, others may use a different approach, but this is what always works for me.

1 Like
11

There’s a lot of good suggestions that others have already provided after you asked your questions. Use their advice.

In terms of something like Photojob: I would never personally choose any options that mess around with the ratio (or scale) of my image. I would simply resize. This means I always choose the “fit to width” option under the Resize area. I would never “stretch”. Depending on the image I might choose their crop option, but you have to trust the app in terms of what portions of the image it would cut out. To be fair there are a lot of images where this would work fine.

It sounds like you may not have an image editing app (Affinity Photo, Acorn, PS, many others). I typically do cropping in thos programs (if needed) because then I can choose what stays in the image vs. what is deleted. I don’t think you need to do things this way. It’s what I do with my own photo images as I currently love the 16:9 ratio (think HD video) for web images. But I’ll sometimes use outside images (e.g. from Unsplash): in those cases I don’t crop at all, simply resize to a width of 1400 or 1500 px.

The idea is not to make your image as small as possible in absolute terms, but to make it decently small so a web page will still load quickly. It seems your example of an image of 1500x1004 pixels with a size of 176 kb is fantastic.

Later you give an example where you both constrain width and constrain height. That could lead to a different ratio for the image and in itself could be causing some blue. If the images are small enough (kb wise) then don’t worry about downsizing.

I hope this helps a bit.

1 Like
12

I wouldn’t change the ratio (width to height) of your images “automatically” with software. Pick for instance width and let the app calculate the height.
If the ratio of the original is not what you want then crop the image to fit.
That way you choose what part of the image remains.
If you don’t have an image editor yet(you’ll probably end up with one or more in your toolbox), you can use the preview built in your Mac to resize and crop images.

Or the official Apple support:

1 Like
13

This topic was automatically closed 6 days after the last reply. New replies are no longer allowed.