Images recommended measures [closed]

Objective response

There are no recommended measures for image sizes.

Rather, I would tell you to take great care of the size of the images according to the minimum and maximum width that should be shown on the devices and their weight.

Recommendations @ g3kdigital

I have developed, from my own and subjective experience , a manual regarding this (that for something I am a designer), but my recommendations are not those of a whole community.

For example:

• If the image in mobile measures 400px, then its width should correspond to 400px
• In retina screens , it is recommended to change to double or @ 2X, that is, following the previous example to 800px.
• If they are background images or that always cover the width of the device, the dimensions should be from
  • 960px to 1200px wide
  • and about 480 to 960px high.
• If you can afford media queries for each image , then
  • From 1320px change the size for a minimum width of 1440px to a maximum of 2600px
  • And in height a maximum of 1200px.
• I also prepare other types of images for the full-width and full-height designs , which only charge in a half query whose dimension exceeds 960px high and orientation is portrait because here the images I export from 1600px to a maximum of 2000px in both width and height.

  

The above is more or less an annoyance for a developer, but in   my case is an ethical duty, more than a responsibility imposed.

If the above seems very tedious, then try to take better care of the weight of the images , it depends a lot on the type of the image, but as much as possible if you use photoshop export with the save for web option or install the tinypng.com plugin and if you do not have the 50 dollars that it costs the best is that once the passes are exported through the web or similar alternative. Even from the illustrator you can export different resolutions abbreviated or from photoshop create a " action " that automates the different exports according to sizes.

In your case, I would export them to half of a maximum resolution (so only see a third) that is:

• On mobiles (960px / 2) = 480px.
• Retinas = 960px.
• Monitors = 1300px.

Although the most purists, they would say that I divided it between 3 and not 2, because that is what you are going to use it.

As soon as weight ranges , I recommend that you:

• An image can weigh on average 60-200kb and a maximum of 450kb (0.45mb)
• If it weighs equal or more than 0.8 mb after being exported and compressed, I try to sacrifice dimensions in its width to be at maximum 0.65mb, sometimes it works a lot to use in photoshop a "surface blur" in the image.

For color icons, I use SVG (no png backups because I live to the extreme !! lol), for single color icons, I create my own font from other sources using fontastic.me and putting the icons that are needed or directly use fontawesome. Svg you can compress them even more using SVGOMG .

Regarding automation with different resolutions there is a project called: RetinaJS that follows the convention of the iphone of @ 2x @ 3x etc .. or else you can create a simple script by js, that changes the src of the img . That if I try that all the images that have these variants in resolution have a suffix of _ @ 1x to be able to detect them discriminating of which they do not have variations.

As for the css and the background-image, I always try to use css variables, so I only have to replace the variables in the body in each query in the media, something like this:

:root{
  --img_fondo-01_1X: url('http://picsum.photos/1200/600');
  --img_fondo-01_2X: url('http://picsum.photos/1600/900');
  --img_fondo-01_3X: url('http://picsum.photos/2200/1080');
  --img_fondo-01_2Y: url('http://picsum.photos/600/1600');
}

body{
  --img01: var(--img_fondo-01_1X);
}

@media (min-width: 960px){
  body{
    --img01: var(--img_fondo-01_2X);
  }
}
@media (min-width: 1360px){
  body{
    --img01: var(--img_fondo-01_3X);
  }
}
@media (min-width: 1360px) and (orientation: portrait){
  body{
    --img01: var(--img_fondo-01_2Y);
  }
}

As you can see, in summary what I do in the css is:

• Alist all the images that will be used in all the projects in the root using more semantic variables.
• In the body rename the most semantic variables by more standard variables, so I can call them in the project without complicating me remembering the name, just the number.
• In the media query, whenever I need it, I only have to change the variables in the body and I do not complicate it, change it in each selector.

For subject variations, I simply associate the variables to a class in the body, something like this:

body.theme01{
  --img01: var(--img_fondo-05_1X);
}

@media (min-width: 960px){
  body.theme01{
    --img01: var(--img_fondo-05_2X);
  }
}

And ready. It's a generic response, but I hope it helps you.

PS: Anything, leave your comment and a +1 vote to the answer would not be bad ☻.