Buttons and Nav Images in PS and Illustrator

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