Streaming live at 10am (PST)

Image Size for Hero


#1

I uploaded a 1920x600 image for my hero section and selected cover to have my image take up the whole section. The image looks blurry tho... I am using a hi-res iMac screen, should I make my image larger than that? If so what size?

I want my image to be sharp on all screen and plan on uploading smaller images for mobile and tablets.

Any advice is great, thanks.


#2

Hi @soulluciani

Can you please update your post with some more information so we can help you faster? Things like screenshots and your environment info really speed things up.

Posting guidelines can be found here: http://forum.webflow.com/t/posting-guidelines-for-the-need-help-category/8094

Thanks in advance! :smile:


#3

I'm using safari on a iiMac. I tried several different images but non of them look crisp, not sure why..
https://preview.webflow.com/preview/soul-lucianis-radical-site?preview=47f3cf66ef1b25b2e9f07610008499ee


#4

The background looks fine to me. When you're using COVER for background images, you have to expect the image to get a bit low in quality. Making it bigger is a good way to try to fix this, but then you'll be fighting with the file size.

Right now I see that your background image is a PNG with a file size of over 400K. Try making this a JPG to save load time.


#5

looks fine to me. you are developing with safari ?


#6

It looks blurry to me. What would be the max size you suggest to get a real crisp image?
I'm using safari right now. I use chrome as well, maybe I will log in with chrome and check it out.


#7

can you post a screen shot - or the image background image...
along with a screen shot of what you see

so we can compare ?

ie: show me the image that's clear and one that's blurry


#8

I have tried a few different images and image sizes. Here is the latest. The first is the original image. Its 2500x1600. I made it super large to test the quality but as you can see in the screen shot. Its actually worse than the smaller images. The color palatte isn't event right.

Any image I have tried looks good when it is the size of the container but any larger and its not looking right, doesn't matter what size the image actually is.


#9

Here is the screen shot after the image has been uploaded.


#10

How big is the file size of your background?


#11

@PixelGeek The image is 2.5mb. Would a larger size image change the color profile?
In general what size should I upload to get really crisp images that are responsive for all screen sizes?


#12

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