I am using fullpage.js to create parallax website, however I am thinking of the ideal image size that I can use for background image in every section.
If the image is too big it will cost more loading time, but when the image is so small it might sacrifice the quality of the images, so I am looking for the ideal image size.
You can make use of CSS 3 media queries to load one or another background image depending on the resolution of the viewport.
This will help a lot when loading the site in mobile devices and won't load huge images for small laptops.
Additionally you can load the backgrounds dynamically using this lazy load technique. This way you won't load images in sections which are not visible.
You can use images based on ratio 16:9 which is usuall 1.777 Units to 1 unit. a very good reasonable size can be 1920 x 1080 Saved for web from photoshop or any other software also 1440 x 900 is a good size but you will find it a bit blurry on 21" plus screens
Related
I'm wondering if it's considered bad practice if I resize a logo or any image with CSS or should I do it with an image manipulating program before putting it on the site?
I would reccomend you using webp or svg if possible. Otherwise, the lighter the file the faster it loads, that will take effect in the site performance and therefore in your speed score, which will affect to your google positioning. (check https://developers.google.com/speed/pagespeed/insights/ for more info)
So, in short: You should resize with photoshop and then resize with css to adapt it to screen
Edit: Use the smallest size possible without loosing quality in 4k and resize with svg.
if you use .png or .jpg format, the size is better to double as shown on web page, example: the logo shown on web page is 200x60px, then on Photoshop resize the logo to 400x120px, then save as .png or .jpg. You do this is for logo clear and sharp display on retina screen.
as #LiLPandemio said, the better choice is using .svg format, this is vector format, modern browser support, Pixel-independent, transparent support, you do not need worry about size.
Is okay to resize a Logo from "Big to Small" Size to prevent your user to see pixelated images like a 50x50px image to 150x150px.
The best Option for Logos is to use .svg (Vectors), where you can set a Responsive size using css or html for example:
<img src="mylogo.svg" width="6rem"> or
<img src="mylogo.svg" style="width: 6rem;">
Those 2 examples are using a responsive image with a responsive size. It will help you to make a beautiful website, SEO Optimizes and best of all: Bets user experience not only for logos but icons as well.
I'm working on the design for a windows 8 app, with a team of developers.We have finalized most of the screens for the app, the developer informed me to do the mockup of the entire app in photoshop to be presented to him and the screen size should be 480 x 800. ( right now sitting at 480 x 1800 due to scroll in page)
I have been informed to optimize the mockup for the other 2 remaining screen sizes 768 x 1280 and 720 x 1280 is this required? wouldnt this be covered in development stage.
From my present html5 and css knowledge building small static websites, width 100% in a container with width wouldnt fix this?
As the design is following the guidelines with grids i made from the guidlines pdf i had set it up for 480 x 800 now with two new screen size how can i go about this?
Can i change the canvas size in photoshop and resize all the elements?.
Please let me know if there is anyway possible to get hands on - SplashScreenImage.Screen-WXGA.jpg , SplashScreenImage.Screen-720p.jpg so i can overlay the jpg in photoshop and create grid i have windows 7 not able to install SDK to get these 2 images.
Mockups for other resolutions would be (almost) the same. There is automatic scaling. The only difference is that 720p resolution screens represent scaled 480x853 resolution, which is almost never any problem (if you have scrollable pages, like you described, the developer has to only make sure that the scrollable component is the one to be expandable in height).
See more here.
The only problems are images. The advice (of the above source) is to use the highest scale, that is for images of size 100x100 on 480x800 screen, use files of 160x160 size.
Whan I run a test page in google PageSpeed.
I found a few warnings like for example serve scaled images..
http://man-vimal.net78.net/introduction/?intro/action=main
THe results were as such :
The following images are resized in HTML or CSS. Serving scaled images could save 449.3KiB (99% reduction).
http://man-vimal.net78.net/.../twitter-logo.png is resized in HTML or CSS from 367x367 to 20x20. Serving a scaled image could save 140.9KiB (99% reduction).
http://man-vimal.net78.net/introduction/views/images/fb.png is resized in HTML or CSS from 1,692x1,692 to 20x20. Serving a scaled image could save 115.9KiB (99% reduction).
http://man-vimal.net78.net/.../linkedin.jpg is resized in HTML or CSS from 1,024x768 to 20x20. Serving a scaled image could save 99.6KiB (99% reduction).
http://man-vimal.net78.net/.../panorama.jpg is resized in HTML or CSS from 604x453 to 100x100. Serving a scaled image could save 81KiB (96% reduction).
http://man-vimal.net78.net/.../googleplus.jpg is resized in HTML or CSS from 450x320 to 20x20. Serving a scaled image could save 12KiB (99% reduction).
What is a scaled image and how can I fix this up ??
A scaled image is an image that has been scaled to match the size that it is displayed.
http://man-vimal.net78.net/.../twitter-logo.png is resized in HTML or CSS from 367x367 to 20x20. Serving a scaled image could save 140.9KiB (99% reduction).
This is telling you that the your source image is 367x367 but you are displaying it at 20x20.
It is inefficient because the browser has to download the larger image and then rescale it. The 367x367 image is 140kb larger than a 20x20 image would be.
To fix this, resize the image (in photoshop, preview, etc. ) so that is 20x20 and serve that one instead of the image you are currently serving.
your images are too big. just resize them. you can even use paint to do that. a scaled image is basically a resized image.
The typical situation is that, say you have an image with a width of 400px, but it doesn't fit in your layout, so you go to your style sheet and write:
img {
width: 300px;
}
Here, you've resized the image with CSS. But you're still serving the image at a 400px size and scaling the image down.
The implication here is that, rather than using the 400px image, you should use the image sized the way you need it because the file size will be smaller, and thus the page will load faster.
For example, if a user of a website uploads an image of size 400px x 400px and you use this image as a thumbnail say 40px x 40px using html/css.
The web browser has to download the larger image and compute it to the smaller size. The best way to solve this problem is to make a distinct copy of the image, say 'when the user uploads the image' and then use it directly.
So the web browser does not have to inefficiently scale down the image.
I hope this helps.
A Scaled Image is an image whose size matches exactly with the size defined in CSS or HTML.
If your original image called twitter-logo.png is of lets say 300 x 250 dimension but the dimension defined in the HTML statement is:
<img src="http://man-vimal.net78.net/.../twitter-logo.png" width="600" height="500">
then the browser will first download the original image (which has a dimension of 300 x 250) and will then resize it to match the dimensions defined in the HTML statement. i.e. 600 x 500
This resizing of images in the HTML or CSS slows down the overall page rendering considerably and should be avoided.
To resize images (and to optimize them losslessly) you can use a free software called RIOT (available only for Windows).
If I have an image that is 600x600 and I want to display it in 100x100 on a mobile device.
Should I resize the image 1st in Photoshop or should I just use width/height attributes (will this method force users to download a large image 1st and then resize it ?).
I know it is possible to resize using JS
The browser can resize images dynamically using CSS, but they doesn't always look as good as doing it in Photoshop. You should resize it for mobile to reduce the file size and bandwidth required.
i am learning web designing this days and come across the following problem, it will be my pleasure if you can solve it.
While designing a site i placed an image in background it looks nice on my system but on other big screens image looks small and shows white space around it so all that i want to know is what size of image i should select and what properties of css i need to apply?
for more infomation i am using 15" computer screen n problem occurs when i view my site on 17" system.
Waiting for your reply.
Your 15" screen is probably running 1024x768 resolution which is fairly small compared to the most common monitor sizes you will come across. I did a quick check in Google analytics for the most popular browser sizes wider than 1024x768 and came up with these common sizes -
1280x800 (typical widescreen 15" laptop)
1366x768
1280x1024 (typical q7" and 19" monitor)
1440x900
1680x1050
What I usually do is select a pretty large image, then do a radial gradient fade to the background color. Depending on the complexity of the image, I will often use an image that is 1600px wide so that it covers all but the very largest screen resolutions. Then place the image centered at the top of the page. Here is the CSS -
BODY{background:URL(image/url/goes/here.jpg) center top no-repeat;}
With a little practice you should be able to make the image blend in to the background nicely so it looks good on very large screens as well.