Streaming live at 10am (PST)

Pictures for your website


#1

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.

Any tips and recommendations are welcome!

Best regards,
Roman



#2

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.

Sites with great free stock images:

  1. Pexels
  2. Picjumbo
  3. Unsplash
  4. Stocksnap
    ...and theres plenty more

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.

Cheers!


#3

Many thanks @aaronocampo! I will explore the links and perhaps get back to you, as you may have some more tips for my journey!


What is a good limit to a web page file size including assets?
#4

You can get Zooomy for 4 bucks and inside you can search inside 30 or so sources like Unslpash.

http://zoommyapp.com/

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!


#5

Found this on DN just now http://lennydevelops.com/best-practises/best-practices-image-optimisation-web?utm_source=designernews


#6

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 :smile:

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...

Thank you once again!

Roman


#7

I suspec not :slightly_smiling: 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? :slightly_smiling:


#8

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).


#9

You can, use Caesium.

It can do what Photoshop can, but it's freeware /openSource


#10

Hello @Buzko I wanna leave here an example of the technique that I'm using

The file hasn't been reduced in dimensions but the size of it

Here is the original file:

And here is the compressed file:

https://cl.ly/0G3A021L372S

Check them out and it is pretty much de same quality, there are very few differences that to be fair on the web you wouldn't notice.

It's a compression of 87%!


#11

Thanks @aaronocampo! This morning I found an easy way to achieve similar results with www.pixlr.com/express!

Just need to find some nice pictures now for my future site :smile:


#12

Try unsplash.com. They have some great stock images and they are free. :wink:


#13

Pixabay.com collects from many other sources including unsplash.


#14

I mostly use adobe stock photos and shutter stock.


#15

Thanks @DFink for the share! :wink::+1:


#16

Those get expensive real quick. I stick to free unless a client is willing to pay for it.


#17

@DFink Same thing I was thinking... :+1:


#18

Yes. It can get expensive.

For me... a subscription is worth it though.

With Shutter Stock... it's more of a per image thing.


#19

Thank you all guys! I used the tool recommended by @vincent Vincent - http://zoommyapp.com/ and seems to be just fine for now.

Love Webflow and its community!


#20

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