Web Design Help

+9 Jay Deshaun · December 11, 2016
I have a simple front-end/web-designer question. 
How do you know what image resolutions you should use on a website? 

For an example; I have a portfolio site (I'm currently revamping it) and I don't know what resolution to use for previewing my other sites I worked on. 

Current preview: http://jquonprojects.tk

Post a Reply

Replies

Oldest  Newest  Rating
+2 Dhruv Singhal · June 24, 2017
can't understand what ur trying to say
+1 Jay Deshaun · June 26, 2017
I'm asking about image resolutions...
The bigger they are the more memory size it is (ex; 1920x800 1.5GB)

I just wanted to know how do you know what image sizes to use on a site for both desktop and mobile designs.
+3 Nicholas Eason · June 28, 2017
Resolution is whatever, just make it look good, and don't over overboard (if that makes sense). i.e. You don't need 4k resolution images for images you plan on making 400 px width. In your case, I guess this is for the "projects" page? In that case, you debatably don't even need images for your projects. An almost solid yellow image doesn't really convey much, and what it does convey isn't the greatest. In that case, you might do better with a nice description of the tool (and a URL to access it) without a picture.

To answer the original question in full (and to not go off on a tangent), use a resolution that doesn't look bad. Scaled up, everything will look bad, but scaled down, it wont. So keep that in mind. There's no sense in using 4k images, for example, because so few people have 4k monitors. If your image takes up the whole window, I'd probably use 1080p. If it's not, decrease as needed, but don't go lower than like 480p.

If by Resolution you meant size on the website (a 1080p image can be set to take up a 400px area, after all), you come to a slightly more complicated area. In that sense, using a % for width will make it easier, but at some point you'll have to adjust all the values depending on certain conditions. This is where you'd use a media query (https://www.w3schools.com/css/css_rwd_mediaqueries.asp).

I typed this out and didn't even read your comment below the original post, so I wont delete the previous, but to respond to your comment:

I'm asking about image resolutions...
The bigger they are the more memory size it is (ex; 1920x800 1.5GB)

I just wanted to know how do you know what image sizes to use on a site for both desktop and mobile designs.


Change the image size, not the resolution (using CSS. i.e. width;400px or width:20%). It's a portfolio website, so there's a very low chance it'll get pulled up on mobile (doesn't mean don't design for mobile, but don't let mobile load time hold you back. A 1080p image is only a couple mb's anyways). Ideally, find a middle ground between what you use images for, and what you can use HTML/CSS for (HTML/CSS bloat increases load time, too many images increases load time). For example, on your projects page the TicTacToe image has text on the image. Some load time could probably be saved on the initial load (since the browser has to download the image. Future loads it'll be in the cache, so it'll load quicker than the initial load) by making that text HTML/CSS text instead.
+1 Barik Yusif · June 28, 2017
I 'd suggest you use the smallest possible image you want to have or use on your site and just handle the resolution manually using the 'Height and width' elements.
+2 Dhruv Singhal · June 30, 2017
the best way to do depends upon what that image is means

    if that image is a kind of clipart then make svg of that image using corel draw cause svg will offer like i should say infinite amount of quality and will take barely and data usage

    and if the image is just normal image then apped it's offsetWidth to a php file i mean the url may be 
example.com/image.php?code=1&q= and in javascript you may have
this.src += parseInt(this.offsetWidth);

OR
this.src += parseInt(this.offsetHeight);

and the server will resize the photo and send it to the client

tell me if i understood the question wrong
0 Jay Deshaun · July 4, 2017
Thank you everyone!
@Nicholas Eason
I like your more in-depth answer and will consider it.
I will be using it for my future projects too.
0 Nicholas Eason · July 5, 2017

Thank you everyone!
@Nicholas Eason
I like your more in-depth answer and will consider it.
I will be using it for my future projects too.


No problem. Something else I forgot to mention, try to maintain the aspect ratio of the images, and keep them consistent. For example, let's say you have a 16:9 resolution image. You'd want all of your images to be 16:9, and you should set it to a size that keeps it's aspect ratio. (so for a 720p image, don't make it 400px by 400px, keeping the aspect ratio helps with unnatural stretching).
  • 1

HTML / CSS / Web Design

122,823 followers
About

Discuss, share, ask, learn and teach HTML5 and CSS3.

Links
Moderators