Rozmiary obrazów instruktażowych: 13 kroków

2024 Autor: John Day | [email protected]. Ostatnio zmodyfikowany: 2024-01-30 11:32

Czy masz problemy z prawidłowym rozmiarem obrazów? Czy Twoje obrazy są zbyt duże i przepełniają ramkę, jak ta powyżej? To pouczające próby podsumowania tego, czego się nauczyłem, aby rozwiązać ten problem.

Personel Instructable powiedział mi, że wszystkie przesłane obrazy są duplikowane w różnych proporcjach. Ta pula obrazów jest następnie pobierana i ma różny rozmiar w zależności od urządzenia, z którego przeglądasz instrukcje. Nie ma sposobu, aby określić w zwykłym edytorze, jaki rozmiar i proporcje mają być wyświetlane.

Następnie zasugerowali, że „Inną opcją, która może zadziałać, jest przesłanie obrazów o bardziej tradycyjnych proporcjach. Wszystko od 16:9 do 4:3 powinno wyświetlać się bardzo ładnie”.

Zauważ, że mówią, że to „może” zadziałać. Oto, co znalazłem w moich zmaganiach, aby moje obrazy wyświetlały się przyzwoicie. (Zauważ, że używam obrazów z mojej „kostki Rubika, która stała się łatwa”, stąd wszystkie te obrazy kostek!)

Powyższy obrazek ma oryginalny rozmiar (600x195), który nie mieści się w zakresie tradycyjnych proporcji. Jak widać, Instructables wyświetla ten obraz w powiększeniu zbyt duży z odciętą lewą i prawą stroną. Zobaczmy, co możemy zrobić, aby ten obraz wyświetlał się poprawnie.

Krok 1: Wypróbujmy współczynnik proporcji 16:9

Wypróbujmy więc proporcje 16:9 (szerokość:wysokość). Zachowam oryginalną szerokość 600 pikseli, 16:9 oznacza, że wysokość musi wynosić 338 pikseli, więc zrobimy płótno o rozmiarze 600x338 i wrzucimy do niego obraz 600x195.

Zobaczmy więc, jak wygląda ten obraz o wymiarach 600x338 (16:9). Co ciekawe, kiedy wrzuciłem ten obraz i wyświetliłem jego podgląd, pasował idealnie - lewa i prawa krawędź nie zostały obcięte! Zrobiłem zrzut ekranu tylko na dowód, zobacz to na następnym slajdzie.

Ale kiedy oglądam to w mojej przeglądarce (Chrome), to widzę na powyższym obrazku, że prawa i lewa strona są ponownie odcięte! Z tego eksperymentu wynika, że zmiana rozmiaru do proporcji 16:9 nie rozwiąże naszych problemów!

Na marginesie, 16:9 to „nowy” powszechny współczynnik proporcji znany jako „panoramiczny”, podczas gdy 4:3 to oldschoolowy „pełny ekran”, który był powszechny w czasach telewizji kinowej. Tak, wy, milenialsi, prawdopodobnie nie macie pojęcia, o czym mówię.

Krok 2: Obraz 16: 9 świeżo przesłany, jak pokazano w podglądzie

To zdjęcie jest zrzutem ekranu pokazującym, że nasz obraz 16:9 wygląda idealnie w podglądzie. Sukces, prawda? Cóż, nie tak szybko - zobacz, co się dzieje, gdy faktycznie przeglądamy tę stronę w naszej przeglądarce (Chrome)! Lewa i prawa krawędź są ponownie obcinane! Po prostu wróć do poprzedniego slajdu i przekonaj się sam.

Wyciągnięta lekcja - nie ufaj podglądowi! To, co wygląda dobrze w podglądzie, jest renderowane inaczej w rzeczywistym przeglądaniu w przeglądarce!

Poza tym tak, pod moim obrazem jest dużo pustej przestrzeni. To dlatego, że upuściłem obraz 600x195 na płótno 600x338 i umieściłem go na górze, więc na dole jest cała ta pusta biała przestrzeń. Co możemy z tym zrobić? Cóż… postaramy się omówić to na późniejszym slajdzie.

Zobaczmy więc, jak możemy sprawić, by ten obraz wyświetlał się w całości.

Krok 3: 16:9 wyświetlany z odciętymi bokami L&R

Dla przypomnienia, na wypadek, gdyby z jakiegoś powodu twoja przeglądarka wyświetlała te obrazy w formacie 16:9 idealnie, to właśnie o tym mówię. Oto zrzut ekranu pokazujący, jak widzę mój obraz 16: 9 w kroku 1 wyświetlany po „ustaleniu” po wstępnym podglądzie – zauważ, że lewa i prawa strona są odcięte.

Jeśli widzisz, że mój obraz z kroku 1 jest wyświetlany idealnie, to świetnie. Daj mi znać! Ale tak to widzę. Tak, jest znacznie lepszy niż oryginalny obraz ze strony tytułowej, ale nadal jest ucięty. Tak więc dla mnie, pomimo rad ze strony personelu Instructables, proporcje 16: 9 nie całkiem go zmniejszają. Przejdźmy do proporcji 4:3.

Krok 4: Wypróbujmy proporcje 4:3

Wypróbujmy więc proporcje 4:3. Zachowam oryginalną szerokość 600 pikseli, 4:3 oznacza, że wysokość musi wynosić 450 pikseli, więc zrobimy płótno o rozmiarze 600x450 i wrzucimy do niego obraz 600x195.

Jak wygląda ten obraz o wymiarach 600 x 450 (proporcje 4:3)?

Ponownie, kiedy po raz pierwszy go upuszczam, obraz wygląda świetnie (z wyjątkiem całej białej przestrzeni na dole). Lewy i Prawy są wyświetlane dobrze. Patrząc na to w przeglądarce, wydaje się, że prawy i lewy wydają się nadal wyświetlać się dobrze.

Jak wcześniej wspomniano, cała ta pusta biała przestrzeń pod obrazem jest spowodowana tym, że upuściłem obraz 600x195 na płótno 600x450 i po prostu umieściłem go na górze.

Wyciągnięta lekcja - współczynnik proporcji 4:3 wydaje się być wymagany, aby prawa i lewa strona nie były obcięte. Niestety oznacza to, że będzie dużo wolnego miejsca na obrazy, które są krótkie i szerokie, ponieważ będziesz musiał upuścić te obrazy na płótno o rozmiarze 4:3. Tak, możesz wyśrodkować obraz tak, aby była taka sama biała przestrzeń na górze i na dole, ale niezależnie od tego, nad lub pod obrazem będzie dużo białego miejsca, ale według mojej najlepszej wiedzy jest to kompromis, musisz zrobić w Instructables, aby Twoje obrazy były nienaruszone.

Krok 5: 4:3 z wyśrodkowaniem obrazu

Oto ten sam obraz 600x195 wrzucony na płótno 600x450, ale wyśrodkowany tak, że u góry iu dołu jest równe puste miejsce. Wygląda trochę lepiej, tekst nie wydaje się być tak daleko od obrazu.

Krok 6: 4:3 z obrazem na dole

I na koniec, oto ten sam obraz wrzucony i przesunięty na dół. Teraz na obrazie jest mnóstwo pustej, białej przestrzeni. Obraz jest teraz naprawdę oddzielony od paska tytułu, ale jest bliżej tekstu. Oto twoje kompromisy i wyciągnięte wnioski:

• 4:3 wydaje się być współczynnikiem proporcji, którego należy użyć, aby obrazy były wyświetlane w całości w Instructables.
• nie ufaj podglądowi - może idealnie pokazać twój obraz, ale części mogą zostać obcięte w rzeczywistej przeglądarce

Krok 7: Jaka jest minimalna szerokość?

Zobaczmy teraz, jaka powinna być minimalna szerokość. Pokazany obraz ma rozmiar 382x206, bliski 2:1, wydaje się naprawdę ogromny, prawda? Oczywiście Instructables powiększył obraz, aby pasował do pewnej ustawionej szerokości, prawdopodobnie 640 pikseli, nie jestem pewien.

Ale pasuje, ponieważ jest bardziej „kwadratowy” – tzn. nie jest zbyt szeroki jak na swoją wysokość. Och czekaj, znowu zostałem oszukany przez ten Preview! Właściwie to nie pasuje - boki R&L są ponownie przycięte.

Właściwie to dziwne, nie tylko podgląd jest zepsuty. Właściwie spojrzałem na to w przeglądarce i na początku renderował się poprawnie (tj. Krawędzie R&L nie były obcięte). Ale patrząc na to ponownie przez przeglądarkę, teraz obraz jest renderowany ze zmienionym rozmiarem z obciętymi krawędziami R&L. Dziwne.

Spróbujmy więc zmniejszyć obraz. Zmniejszymy obraz do 200x108, zachowując proporcje 2:1.

Krok 8: Zmniejszanie obrazu, ale zachowanie proporcji

Więc zmieniam rozmiar tego obrazu do 200x108, zachowując ten sam współczynnik proporcji 2:1.

Teraz znowu wydaje się, że na początku pasuje (z rozdzielczością (jakość obrazu) znacznie pogorszoną!), ale oczywiście prawdopodobnie na nią patrzysz i wcale nie pasuje i wygląda dokładnie tak, jak oryginalny obraz, z wyjątkiem tego, że oryginał ma lepsza rozdzielczość. Ponownie, Instructables rozszerza obraz, aby pasował do pewnej ustawionej szerokości, dlatego ten mniejszy (200x108) obraz wygląda tak okropnie, znacznie gorzej niż oryginalny 382x206.

Mówię „prawdopodobnie”, ponieważ tak naprawdę nie mam pojęcia, w jaki sposób Instructables wyświetla te obrazy w twojej przeglądarce. Z jakiegoś powodu, jeśli odświeżę pamięć podręczną i przejrzę ten Instructable, moje rozmiary obrazu nie wydają się być spójne, więc naprawdę nie wiem, co robi Instructables, z wyjątkiem tego, że może być niespójny. Tak więc celem tego Instruktażu jest ustalenie, jak dostosować rozmiar obrazów, aby były wyświetlane przynajmniej w pewnym stopniu konsekwentnie!

Krok 9: Udowodnij, że obrazy od razu renderują się prawidłowo

Oto co zobaczyłem na początku zaraz po wgraniu obrazu – pasuje! (Zauważ, że musiałem dopasować powyższy zrzut ekranu do obrazu 1600x1200 (tj. Współczynnik 4:3), aby Instructables wyświetlał cały zrzut ekranu!)

Ale oczywiście wiesz, że kiedy patrzysz na ten obraz, para się cofa, to już nie pasuje. Zobaczmy, jaka musi być minimalna szerokość, aby pasowała.

Krok 10: Próba 382x287 (stosunek 4:3)

Zachowałem szerokość 382 i upuściłem oryginalny obraz 382x206 na płótno 382x287, aby uzyskać proporcje 4:3, ponieważ wcześniej odkryliśmy, że Instructable potrzebuje obrazu, aby pasował do tego współczynnika 4:3, aby wyświetlić go w całości.

Więc teraz pod spodem jest dużo pustej białej przestrzeni. Pasuje bez niczego, ale znowu został rozszerzony, aby wypełnić pewną ustaloną szerokość, więc obraz nie jest ostry. Spróbujmy dowiedzieć się, jaka jest ta idealna szerokość Instructable.

Krok 11: Poszerz obraz z 300x206 do 600x206, aby zobaczyć, czy wyświetla się lepiej

Upuściłem oryginalny obraz 382x206 (2:1) na płótno 600x206 (3:1) tylko po to, aby sprawdzić, czy poszerzenie go do 600 pikseli sprawi, że Instructables wyświetli cały obraz. Znowu na początku tak było, ale jak widać teraz tak nie jest.

To naprawdę dziwne – za każdym razem, gdy po raz pierwszy upuszczasz obraz, wydaje się, że Instructables wyświetli ten obraz poprawnie, bez względu na rozmiar lub proporcje tego obrazu. Tym razem nawet wylogowałem się z Instructables i zamknąłem tę kartę, a następnie ponownie odwiedziłem tę Instructable „świeżą”, że tak powiem, aby sprawdzić, czy obraz nadal jest wyświetlany poprawnie. Zwykle wystarczy to, aby Instructable mógł zrobić swoje i zacząć zmieniać rozmiar obrazów, które nie mają proporcji 4: 3 i wyświetlać je z odciętą lewą i prawą stroną.

Ku mojemu zaskoczeniu, za pierwszym razem, gdy ponownie odwiedziłem ten „świeży” Instruktaż, ten obraz pozostał wyświetlany w całości, ale niestety, po tym, jak odszedłem, aby zrobić coś innego i przyszedłem może godzinę później, ten obraz zaczął się wyświetlać powiększony z bokami L&R ponownie obciętymi, tak jak widać to powyżej.

Dlaczego lub jak to się dzieje? Nie mam pojęcia. Nie mam pojęcia, dlaczego czekanie przez pewien czas po przesłaniu obrazu spowoduje, że Instructables renderują go inaczej, ale tak się dzieje. Jako dowód pokażę mój zrzut ekranu z powyższym obrazem, który wyświetla się idealnie w pierwszym oh, 10-15 minut po przesłaniu go na następnym slajdzie.

Krok 12: Dowód, że obrazy wyświetlają się prawidłowo na początku po przesłaniu

Oto zrzut ekranu pokazujący, że obraz 600x206 wyświetla się w całości natychmiast po przesłaniu. To jest zrzut ekranu poprzedniego slajdu. Wróć do poprzedniego slajdu i zobacz, jak podkręcony jest teraz obraz!

Zauważ, że mój zrzut ekranu miał w rzeczywistości rozmiar 1563 x 766, ale jak dowiedziałem się z moich eksperymentów na początku tego Instructable, wiedziałem, że nie pasował do proporcji 4: 3 (1563 x 766 to w przybliżeniu 4: 2), więc gdybym właśnie przesłałem ten zrzut ekranu w oryginalnym rozmiarze Instructable obcięłby krawędzie. Więc upuściłem ten obraz na płótno 4:3, dlatego pod moim zrzutem ekranu jest dużo pustej przestrzeni.

Zwróć uwagę, że zrzut ekranu został również zrobiony, zanim zmieniłem tytuł kroku 11 i skończyłem wpisywać cały ten tekst, na wypadek, gdybyś się nad tym zastanawiał!

Wyciągnięta lekcja - wyświetlenie przesłanego obrazu w przeglądarce natychmiast po przesłaniu niekoniecznie pokaże, jak będzie on wyświetlany w przyszłości. Z jakiegoś powodu prawie każdy obraz o rozmiarze i/lub współczynniku proporcji wydaje się ładnie wyświetlać natychmiast po przesłaniu, a nawet przez około 10-15 minut po przesłaniu, a nawet po wylogowaniu się z Instructables i wyświetleniu go świeżo z nowej sesji przeglądarki itp..

Ale poczekaj około godziny lub dłużej, a wszystko się zmieni! Twój obraz, jeśli nie pasuje do proporcji 4:3, zostanie dostosowany (zwykle powiększony) przez Instructable, aby krawędzie zostały obcięte.

Krok 13: Podsumowanie – czego się nauczyłem

Tak więc podsumowanie – czego się nauczyłem?

1. Aby wyświetlić obraz w całości, zachowanie proporcji 4:3 (szerokość:wysokość) jest koniecznością!

2. Użyj oryginalnych obrazów, które są duże, w najwyższej możliwej rozdzielczości i upuść je na płótnie o proporcjach 4:3. Jeśli jest zbyt duży, Instructables zmniejszy go, a będziesz miał ładne, ostre obrazy.

3. Jeśli twój obraz jest zbyt mały (dużo mniej niż 600 pikseli szerokości), Instructable rozszerzy twój obraz i sprawi, że będzie miał co najmniej 600 pikseli szerokości, dzięki czemu będzie mniej ostry. Mówię „ish”, ponieważ tak naprawdę nie wiem dokładnie, jakiej szerokości używa Instructable, ale wydaje się, że jest bliska 600. Prawdopodobnie jest to 640, co było powszechną szerokością w czasach starych monitorów lampowych.

600x450 i 640x480 mają proporcje 4:3. Wszystkie oldschoolowe "pełnoekranowe" monitory lampowe miały 640x480 (szerokość x wysokość).

4. Co zrobić, jeśli oryginalny obraz nie ma co najmniej 600 pikseli szerokości? Prawie wszystko, co możesz zrobić, to upuścić go na płótno o proporcjach 4:3, które wyświetla obraz zbliżony do oryginalnego rozmiaru. Jeśli oryginalny obraz jest mały, będzie dużo pustej przestrzeni, więc spróbuj wyśrodkować obraz lub umieść białą przestrzeń nad lub pod obrazem i postaraj się, aby wyglądał jak najlepiej.

Zgodnie z moją najlepszą wiedzą jest to kompromis, który musisz zrobić w Instructables, aby Twoje obrazy były nienaruszone.

Jako przykład, powyższy obraz ma rozmiar płótna 600x450 z obrazem 382x206 wrzuconym do niego i wyśrodkowanym, więc mamy równe puste miejsca powyżej i poniżej. Obraz wyświetla się mniej więcej w oryginalnym rozmiarze, myślę, że Instructables może go rozszerzyć do 640x480 (nieznaczne rozszerzenie), więc to najlepsze, co możemy zrobić z tym oryginalnym obrazem.

5. NIE ufaj podglądowi ani temu, jak wygląda Twój obraz przez pierwsze kilka godzin po przesłaniu ich do Instructable! Z jakiegoś powodu rozmiary obrazów wydają się być spójne dopiero po kilku godzinach od ich przesłania.

Za każdym razem, gdy po raz pierwszy upuszczasz obraz, wydaje się, że Instructables wyświetli ten obraz poprawnie, bez względu na rozmiar lub proporcje tego obrazu. Może nawet wyświetlać się poprawnie przez jakiś czas, ale NIE DAJ SIĘ OSZUDZIĆ, ponieważ w końcu zmieni ich rozmiar i sprawi ci problemy, chyba że zastosujesz się do zasady 4:3!

Mam nadzieję, że to pomoże i proszę, jeśli znajdziesz lepszy sposób lub masz jakieś inne wskazówki, daj mi znać!