When Printing Websites. Larger Images? [closed] - html

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 9 years ago.
Improve this question
It almost seems like a no-brainer, but I wanna get a second opinion. I am designing a project for a client where it will output PDF's that can be printed. As a customer of theirs, you can customize the cover page with an uploaded image. When printing the cover page, is it better to have them try and upload as big an image as possible?
Seems like the answer would be yes, but I have never (web) designed for print before. I've either done one or the other.
Any thoughts on this would be greatly appreciated.

When you say "big", it's unclear what you mean. Do you mean file-size? Image dimensions? I'll speak to both.
The actual printing of the page doesn't have anything to do with file or image-size from a bandwidth load perspective.
The bigger the file-size, the longer the upload time, the greater the bandwidth use, and the larger the .pdf file size.
The smaller the dimensions of the uploaded image and the lesser of the resolution means that if the image gets resized to fit a certain area, then the image will appear pixelated both on the web and in print. Conversely, you can resize down an image and not lose quality.
Hope my perspective is helpful :-)

I think you should resize the image while uploading in order to it fits the PDF page cover, except if the image is smaller than the page.
You don't need to get huge images for medium sized pages.

Related

Why do some websites duplicate their background images, to fill the screen size, rather than upload a larger image in the first place? [closed]

Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 5 years ago.
Improve this question
For the past few days, I have been looking at the various ways websites upload background images to their website via CSS.
When it comes to images which can be duplicated endlessly, such as plain stripes, I have noticed that some websites upload a small 'sample' of the image and then duplicate it with a CSS input such as background-repeat: repeat-x; rather than uploading a larger version which scales according to screen size.
Is this, primarily, a page load speed optimisation exercise, or is there another reason why somebody may wish to do this other than due to the original image being small in the first place?
Is this, primarily, a page load speed optimisation exercise,
Yes.
is there another reason why somebody may wish to do this
A repeating image doesn't have a maximum height or width that using a larger non-repeating image would impose.
This question intrigued me too, I just did a quick Google and from what I found most sites seem to be saying it takes a longer amount of time to download a dimensionally large image than repeat it.
http://smallbusiness.chron.com/making-background-images-load-faster-31826.html

Should we put all css inside HTML document? [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 6 years ago.
Improve this question
I'm trying to make a Site enhancement.
The Bootstrap.min.css took 0.5 second to load complete to our website.
I thinks solve the 0.5 by place all minified CSS in my HTML Document (In production mode). It's a good idea for run-time enhancement ? Does it make HTML Engine slow to load the CSS ?
That depends on your page. Besides a zillion of factors that influence the page speed, two factors are most important in regards to your question.
bandwidth
amount of requests
If you have one of those single page angular websites for example, then putting all css into your html makes sense. This will reduce the amount of requests, while the bandwidth consumption stays the same.
If you have a "normal" website, with the user loading a new html page every time he clicks on a link, then its better to put the css into .css files, so he doesnt have to load the same information over and over again. This will increase the amount of requests, while dramatically reducing the bandwidth consumption (because of browser side caching of the css).
If you want to increase the speed of your website, look into caching, CDN's and tools like those explained here, which will guide you into the right direction: https://developers.google.com/speed/pagespeed/

Using image with text instead of actual text? [closed]

Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 8 years ago.
Improve this question
I'm making a website to practice my HTML and CSS skills. If this was a situation where I'd sell a website to a customer, or a site for personal use on the internet, is there any reason to not have the text as a image? I've made a image in Photoshop and then stuck into a tag, the image is text (can't show you because I don't have 10 rep...) with a designed underline on the header and centred text below the header, 3 columns of the same side by side.
It won't reflow to fit the browser
It won't resize when the font size is increased
When you zoom the page, the text will pixelate
It won't show up in search engines
It won't show up in text browsers
It won't show up in screen readers
Links would have to be implemented with an image map
It will use more bandwidth (so load more slowly)
Yes. Several reasons:
Text within images isn't copyable.
Text within images isn't retrievable by search engines.
Images are larger and take longer to download than text does.
You have no control over the text with CSS if it's within an image.
Users who have images disabled or use text-only browsers would not be able to see any text.

CSS Background Images [closed]

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 9 years ago.
Improve this question
Hi there my backgoround images on my webpage are fuzzy and out of focus.
body{
background: url('../images/def2.jpg');
background-size: cover;
background-position: center;
background-attachment: fixed;
}
I'm getting my images from google images so don'y know the reliability of quality.
They're probably a lower resolution than your screen, so background-size: cover is stretching them too large.
Too add on to crunch, always make sure your images are large enough! Stretched images look unprofessional, so remember to always start with the largest file as your source, and make copies as you go when you need to scale it down so you'll always have the large image when you need it.
The reason that images look blurry when scaled up is because they lack the information to display on a larger size. You can eliminate this need by using vector graphics, but that isn't a feasible solution for a photograph, and is aimed more towards logos and the likes.
If you don't have the original image on hand, try contacting your photographer for the original. You can scale up if necessary, but anything beyond ~%30 increase will be somewhat visible.
If it's of any use, I did a reverse google image search to find similar images of the same fellow you've shown in higher resolution. It's not the same photo, as it appears that your picture is a still from a video, but it may be of use. Just keep in mind that these images are probably copyrighted and not approved for legal usage on your website.

font looks different while coding. how to fix it? [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I designed a page in photo shop.
When I try to convert it to HTML the header font looks a bit different.
But I applied the same styles and font, for example size is 36pt in Photo shop(non bold), I could get the same effect while I add BOLD when I coding in HTML.
The main problem is that, the font looks like cut letters, meaning the " I " looks like two dashes vertically arranged.
How to solve this?
Save that "page" as an image and then put that image into an HTML file.
EDIT: I think you can just use the PRINT key on your keyboard to make it really look like on your computer - even with all the Photoshop toolbars and such! But don't forget to provide the users with the color profile and illumination profile of your monitor and an exact layout of your room, and don't forget the type of light bulb you are using, the thickness and tinting of the glass in your windows and of course the angle of the sun!
The problem with converting photoshop files to a website is that Photoshop renders fonts different then browsers. In most of the cases, fonts are displayed the same as in your design, but sometimes you just can't get the fonts look exactly the same as in your photoshop file. Unfortunately, there isn't a fix for this yet.
Photoshop simply has a lot more font functionalities then browsers so you'll have to be satisfied with the simplified version in your browser.
What you can do is slice the text from the PSD as an image and include that in your HTML, but that is a very outdated method which will increase the loading time of your website.