Hey guys! I have an honestly broad question about web design, but I know people here are very helpful and perhaps somebody can point me into the right direction.
Question: where do I find pictures for my web site and which dimensions/ratios should I use to make the site easy to load?
Websites that I am inspired with are all built on very simple canvases with very nice pictures doing all the charm. I am completely lacking any photo design skills, but suspect there have got to be some best practices in this area. In my website I intend to use one picture for each item (article, project) in 2-3 variations, such as hero and thumbnail.
I am essentially looking for (1) resources with more or less business-oriented pictures; (2) best practices on cutting the size without damaging the quality; (3) any conventions on how to handle pictures on your website.
Hi @Buzko I totally get it, I was on that same situation when I started this web design journey myself. I can recommend some sites for free stock images and the software that I used to do the resizing part.
For the resizing part I use a software called Affinity Photo it’s an MacOS software but works great, its main objective is photo editing but as I mentioned I use it for resizing. Normally if you export your image 2500 px wide at 50% quality it’ll give you a great full background image with excellent web quality.
Here are some experts in that matter who can give you more idea about this, this is what I am currently doing and I hope it helps in some way.
You can get Zooomy for 4 bucks and inside you can search inside 30 or so sources like Unslpash.
As for a general rule, a small image should be under 25k and a big image should be under 150k. You can make ONE exception for a hero header, but under 250k.
Use images formats and optimisation wisely. If you have very large PNG with transparency, check http://quasimondo.com/ZorroSVG/. Use https://imageoptim.com to compress images and read all the documentations because you can and should add more crunchers to it. Use SVG for everything you have a vector source for. Prefer looping HTML5 video MP4 rather than using an animated GIF. Use https://pngmini.com/ because it can compress an image to png8 but with a true alpha channel.
Read everything you can about images formats and compression. I mean constantly. This is a complex topic but web designers absolutely have to master it.
Edit: at times you’ll have to produce animated gif. When that happen, dont spend too much time looking around, the best quality and size can only be achieved with Photoshop. By large!
Vincent, thank you very much for your advice! I used the apps you recommended, but hit the stumbling block nonetheless.
In essence, I found a great picture of approx. 3 mb, run optimizer on it, but arrived at 3 mb again (98% of the initial size). Just a little bit far from what you suggested
I suspect that there is simply a conceptually different technique of optimizing big pictures. Any recommendation on that?
Again, websites that I am inspired about all use large pictures, but they are indeed of the sizes you talked. So I guess there has got to be some tool. If you just point me in the right direction, I will do my best to study it myself. Perhaps, as you noted, this can only be done with Photoshop, then I will give up…
I suspec not A picture is not a picture. By that, I mean compression results drastically change from one picture to another. Compression methods can do wonders for an image that has a few colors and a lot of “painted” areas. But if a photo is full of tiny details on all its surface, compression is surprisingly difficult to handle.
Can you share you image so we know what we’re talking about?
Not likely. Photoshop is an unbeatable beast at making the best animated gifs, and the difference with other tools is really noticeable. But for all the rest, PS is on par, or just slightly over the crowd (paleted images such as PNG8, especially when you start to get under 128 colors).
A picture is not a picture. By that, I mean compression results drastically change from one picture to another. Compression methods can do wonders for an image that has a few colors and a lot of “painted” areas. But if a photo is full of tiny details on all its surface, compression is surprisingly difficult to handle.
