I did read that linking is faster, will keep that in mind
I see your point on the html, it is not really an issue in this case since I am hosting on my server space, but I can see where that could be a bad habit to get into as one moves on to a corporate environment.
although the html statement access and the @import statement do contradict each other, using link would require access to the html to change the font, so If we are only going to grant people access to the CSS code then we have to import the fonts rather than link the style sheet in html
I hadnāt thought of embedding the image within the button element! So, if done this way I would assume that I would still need to select that image element within CSS for scaling/resizing purposes. Is that a correct statement?
Thanks!
Correct.
Keep these things in mind:
.jpg take significantly less time to load than .png
only .png can have transparent backgrounds
vectors images can be as large as you want and their images are not distorted
always scale down an image and never stretch it.
Understood and thanks again! Iāve been working with PS since it was at v7 soā¦13 years or so I am very familiar with image formats and their restrictions/capabilities. I did not, however, know that jpg loads fast than png. I will definitely keep that in mind!
@ChrisCline1138
Hereās an example:
<?php
$secret_hash = md5(time() * time());
echo <<<EOT
<html>
<head>
<title></title>
<link rel="stylesheet" href="/css/style.css">
</head>
<body>
<label>Your secret hash is:</label>
<br>
<div id="secret_hash">{$secret_hash}</div>
</body>
</html>
EOT;
This is an extreme exampleā¦ but in order to change the spacing between your label and hash they would have access to your algorithm for your secret hash. Whereas if you just add the compressed css file then you donāt have to.
Yes., I just introduced a new word: ācompressed css fileā. So when you start trying to increase your page load time., itās better to use scripts that grab all your css files from one folder into one file so that thereās only one request.
You donāt have to update your <link rel> line because it would include all your css files from your /css folder.
@Network_Ninja:
With PS you should always reduce your images to like 60% quality. They will still appear to look to the human eye but the size in the image is reduce BIG TIME.
1 Like
If you look at developer tools -> Network tab youāll see the sizes of each image loaded into DOM. You shouldnāt have a single image thatās over 1mb.
I see your point, where in more complex projects a person might not have access to all the files, and why there might be a reason for this
@ChrisCline1138
I checked out your site:
You have an image thatās 4mb large.
http://chriscline.tk/evaristo/img/gatillazo-vina-rock-2018b.png
Thatās way too big.
Why is it 4mb? Because itās a .png. I would recommend changing it to .jpg and reduce quality to 60%. Youāll see it probably go to 500kb and load almost 4 seconds faster.
yes I should use save for web on ps but I need it to be a png because there are transparent areas.
thanks for pointing that out, really did not even look at file size
Are you looking at the image Iām suggesting? I donāt see why it requires transparency. Itās the background image.
thanks
file reduced by 75%
should have thought about that
Plus you could crop out that piece to the right on the image with the guy in it and absolute position on top of background image. None of your images require transparency.
the bottom has a faded splattered effect
it helps fade into the body background color without seeing a line where the image starts
the main subject image is required to be centered by the testing suite, I did not want it centered so the image is twice as wide as what is visible and centered but half of it is transparent. It was all about getting the look I wanted while being restricted to certain guidelines by the project requirements.
Iāve redid them to considerably smaller file size
You can still center the image without having an entire empty transparent block.
I donāt want to split hairs on your project., but there are multiple ways to significantly reduce page load. Right now it seems fast to you because your browser is caching the image., but with like web apps and users with slower internet connections it would probably take like 14 seconds to load your webpage.
thatās the thing I did not want the image centered but the test requires that it is, this was my way of passing the test while maintaining the offset that I want
I do need to re-sample all that stuff though because that is a very valid point.
Every image I have there is way bigger than it needs to be, good thing is it is easy enough to fix
@kerafyrm02 @ChrisCline1138 Iāve learned some useful stuff just watching you two have a discussion. Great stuff! Iāve only been on FCC for a few days and I am really liking it:)
awesome
that is what this is for
keep it up
1 Like
I tend to test using a screenreader (at least a text browser), and maybe I wasnāt clear enough, but simple maintainance is my main issue with using images for buttons, and imo the main reason it isnāt done much any more.
1 How do I make it responsive
2 How do I change the text
3 How do I generate the correct alt text every time
4 How do I change the styling
If the answer to any of these involves āopen photoshop, regenerate buttonā rather than āchange a fragment of code in a text editorā, then imo maintainance burder is too high, itās too slow and complex. With buttons that are not images, 1 and 3 do not exist as issues, and 2 involves changing some text. Itās not a case of accessibility for disabled users as much as ease of development.
1 Like
